微信小程序------加導航

效果圖以下

這個其實很簡單

在app.json上面加點代碼

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#OOOOOO",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
     "color": "#ddd",
    "selectedColor": "#1296db",
    "borderStyle": "white",
    "backgroundColor": "#f2f2f2",
    "list": [{
       "pagePath": "pages/index/index",
       "text": "首頁",
      "iconPath": "pages/images/index.png",
      "selectedIconPath": "pages/images/index.png"
     },{
       "pagePath": "pages/index/two",
       "text": "商品",
       "iconPath": "pages/images/c.png",
       "selectedIconPath": "pages/images/c.png"
     },{
       "pagePath":  "pages/index/three",
       "text": "購物車",
       "iconPath": "pages/images/buy.png",
       "selectedIconPath": "pages/images/buy.png"
     },{
       "pagePath": "pages/user/user",
       "text": "我",
       "iconPath": "pages/images/o.png",
       "selectedIconPath": "pages/images/o.png"
     }
     ]
   }

　　單擊下面圖標就會有以下顯示

over！！！