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配置说明
百度小程序tabbar配置说明
头条系小程序tabbar配置说明
QQ小程序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）在打开的 “颜色叠加对话框” 中，混合模式 “正常”，点击 “拾色器” 设置需要的颜色后保存文件，替换相关文件即可完成图标文件的颜色修改
