原生底部tabbar设置
1 app.json全局配置文件设置tabbar
要修改原生底部tabbar显示的页面及字体颜色,图标颜色,需要小程序全局配置文件进行修改,该文件为根目录下的json格式文件
app.json
下面是微信小程序的底部tabbar配置示例,其他小程序配置基本类似:
"tabBar": {
"color": "#9F9F9F", // tabbar上的文字默认颜色,仅支持十六进制颜色
"selectedColor": "#00b3db", // tabbar上的文字选中时的颜色,仅支持十六进制颜色
"borderStyle": "black", // tabbar上边框的颜色, 仅支持 black/white
"backgroundColor": "#ffffff", // tabbar的背景色,仅支持十六进制颜色
"list": [ // tabbar的列表,最少2个、最多5个tab
{
"pagePath": "pages/index/index", // 页面路径
"iconPath": "static/tab-home.png", // 图片路径,建议尺寸为81px*81px
"selectedIconPath": "static/tab-home-on.png", // 选中时的图片路径
"text": "主页" // tabbar上按钮文字
},
{
"pagePath": "pages/cat/cat",
"iconPath": "static/tab-cat.png",
"selectedIconPath": "static/tab-cat-on.png",
"text": "分类"
},
{
"pagePath": "pages/term/term",
"iconPath": "static/tab-topic.png",
"selectedIconPath": "static/tab-topic-on.png",
"text": "专题"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/tab-my.png",
"selectedIconPath": "static/tab-my-on.png",
"text": "我的"
}
]
},
更详细配置说明,参考官方文档
[微信小程序tabbar配置说明](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar "微信小程序tabbar配置说明") [百度小程序tabbar配置说明](https://smartprogram.baidu.com/docs/develop/tutorial/process/#tabBar "百度小程序tabbar配置说明") [头条系小程序tabbar配置说明](https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/general-configuration#tabbar "头条系小程序tabbar配置说明") [QQ小程序tabbar配置说明](https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html#tabbar "QQ小程序tabbar配置说明") [支付宝小程序tabbar配置说明](https://opendocs.alipay.com/mini/framework/app-json#tabbar "支付宝小程序tabbar配置说明")
2 修改原生tabbar图标及颜色
小程序原生底部tabbar图标文件在小程序的前端代码包里,路径为
/static
文件夹里以tab开头的png格式图片文件,以首页图标为例
/static/tab-home.png
为首页为默认情况未选中时显示的图标
/static/tab-home-on.png
为首页选中时显示的图标
图标文件获取 在下载的wordpress插件zip包(wp-app.zip)解压后,app-icon文件夹下已提供部分常用图标文件,可自行修改颜色后使用或直接使用,也可访问 https://www.iconfont.cn/ 自己查找下载需要的图标文件进行替换。
图标文件颜色修改 因小程序原生底部tabbar图标的选中颜色无法通过代码自定义,使用的是图片本身的颜色,若要修改图标的颜色,需要借助PS(PhotoShop)进行修改后替换,使用PS修改图标颜色过程也非常简单容易,下面以PhotoShop CC为例:
tab-home-on.png 默认颜色为蓝色,假设需要将该图标颜色修改为红色(#FF5777),按如下步骤:
1) PhotoShop 打开 tab-home-on.png 文件,选择 图层菜单 -> 图层样式 -> 颜色叠加
2)在打开的 “颜色叠加对话框” 中,混合模式 “正常”,点击 “拾色器” 设置需要的颜色后保存文件,替换相关文件即可完成图标文件的颜色修改