微信小程序-底部导航栏

注册一个小程序appId，新建自己的项目，了解小程序的框架结构。

制作底部导航栏时，添加导航按钮关联页面，注意配置在app.json配置page时，要把第一个导航按钮页面放在第一个位，不然其他页面会覆盖。

在app.json中添加list数组，每个数组是一个导航按钮。

app.json

"tabBar" : {

"selectedColor" : "#1296db" ,

"list" : [

{

"pagePath" : "pages/test1/index" ,

"text" : "首页" ,

"iconPath" : "images/fuli_no.png" ,

"selectedIconPath" : "images/fuli_yes.png"

},

{

"pagePath" : "pages/test2/index" ,

"text" : "设置" ,

"iconPath" : "images/index_no.png" ,

"selectedIconPath" : "images/index_yes.png"

},

{

"pagePath" : "pages/test3/index" ,

"text" : "帮助" ,

"iconPath" : "images/person_no.png" ,

"selectedIconPath" : "images/person_yes.png"

}

]

}

"pages" :[

"pages/test1/index" ,

"pages/index/index" ,

"pages/logs/logs" ,

"pages/test2/index" ,

"pages/test3/index"

]