1. 程式人生 > >小程式app.json檔案

小程式app.json檔案

全域性配置

小程式根目錄下的 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,
  "navigateToMiniProgramAppIdList": [
    "wxe5f52902cf4de896"
  ]
}

app.json 配置項列表

屬性 型別 必填 描述 支援版本
pages String Array 頁面路徑列表  
window Object 全域性的預設視窗表現  
tabBar Object 底部 tab 欄的表現  
networkTimeout
Object 網路超時時間  
debug Boolean 是否開啟 debug 模式,預設關閉  
functionalPages Boolean 是否啟用外掛功能頁,預設關閉 2.1.0
subpackages Object Array 分包結構配置 1.7.3
workers
String Worker 程式碼放置的目錄 1.9.90
requiredBackgroundModes String Array 需要在後臺使用的能力,如「音樂播放」  
plugins Object 使用到的外掛 1.9.6
preloadRule Object 分包預下載規則 2.3.0
resizable Boolean iPad 小程式是否支援螢幕旋轉,預設關閉 2.3.0
navigateToMiniProgramAppIdList String Array 需要跳轉的小程式列表,詳見 wx.navigateToMiniProgram 2.4.0
usingComponents Object 全域性自定義元件配置,開發者工具 1.02.1810190 及以上版本支援此欄位  

pages

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

陣列的第一項代表小程式的初始頁面(首頁)。小程式中新增/減少頁面,都需要對 pages 陣列進行修改。

如開發目錄為:

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

則需要在 app.json 中寫

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

window

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

屬性 型別 預設值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如 #000000  
navigationBarTextStyle String white 導航欄標題顏色,僅支援 black / white  
navigationBarTitleText String   導航欄標題文字內容  
navigationStyle String default 導航欄樣式,僅支援以下值:
default 預設樣式
custom 自定義導航欄,只保留右上角膠囊按鈕
微信版本 6.6.0
backgroundColor HexColor #ffffff 視窗的背景色  
backgroundTextStyle String dark 下拉 loading 的樣式,僅支援 dark / light  
backgroundColorTop String #ffffff 頂部視窗的背景色,僅 iOS 支援 微信版本 6.5.16
backgroundColorBottom String #ffffff 底部視窗的背景色,僅 iOS 支援 微信版本 6.5.16
enablePullDownRefresh Boolean false 是否開啟當前頁面的下拉重新整理。
詳見 Page.onPullDownRefresh
 
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px。
詳見 Page.onReachBottom
 
pageOrientation String portrait 螢幕旋轉設定,詳見 響應顯示區域變化 微信版本 6.7.3

注:HexColor(十六進位制顏色值),如"#ff00ff"

注:navigationStyle 只在 app.json 中生效。開啟 custom 後,低版本客戶端需要做好相容。開發者工具基礎庫版本切到 1.7.0(不代表最低版本,只供除錯用)可方便切到舊視覺

注:客戶端 6.7.2 版本開始,navigationStyle: custom 對 <web-view> 元件無效

如 app.json :

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

tabBar

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

屬性 型別 必填 預設值 描述
color HexColor   tab 上的文字預設顏色
selectedColor HexColor   tab 上的文字選中時的顏色
backgroundColor HexColor   tab 的背景色
borderStyle String black tabbar上邊框的顏色, 僅支援 black / white
list Array   tab 的列表,詳見 list 屬性說明,最少2個、最多5個 tab
position String bottom tabBar的位置,僅支援 bottom / top

其中 list 接受一個數組,只能配置最少2個、最多5個 tab。tab 按陣列的順序排序,每個項都是一個物件,其屬性值如下:

屬性 型別 必填 說明
pagePath String 頁面路徑,必須在 pages 中先定義
text String tab 上按鈕文字
iconPath String 圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,不支援網路圖片。
當 postion 為 top 時,不顯示 icon。
selectedIconPath String 選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,不支援網路圖片。
當 postion 為 top 時,不顯示 icon。

networkTimeout

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

屬性 型別 必填 預設值 說明
request Number 60000 wx.request 的超時時間,單位:毫秒。
connectSocket Number 60000 wx.connectSocket 的超時時間,單位:毫秒。
uploadFile Number 60000 wx.uploadFile 的超時時間,單位:毫秒。
downloadFile Number 60000 wx.downloadFile 的超時時間,單位:毫秒。

debug

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

示例:

"debug":{

"debug": "true"

},

"debug":{

"debug": "false"

},

functionalPages

基礎庫 2.1.0 開始支援,低版本需做相容處理

啟用外掛功能頁時,外掛所有者小程式需要設定其 functionalPages 為 true

subpackages

微信客戶端 6.6.0 ,基礎庫 1.7.3 及以上版本支援

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

寫成 subPackages 也支援。

workers

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

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

requiredBackgroundModes

微信客戶端 6.7.2 及以上版本支援

申明需要後臺執行的能力,型別為陣列。目前支援以下專案:

  • audio: 後臺音樂播放

如:

{
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio"]
}

注:在此處申明瞭後臺執行的介面,開發版和體驗版上可以直接生效,正式版還需通過稽核。

plugins

基礎庫 1.9.6 開始支援,低版本需做相容處理

宣告小程式需要使用的外掛

preloadRule

基礎庫 2.3.0 開始支援,低版本需做相容處理

宣告分包預下載的規則。

resizable

基礎庫 2.3.0 開始支援,低版本需做相容處理

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

基礎庫 2.4.0 開始支援,低版本需做相容處理

當小程式需要使用 wx.navigateToMiniProgram 介面跳轉到其他小程式時,需要先在配置檔案中宣告需要跳轉的小程式 appId 列表,最多允許填寫 10 個。

usingComponents

開發者工具 1.02.1810190 及以上版本支援 usingComponents 欄位,在此處宣告的自定義元件視為全域性自定義元件,在小程式內的頁面或自定義元件中可以直接使用而無需再宣告。

頁面配置

每一個小程式頁面也可以使用.json檔案來對本頁面的視窗表現進行配置。

頁面的配置只能設定 app.json 中部分 window 配置項的內容,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

配置示例

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

頁面配置項列表

屬性 型別 預設值 描述
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如 #000000
navigationBarTextStyle String white 導航欄標題顏色,僅支援 black / white
navigationBarTitleText String   導航欄標題文字內容
backgroundColor HexColor #ffffff 視窗的背景色
backgroundTextStyle String dark 下拉 loading 的樣式,僅支援 dark / light
enablePullDownRefresh Boolean false 是否全域性開啟下拉重新整理。
詳見 Page.onPullDownRefresh
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px。
詳見 Page.onReachBottom
disableScroll Boolean false 設定為 true 則頁面整體不能上下滾動;只在頁面配置中有效,無法在 app.json 中設定該項

頁面的.json只能設定 window 相關的配置項,以決定本頁面的視窗表現,所以無需寫 window 這個鍵。