开发微信小程序（3）-全局配置app.json及底部导航栏实现

要实现如下图在底部导航栏，两步：

（1）准备好导航栏的图片，存放在单独的文件夹中，如果希望选中的图标和未选中图标有区别，需各准备一张图片，如：

注：微信小程序开发工具不提供直接建文件夹的功能，images文件夹需手动创建在当前项目下。

（2）配置app.json文件如下：（app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。）

 "tabBar":{
    "color":"#fff",
    "backgroundColor": "#670202",
    "list":[
      {"pagePath":"pages/index/index",
       "iconPath":"Images/home.png",
       "selectedIconPath":"Images/selecthome.png",
       "text":"首页"
       },
        {
          "pagePath": "pages/index/index",
          "iconPath": "Images/category.png",
          "selectedIconPath": "Images/selectcategory.png",
          "text": "分类"
        },
        {
          "pagePath": "pages/index/index",
          "iconPath": "Images/cart.png",
          "selectedIconPath": "Images/selectcart.png",
          "text": "购物车"
        },
        {
          "pagePath": "pages/newpage/newpage",     //点击图标时转向的页面
          "iconPath": "Images/info.png",                         //未选中时的图标
          "selectedIconPath": "Images/selectinfo.png",     //选中时的图标
          "text": "个人信息"                                     //底部导航的文字
        }
    ]
  }

做完以上两步即可完成图1所示的功能。要了解app.json的其他配置，参考

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html