原生底部tabbar设置
<h2>1 app.json全局配置文件设置tabbar</h2>
<p>要修改原生底部tabbar显示的页面及字体颜色，图标颜色，需要小程序全局配置文件进行修改，该文件为根目录下的json格式文件</p>
<p><code>app.json</code></p>
<p>下面是微信小程序的底部tabbar配置示例，其他小程序配置基本类似：</p>
<pre><code class="language-json"> "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": "我的"
}
]
},</code></pre>
<p>更详细配置说明，参考官方文档</p>
<p><a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar" title="微信小程序tabbar配置说明">微信小程序tabbar配置说明</a>
<a href="https://smartprogram.baidu.com/docs/develop/tutorial/process/#tabBar" title="百度小程序tabbar配置说明">百度小程序tabbar配置说明</a>
<a href="https://developer.toutiao.com/dev/cn/mini-app/develop/framework/basic-reference/general-configuration#tabbar" title="头条系小程序tabbar配置说明">头条系小程序tabbar配置说明</a>
<a href="https://q.qq.com/wiki/develop/miniprogram/frame/dispose.html#tabbar" title="QQ小程序tabbar配置说明">QQ小程序tabbar配置说明</a>
<a href="https://opendocs.alipay.com/mini/framework/app-json#tabbar" title="支付宝小程序tabbar配置说明">支付宝小程序tabbar配置说明</a></p>
<h2>2 修改原生tabbar图标及颜色</h2>
<p>小程序原生底部tabbar图标文件在小程序的前端代码包里，路径为</p>
<p><code>/static</code></p>
<p>文件夹里以tab开头的png格式图片文件，以首页图标为例</p>
<p><code>/static/tab-home.png</code> 为首页为默认情况未选中时显示的图标
<code>/static/tab-home-on.png</code> 为首页选中时显示的图标</p>
<p><strong>图标文件获取</strong>
在下载的wordpress插件zip包（wp-app.zip）解压后，app-icon文件夹下已提供部分常用图标文件，可自行修改颜色后使用或直接使用，也可访问 <a href="https://www.iconfont.cn/">https://www.iconfont.cn/</a> 自己查找下载需要的图标文件进行替换。</p>
<p><strong>图标文件颜色修改</strong>
因小程序原生底部tabbar图标的选中颜色无法通过代码自定义，使用的是图片本身的颜色，若要修改图标的颜色，需要借助PS(PhotoShop)进行修改后替换，使用PS修改图标颜色过程也非常简单容易，下面以PhotoShop CC为例：</p>
<p>tab-home-on.png 默认颜色为蓝色，假设需要将该图标颜色修改为红色(#FF5777)，按如下步骤：</p>
<p>1) PhotoShop 打开 tab-home-on.png 文件，选择 图层菜单 -> 图层样式 -> 颜色叠加</p>
<p><img src="https://wpapp-cdn.wp-autoblog.net/manual/36.png" alt="" /></p>
<p>2）在打开的 “颜色叠加对话框” 中，混合模式 “正常”，点击 “拾色器” 设置需要的颜色后保存文件，替换相关文件即可完成图标文件的颜色修改</p>
<p><img src="https://wpapp-cdn.wp-autoblog.net/manual/37.png" alt="" /></p>