微信小程序（－） TabBar

微信小程序一出来就引起了一片热议，我也终于不懒了，想着还是看看吧，结果发现与我之前学的 react 神似。
基础知识什么的就不再阐述了，其地址如下：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html
下面就是我做的第一个功能：底部导航切换栏，tabBar：

图片.png

项目结构：

1CEDF521-75F9-4EE9-9AFF-F81CCA82DDE2.png

tabBar的配置主要在 app.json 下面：

{
  "pages":[
    "pages/home/home",
    "pages/category/category",
    "pages/cart/cart",
    "pages/mine/mine",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar": {
    "color": "#464a56",
    "selectedColor": "#6595e9",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/ic_nav_main_home.png",
      "selectedIconPath": "images/ic_nav_main_home_press.png"
    },{
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "images/ic_nav_main_category.png",
      "selectedIconPath": "images/ic_nav_main_category_press.png"
    },{
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "images/ic_nav_main_cart.png",
      "selectedIconPath": "images/ic_nav_main_cart_press.png"
    },{
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "images/ic_nav_main_mine.png",
      "selectedIconPath": "images/ic_nav_main_mine_press.png"
    }]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#6595e9",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#eeeeee"
  }
}

这里需要注意的是，pages 中接受的是一个数组，小程序的页面就放在这个里面。
但是尤其要注意的是，数组中的第一个页面就是小程序的初始页面，所以这里我们就要将 home 页面放在第一位，这样小程序启动起来才能看到我们的TabBar。
小程序新增或者减少页面的时候都需要对 pages 进行修改。
在做TabBar的时候，为了表示每个页面，我们可以给每个页面一个标题栏，navigationBarTitleText。

图片.png

标题栏是首页、分类、购物车以及个人中心都需要的，所以我们可以在 app.json 下面配置之后，再在各个页面直接用。
app.json 是全局配置，而各个页面也可以对自己的页面进行配置，即首页就可以在 home.json 下面进行配置，不过它不需要将配置写在window中：
app.json（全局）:

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#6595e9",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#eeeeee"
  }

home.json ：

{
    "navigationBarTitleText": "首页"
}

这么简单的配置后，就可以实现TabBar了。