页面配置

稍微了解小程序开发的童鞋应该知道，小程序的每个页面一般会对应三个文件:xxx.wxml、 xxx.wxss和xxx.js，并且每添加一个页面都需要在app.json的"pages"字段中“注册”，比如我们添加每日优鲜小程序的首页，如下所示：

app.json
// 添加首页
{
  "pages":[
    "pages/index/index" // 路径+文件名
  ]
}

一般小程序页面都会包括navigationBar和tabBar两部分，前者一般位于顶部，用来告诉用户当前所处页面以及返回上一个页面，后者一般位于底部，用来快速切换页面。如下图每日优鲜的首页所示：

每日优鲜首页

这两项的设置是在app.json中全局设置的，具体如下：

app.json
{
  "pages":[
    "pages/index/index" // 路径+文件名
  ],
  "window":{
    "navigationBarBackgroundColor": "#ffffff", // navigationBar背景颜色
    "navigationBarTextStyle": "black", // navigationBar标题颜色，仅支持black/white
    "navigationBarTitleText": "每日优鲜" // navigationBar标题文字内容
  },
  "tabBar": {
    "color": "#a9b7b7", // tab上的文字默认颜色
    "selectedColor": "#0066ff", // tab上的文字选中时的颜色
    "borderStyle": "white", // tabBar上边框的颜色， 仅支持 black / white
    "list": [
      {
        "selectedIconPath": "imgs/index.png", // 选中时的图标路径
        "iconPath": "imgs/index1.png", // 图标路径
        "pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
        "text": "首页" // tab 上按钮文字
      },
      {
        "selectedIconPath": "imgs/vip.png",
        "iconPath": "imgs/vip1.png",
        "pagePath": "pages/vip/vip",
        "text": "会员+"
      },
      {
        "selectedIconPath": "imgs/cart.png",
        "iconPath": "imgs/cart1.png",
        "pagePath": "pages/cart/cart",
        "text": "购物车"
      },
      {
        "selectedIconPath": "imgs/mine.png",
        "iconPath": "imgs/mine1.png",
        "pagePath": "pages/mine/mine",
        "text": "我的"
      }
    ],  // tab 的列表
    "position": "bottom" //tabBar的位置，仅支持 bottom / top
  }
}

此外，不知道大家有没有注意到第三个tab右上角的5红点，这个该怎么设置呢？可以看到app.json中tabBar的list属性并没有设置红点的属性。这个属性其实需要调用微信小程序的API——wx.setTabBarBadge，如下所示：

wx.setTabBarBadge({
  index: 2,
  text: '5'
})

在页面初次渲染的时候，获取购物车中的数目，然后便可以动态设置红点中的数字。