微信小程序-底部导航栏

注册一个小程序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"
]

文件目录如下：