原生底部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）在打开的 “颜色叠加对话框” 中，混合模式 “正常”，点击 “拾色器” 设置需要的颜色后保存文件，替换相关文件即可完成图标文件的颜色修改