微信小程序开发，实现底部导航栏

1. 官方文档指南

1. 全局配置说明： https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

2. TabBar底部导航栏： https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar

1. 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

配置项

属性	类型	必填	描述	最低版本
entryPagePath	string	否	小程序默认启动首页	-
pages	string[]	是	页面路径列表	-
window	Object	否	全局的默认窗口表现	-
tabBar	Object	否	底部 tab 栏的表现	-
networkTimeout	Object	否	网络超时时间	-
debug	boolean	否	是否开启 debug 模式，默认关闭	-
functionalPages	boolean	否	是否启用插件功能页，默认关闭	2.1.0
subpackages	Object[]	否	分包结构配置	1.7.3
workers	string	否	Worker 代码放置的目录	1.9.90
requiredBackgroundModes	string[]	否	需要在后台使用的功能，如「音乐播放」	-
requiredPrivateInfos	string[]	否	调用的地理位置相关隐私接口	-
plugins	Object	否	使用到的插件	1.9.6

更多详情，请阅读官方文档指南

2. tabBar定义

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是	-	tab上的文字默认颜色，仅支持十六进制颜色	-
selectedColor	HexColor	是	-	tab上的文字选中时的颜色，仅支持十六进制颜色	-
backgroundColor	HexColor	是	-	tab的背景色，仅支持十六进制颜色	-
borderStyle	string	否	black	tabBar上边框的颜色，仅支持black / white	-
list	Array	是	-	tab列表，详见list属性说明，最少2个、最多5个tab	-
position	string	否	bottom	tabBar的位置，仅支持bottom / top	-
custom	boolean	否	false	自定义tabBar，见详情	2.5.0

温馨提示：
tabBar的配置在小程序根目录下的 app.json

3. 代码实现过程

"tabBar":{
    
    
     "color":"#8a8a8a",
     "selectedColor": "#f3514f",
     "list": [
       {
    
    
         "pagePath": "pages/home/home",
         "text":"首页",
         "iconPath":"/assets/img-home-normal.png",
         "selectedIconPath":"/assets/img-home-selected.png"
       },
       {
    
    
        "pagePath": "pages/cate/cate",
        "text":"分类",
        "iconPath":"/assets/img-cate-normal.png",
        "selectedIconPath":"/assets/img-cart-selected.png"
      },
      {
    
    
        "pagePath": "pages/cart/cart",
        "text":"购物车",
        "iconPath":"/assets/img_cart-normal.png",
        "selectedIconPath":"/assets/img-cart-selected.png"
      },
      {
    
    
        "pagePath": "pages/mine/mine",
        "text":"我的",
        "iconPath":"/assets/img-mine-normal.png",
        "selectedIconPath":"/assets/img-mine-selected.png"
      }
     ]
  },

4. 运行效果