当前位置: 首页 > news >正文

小程序之移花宫-自定义底部标签图标---【浅入深出系列005】

浅入深出系列总目录在000集

如何0元学微信小程序–【浅入深出系列000】
不会导入/打开小程序的看这里
让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】

文章目录

    • 本系列校训
    • 学习资源的选择
  • 学习目标
  • 图标的注意事项
  • 图标资源
  • 打开小程序
  • 动手实践
    • 找到图标
    • 最简单,最无赖的手段
    • 使用photoshop 大法
  • 配套资源

本系列校训

用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干!
只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知!

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下:

P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。

学习目标

让自己的小程序与众不同
在这里插入图片描述
远看这不就是几个图标?近了一看这确实就是几个图标。

图标的注意事项

对于WEB比较熟悉的同鞋可以转身离开了。因为微信小程序的图标跟WEB页的菜单的图标确实很像,技术也比较接近。
1 最好要PNG格式。
2 最好准备两个颜色(一为你的应用项目的所用颜色,另一为黑白色)
其实呢,也没有人规定必须要这样的设置,你就是设一个红色一个绿色也可以,但是问题是人家商业性的小程序太多了,大家都这样,那你一个初学者,把握不好颜色,UI的设计的时候,往往就是乱搞一气。
3 最好是跟小程序一起打包,不要放服务器,也不要放云空间。这个东西在小程序这里其实就是相当于网站的菜单,如果第一时间显示不出来那是很糟糕的事情。

补:
PNG(Portable Network Graphics),便携式网络图形,是一种采用无损压缩算法的位图格式,支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。
重要的是,他支持alpha–直白一点说就是透明。
“jpg是一种图像文件格式,全称为JPEG(JointPhotographicExpertsGroup),是一种有损压缩格式,能够将图像压缩在很小的储存空间,常见的后缀名为.jpg和.jpeg。

图标资源

阿里图标库 https://www.iconfont.cn/collections/index
在这里插入图片描述

打开小程序

在这里插入图片描述
并打开app.json
找到tabBar这一段

"tabBar": {"color": "black","selectedColor": "#1296db","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "images/icon/shouye1.png","selectedIconPath": "images/icon/shouye.png"},{"pagePath": "pages/getExpress/getExpress","text": "取件","iconPath": "images/icon/qujian1.png","selectedIconPath": "images/icon/qujian.png"},{"pagePath": "pages/goExpress/goExpress","text": "寄件","iconPath": "images/icon/jijian1.png","selectedIconPath": "images/icon/jijian.png"},{"pagePath": "pages/post/post","text": "驿站","iconPath": "images/icon/yizhanxiangqing_o1.png","selectedIconPath": "images/icon/yizhanxiangqing_o.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "images/icon/renwu1.png","selectedIconPath": "images/icon/renwu.png"}]},

注意看这里。
在这里插入图片描述
这表示这是一个对象,里面有四个属性,分别为pagePath,text,iconPath,selectedIconPath
而“:”号后面就是他们的值。

动手实践

找到图标

将鼠标称动到 "images/icon/renwu1.png" 上面,然后左手按ctrl按键,鼠标一点击,小程序平台就会帮助跳转到这个图片上面。
在这里插入图片描述
再用鼠标,指到资源管理器里的这张图片的位置,右击鼠标。
在这里插入图片描述
选择 “在资源管理器中显示”(要注意的是这里的资源管理器是指windows自带的)苹果本的自行对比吧。我的苹果本其实太老了。为了几个菜单去搞一个程序有点太麻烦了,见谅了。不过整体布局是一致的。
在这里插入图片描述

最简单,最无赖的手段

在这里插入图片描述
直接下载,然后覆盖原来的文件。不过,有一些图标支持选择灰度值,有一些选择了之后就。
在这里插入图片描述
先不要管这个小细节,后面再处理。

在这里插入图片描述
回到小程序开发者平台里 重新编译
在这里插入图片描述

使用photoshop 大法

不会美工的程序员不是一个好厨子。所以,PS的简单操作还是要会的。
这个功能比较简单,所以就随便搞个绿色版就行了。
要注意的是,扔进去的是彩的。你要是把那一团黑的扔进去,还能画个123来,那你直接就去当美工吧。
在这里插入图片描述
在这里插入图片描述
直接将饱合度降成-100
在这里插入图片描述
这灰度,简直就是完美。
另存为,替换之!

最后如图:
在这里插入图片描述

图7:改好代码之后的样子
一般来说,window与tabBar对人的眼睛冲击最大。修改起来也是最简单。
可以说,不需要任何的电脑编程知识(当然,你还是要会键盘鼠标等操作,学习不是抬杠)
配套资源的PNG资源也可以自行百度PNG,只要熟练使用PS就可以处理了。这样图标就更加的灵活,更加的多样。

配套资源

让自己的小程序鹤立鸡群—【浅入深出系列005】配套资源
PNG资源
http://3png.com/a-13434696.html

相关文章:

小程序之移花宫-自定义底部标签图标---【浅入深出系列005】

浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 不会导入/打开小程序的看这里 让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 文章目录 本系列校训学习资源的选择 学习目标图标的注意事项图标资源打开小程序动手实践找到图标最…...

题目1 SQL注入(保姆级教程)

url:http://192.168.154.253:81/ #打开http://XXX:81/,XXX为靶机的ip地址 审题 1、打开题目看到有一个提示,此题目需要通过SQL注入漏洞读取/tmp/360/key文件,key在这个文件中 2、开始答题 发现这里url中有一个id的参数&#xff0…...

PDF转换成word乱码了怎么办?最实用的方法在这里!

在日常办公中,我们常常需要将PDF文件转换成Word文件,以便于编辑和修改。然而有时候在PDF转Word的过程中可能会遇到乱码的问题,让人感到困扰。在面对这种情况时,我们需要选择正确的方法,避免文件转换后出现乱码。下面我…...

字节跳动后端面试,笔试部分

var code "7022f444-ded0-477c-9afe-26812ca8e7cb" 背景 笔者在刷B站的时候,看到了一个关于面试的实录,前半段是八股文,后半段是笔试部分,感觉笔试部分的题目还是挺有意思的,特此记录一下。 笔试部分 问…...

[JavaScript游戏开发] 2D二维地图绘制、人物移动、障碍检测

系列文章目录 第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 文章目录 系列文章目录前言一、列计划1.1、目标1.2、步骤 二、使用步骤2.1、准备素材(图片):草坪、人物(熊猫)、障碍(石头)2.2、初…...

区间预测 | MATLAB实现基于QRF随机森林分位数回归时间序列区间预测模型

区间预测 | MATLAB实现基于QRF随机森林分位数回归时间序列区间预测模型 目录 区间预测 | MATLAB实现基于QRF随机森林分位数回归时间序列区间预测模型效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于QRF随机森林分位数回归时间序列区间预测模型&#xff1…...

.NET网络编程——TCP通信

一、网络编程的基本概念 : 1. 网络 就是将不同区域的电脑连接到一起,组成局域网、城域网或广域网。把分部在不同地理区域的计算机于专门的外部设备用通信线路 互联成一个规模大、功能强的网络系统,从而使众多的计算机可以方便地互相传递信息&#xff0c…...

【Python机器学习】实验01 Numpy以及可视化回顾

文章目录 一、Numpy的基础知识实验1 生成由随机数组成的三通道图片,分别显示每个维度图片,并将三个通道的像素四周进行填充,分别从上下左右各填充若干数据。 二、Numpy的线性代数运算实验2 请准备一张图片,按照上面的过程进行矩阵…...

vue3-组件中的变化

1. 路由 1. 安装指令:npm i vue-routernext 2. 创建路由:createRouter2. 异步组件(defineAsyncComponent) defineAsyncComponent 是用于定义异步组件的函数。defineAsyncComponent 接受一个工厂函数作为参数,这个工厂…...

认识主被动无人机遥感数据、预处理无人机遥感数据、定量估算农林植被关键性状、期刊论文插图精细制作与Appdesigner应用开发

目录 第一章、认识主被动无人机遥感数据 第二章、预处理无人机遥感数据 第三章、定量估算农林植被关键性状 第四章、期刊论文插图精细制作与Appdesigner应用开发 更多推荐 遥感技术作为一种空间大数据手段,能够从多时、多维、多地等角度,获取大量的…...

数学建模的六个步骤

一、模型准备 了解问题的实际背景,明确其实际意义,掌握对象的各种信息,以数学思路来解释问题的精髓,数学思路贯彻问题的全过程,进而用数学语言来描述问题。要求符合数学理论,符合数学习惯,清晰…...

【计算机组成原理】24王道考研笔记——第二章 数据的表示和运算

第二章 数据的表示和运算 一、数值与编码 1.1 进制转换 任意进制->十进制&#xff1a; 二进制<->八进制、十六进制&#xff1a; 各种进制的常见书写方式&#xff1a; 十进制->任意进制&#xff1a;&#xff08;用拼凑法最快&#xff09; 真值&#xff1a;符合人…...

JQ-6 Bootstrap入门到实战;Bootstrap的(优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件);小项目实践

目录 1_认识Bootstrap1.1_概念1.2_起源和历史1.3_Bootstrap优缺点 2_Bootstrap4的安装2.1_方式一 CDN2.2_方式二 : 下载源码引入2.3_方式三 : npm安装 3_Bootstrap初体验4_响应式容器原理4.1_屏幕尺寸的分割点&#xff08;Breakpoints&#xff09;4.2_响应式容器Containers 5_网…...

如何用3D格式转换工具HOOPS Exchange读取颜色和材料信息?

作为应用程序开发人员&#xff0c;非常希望导入部件的图形表示与它们在创作软件中的外观尽可能接近。外观可以在每个B-Rep面的基础上指定&#xff0c;而且&#xff0c;通过装配层次结构的特定路径可以在视觉外观上赋予父/子覆盖。HOOPS ExchangeHOOPS Exchange可捕获有关来自各…...

[Ubuntu 22.04] 安装docker,并设置镜像加速

for pkg in docker.io docker-doc docker-compose podman-docker containerd runc; do sudo apt-get remove $pkg; doneapt install -y curl vim wget gnupg dpkg apt-transport-https lsb-release ca-certificates# 添加Docker的GPG公钥和apt源 #curl -sSL https://download.d…...

如何使用GPT作为SQL查询引擎的自然语言

​生成的AI输出并不总是可靠的&#xff0c;但是下面我会讲述如何改进你的代码和查询的方法&#xff0c;以及防止发送敏感数据的方法。与大多数生成式AI一样&#xff0c;OpenAI的API的结果仍然不完美&#xff0c;这意味着我们不能完全信任它们。幸运的是&#xff0c;现在我们可以…...

Servlet3.0上传文件

页面&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>文件上传</title> </head> <body> <form action"fileup" enctype"multipart/form-data" method"…...

【ARM Cache 系列文章 6 番外篇 – MMU, MPU, SMMU, PMU 差异与关系】

文章目录 MMU 与 MPU 之间的关系MMU 与 SMMU 之间的关系MMU 与 PMU 之间的关系 上篇文章&#xff1a;ARM Cache 系列文章 5 – 内存屏障ISB/DSB/DMB MMU 与 MPU 之间的关系 MMU&#xff08;Memory Management Unit&#xff09;和MPU&#xff08;Memory Protection Unit&#…...

NetSuite ERP顾问的进阶之路

目录 1.修养篇 1.1“道”是什么&#xff1f;“器”是什么&#xff1f; 1.2 读书这件事儿 1.3 十年计划的力量 1.3.1 一日三省 1.3.2 顾问损益表 1.3.3 阶段课题 2.行为篇 2.1协作 2.2交流 2.3文档管理 2.4时间管理 3.成长篇 3.1概念能力 3.1.1顾问的知识结构 …...

js 新浏览器打开页面

博主gzh&#xff1a;“程序员野区”&#xff0c;回复“加群”,可进博主web前端微信群 效果如下 setTimeout(()>{var url "https://blog.csdn.net/xuelang532777032?typeblog"; //要打开的网页地址var features "height500, width800, top100, left100, …...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...