微信小程序开发之标签栏图标和颜色的实现

前期准备：注册，填材料，验证等等：https://mp.weixin.qq.com

1.浏览一遍简易教程，下载相应的开发工具

写一个小例子

点击左侧的"编辑"-》点击右侧代码里的app.json修改为

{ ' pages ' :[' pages/fighting/home '，' pages/publish/home '，' pages/mine/home' ]，' tabBar ' : { ' list ' :[{ ' page path ' : ' pages/fighting/home '，' text': '挑战}，{ ' page path ' : ' page/publish/home '，' text': '发布}，{ '页面路径' : '页面/我的/主页'，'文本' : '我} ] }，' window ' : { ' backgroundTextStyle ' : ' light '，' navigationBarBackgroundColor ' : ' # fff '，' navigationBarTitleText': 'i挑战，' navigationBarTextStyle ' : ' black ' } }说明

页就是我们有多少个页面标签栏是页面底部的选项卡窗口是页面的一些属性

这个样子太丑了我们先来美化一下这个标签

{ 'pages':[ 'pages/home/home '，' pages/warning/home '，' pages/mine/home' ]，' tabBar ' : { ' color ' : ' # 666666 '，' selectedColor':'#f10b2e '，' list ' :[{ ' pagePath ' : ' pages/home '，' text ' : '大厅，' iconPath':/res/icon_tab_home.png '，' selectedIconPath ' : ' ./res/icon_tab_home_hl.png' }，{ '页面路径' : '页面/战斗/主页'，'文本' : '挑战，' iconPath':/res/icon_tab_fighting.png '，' selectedIconPath ' : ' ./RES/icon _ tab _ fighting _ HL。png ' }，{ '页面路径' : ' pages/mine/home '，' text': '我，' iconPath':/res/icon_tab_me.png '，' selectedIconPath ' : ' ./res/icon_tab_me_hl.png' } ] }，' window ' : { ' backgroundTextStyle ' : ' light '，' navigationbarckgroundcolor ' : ' # fff '，' navigationBarTitleText': 'i挑战，' navigationBarTextStyle ' : ' black ' } }说明

字段都比较简单就不详细说了其中“图标路径”:/res/icon_tab_me.png "是图片的路径

自己在项目里创建一个表示留数文件夹，然后放入需要的图片

标签好看一点了吧

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。