uni-app uniapp微信小程序-底部tabBar颜色显示问题

在 HbuilderX上开发的时候，页面运行在 H5 端的底部 tabBar 显示都没问题，但在运行到微信开发者工具时出现底部 tabBar 实际文字颜色与 H5 效果不同的问题。

检查 page.json 文件。

"tabBar": {

"borderStyle": "white",

"backgroundColor": "#ffffff",

"color": "rgba(153, 153, 153, 1)",// 灰色

"selectedColor": "rgba(217, 37, 64, 1)",// 红色

"list": [

...

]

},

检查发现自己确实配置了颜色，但是微信开发者工具里就是无法正确显示，真机测试也无法正确显示颜色。

于是又仔细去看 uniapp 官方文档 page.json页面路由-tabBar

发现官方文档内规定了这三个颜色的类型必须是 Hex 格式的，而我的 page.json 内配置的颜色是 rgba 类型的。虽然在 H5 不影响显示，但是在微信小程序内就是无法正常显示。

将 page.json 内 tabBar 颜色格式修改后，微信小程序内显示正常。

"tabBar": {

"borderStyle": "white",

"backgroundColor": "#ffffff",

"color": "#999999",

"selectedColor": "#D92540",

"list": [

...

]

},

好文推荐