微信小程式的配置

我們使用app.json檔案來對微信小程式進行全域配置，決定頁面檔案的路徑、視窗表現、設定網路逾時時間、設定多 tab 等。
以下是一個包含了所有設定選項的簡單設定app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

配置屬性有：

我們講解了APP的頁面配置，window配置，tabBar配置，網路配置等資訊

pages

接受一個數組，每一項都是字串，來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】訊息，數組的第一項代表小程式的初始頁面。小程式中新增/減少頁面，都需要對 pages 陣列進行修改。

檔案名稱不需要寫檔案後綴，因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個檔案進行整合。

如開發目錄為：

pages/

pages/index/index.wxml

pages/index/index.js

#pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

#app .json

app.wxss

則，我們需要在app.json 中寫

{
  "pages":[
    "pages/index/index"
    "pages/logs/logs"
  ]
}

window

用於設定小程式的狀態列、導航條、標題、視窗背景色。相關屬性如下：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

編譯後的顯示結果如下圖所示：

##tabBar

如果我們的小程式是一個多tab 應用程式（客戶端視窗的底部或頂部有tab 欄可以切換頁面），那麼我們可以透過tabBar 配置項目指定tab 欄的表現，以及tab 切換時顯示的對應頁面。

Tip： 透過頁面跳躍（wx.navigateTo）或頁面重新導向（wx.redirectTo）所到達的頁面，即使它是定義在tabBar 設定中的頁面，也不會顯示底部的tab 欄。

tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 會依數組的順序排序。

更多微信小程式的設定相關文章請關注PHP中文網！