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

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

news 2025/8/18 16:56:58

浅入深出系列总目录在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

这灰度，简直就是完美。
另存为，替换之！