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

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



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



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

（2）配置app.json文件如下：（

a

pp.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