十年河東，十年河西，莫欺少年窮

學無止境，精益求精

微信小程式配置檔案分為兩種，全域性配置檔案和頁面配置檔案。

1、全域性配置檔案，app.json，詳細參考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

本文主要闡述全域性配置檔案的 pages、window、tabBar 配置項

pages

用於指定小程式由哪些頁面組成，每一項都對應一個頁面的 路徑（含檔名） 資訊。檔名不需要寫檔案字尾，框架會自動去尋找對應位置的.json,.js,.wxml,.wxss四個檔案進行處理。

在微信開發工具中有個小竅門可以快速生成頁面，如下：

在app.json中輸入要新建的頁面路徑，比如：

  "pages/GroupUser/GroupUser"

然後點選 Ctrl+S 微信開發工具就會為開發者生產相關的頁面，如下：

app.json 中最上面的一個頁面路徑為小程式的預設入口頁面。

2、window 配置項

用於設定小程式的狀態列、導航條、標題、視窗背景色。

window 配置項常用屬性如下：

"navigationBarBackgroundColor": "#ccf"

"navigationBarTextStyle":"white",

設定導航欄標題顏色，僅支援black/white

"
 
navigationBarTitleText": "陳三毛的小程式",

設定導航欄的標題

"enablePullDownRefresh":true,

用於設定下拉重新整理

  "backgroundTextStyle":"dark"

用於設定下拉重新整理的樣式

"backgroundColor": "#ccc",

3、tabBar 配置項

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

tabBar 配置項用於在小程式底部導航選單的生成

  "
 
tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "陳大六",
      "iconPath": "/tabBarImg/personal.png",
      "selectedIconPath": "/tabBarImg/personal-active.png"
    },
    {
      "pagePath": "pages/demo/demo",
      "text": "陳小六",
      "iconPath": "/tabBarImg/store.png",
      "selectedIconPath": "/tabBarImg/store-active.png"
    }
  ]
  },

效果如下：

上述配置中：其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。

全域性配置項中還有：

networkTimeout

各類網路請求的超時時間，單位均為毫秒。

debug

可以在開發者工具中開啟debug模式，在開發者工具的控制檯面板，除錯資訊以info的形式給出，其資訊有 Page 的註冊，頁面路由，資料更新，事件觸發等。可以幫助開發者快速定位一些常見的問題

functionalPages

外掛所有者小程式需要設定這一項來啟用外掛功能頁。

subpackages

啟用分包載入時，宣告專案分包結構。

寫成 subPackages 也支援。

workers

基礎庫 1.9.90 開始支援，低版本需做相容處理。

使用Worker處理多執行緒任務時，設定Worker程式碼放置的目錄

resizable

在 iPad 上執行的小程式可以設定支援螢幕旋轉。

在 PC 上執行的小程式，使用者可以按照任意比例拖動視窗大小，也可以在小程式選單中最大化視窗

PermissionObject 結構

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置資訊將用於小程式位置介面的效果展示" // 高速公路行駛持續後臺定位
    }
  }
}

style

基礎庫 2.8.0 開始支援，低版本需做相容處理。

微信客戶端 7.0 開始，UI 介面進行了大改版。小程式也進行了基礎元件的樣式升級。app.json 中配置"style": "v2"可表明啟用新版的元件樣式。

本次改動涉及的元件有button icon radio checkbox switch slider。可前往小程式示例進行體驗

useExtendedLib

基礎庫 2.2.1 開始支援，低版本需做相容處理。

最新的 nightly 版開發者工具開始支援，同時基礎庫從支援 npm 的版本（2.2.1）起支援

指定需要引用的擴充套件庫。目前支援以下專案：

• kbone:多端開發框架
• weui:WeUI 元件庫

指定後，相當於引入了對應擴充套件庫相關的最新版本的 npm 包，同時也不佔用小程式的包體積。rc工具版本支援分包引用。用法如下：

{
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}

embeddedAppIdList

指定小程式可通過wx.openEmbeddedMiniProgram開啟的小程式名單

{
  "embeddedAppIdList": ["wxe5f52902cf4de896"]
}

lazyCodeLoading

目前僅支援值requiredComponents，代表開啟小程式「按需注入」特性。

更多配置，詳細參考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

@天才臥龍的部落格