1. 程式人生 > >小程式入門最簡單教程(三)

小程式入門最簡單教程(三)

這一章就直接看必須使用的配置相關

摘入小程式官方文件

全域性配置

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.json 配置項列表

屬性 型別 必填 描述 支援版本
pages String Array 頁面路徑列表
Object 全域性的預設視窗表現
Object 底部 tab 欄的表現
debug Boolean 是否開啟 debug 模式,預設關閉
Boolean 是否啟用外掛功能頁,預設關閉 2.1.0
Object Array 分包結構配置 1.7.3
String Worker 程式碼放置的目錄
Object 使用到的外掛 1.9.6
Object 分包預下載規則 2.3.0
Boolean iPad 小程式是否支援螢幕旋轉,預設關閉 2.3.0

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
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px。
詳見 Page.onReachBottom

注: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
connectSocket Number 60000
uploadFile Number 60000
downloadFile Number 60000

debug

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

functionalPages

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

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

subPackages

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

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

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 上執行的小程式可以設定支援螢幕旋轉

頁面配置

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

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

頁面配置項列表

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

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