微信小程序tabBar使用一（基础使用）

1.在pages中新建两个文件personal和shopping

2.在app.json的pages中添加

"pages/personal/personal",
"pages/shopping/shopping"

3.在app.json中添加

  "tabBar": {
    "color": "#000000",
    "selectedColor": "#f00",
    "backgroundColor": "#ccc",
    "list": [{
      "pagePath": "pages/personal/personal", // 路径
      "text": "个人中心",
      "iconPath": "/assets/platform.png", //点击前图片路径
      "selectedIconPath": "/assets/platformSelected.png" //点击后图片路径
    }, {
      "pagePath": "pages/shopping/shopping", // 路径
      "text": "接口",
      "iconPath": "/assets/shop.png", //点击前图片路径
      "selectedIconPath": "/assets/shopSelected.png" //点击后图片路径
    }]
  },
  "usingComponents":{}

4.app.json的全部代码

{
  "pages":[
    "pages/personal/personal",
    "pages/shopping/shopping"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "useExtendedLib": {
    "weui": true
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#f00",
    "backgroundColor": "#ccc",
    "list": [{
      "pagePath": "pages/personal/personal",
      "text": "个人中心",
      "iconPath": "/assets/platform.png",
      "selectedIconPath": "/assets/platformSelected.png"
    }, {
      "pagePath": "pages/shopping/shopping",
      "text": "接口",
      "iconPath": "/assets/shop.png",
      "selectedIconPath": "/assets/shopSelected.png"
    }]
  },
  "usingComponents":{}
}

5.结果如下图