1. 程式人生 > >微信小程式開發——全域性配置詳細介紹

微信小程式開發——全域性配置詳細介紹

本文針對官方文件未說明清楚的進行詳細探索研究,官方文件詳見:全域性配置 。

pages:

刪除頁面,需要先刪除app.json中pages對應頁面的路徑,再去刪除頁面相關的所有檔案,不然會出現頁面檔案混亂。

window:

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

 

屬性 描述 表現
navigationBarBackgroundColor 導航欄背景顏色,如 #000000

navigationBarTextStyle 導航欄標題顏色,僅支援 black
 / white

navigationBarTitleText 導航欄標題文字內容(會被頁面設定覆蓋)

navigationStyle 導航欄樣式,僅支援以下值:
default 預設樣式
custom 自定義導航欄,只保留右上角膠囊按鈕

backgroundColor

視窗的背景色(螢幕下拉後展示的背景色):

1.ios可以上拉,上拉背景色如果沒有單獨設定,則顯示backgroundColor

2.如果設定有backgroundColorTop和backgroundColorBottom,則會覆蓋backgroundColor

 
backgroundTextStyle 下拉 loading 的樣式,僅支援 dark / light

backgroundColorTop 螢幕下拉露出頂部視窗的背景色,僅 iOS 支援(覆蓋backgroundColor) 同backgroundColor
backgroundColorBottom 螢幕上滑露出底部視窗的背景色,僅 iOS 支援(覆蓋backgroundColor)
enablePullDownRefresh(android) 是否開啟當前頁面的下拉重新整理。(只對android有效)
詳見  Page.onPullDownRefresh
 
onReachBottomDistance(ios) 頁面上拉觸底事件觸發時距頁面底部距離,單位為px。(只對ios有效)
詳見  Page.onReachBottom
 
pageOrientation 螢幕旋轉設定,詳見  響應顯示區域變化,預設“portrait”,設定為“auto”則為跟隨系統旋轉 微信版本 6.7.3

resizable

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

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

tabBar:

除了tab文字、圖示和背景色等常用的選項可以設定,tab上邊框顏色也可以設定,tab也可以設定顯示在頁面頂端(不顯示圖示):

"tabBar": {
    ...
    "position": "top",
    ...
}

debug:

debug模式是針對開發者工具的,開啟之後再開發者工具的控制檯面板輸出Page的註冊,頁面路由,資料更新,事件觸發等之類的除錯資訊:

這些除錯資訊可以幫助開發者快速定位一些常見的問題,雖然這些資訊對於初學者來說還有點幫助,但對於有一定基礎的開發者來說,就顯得有點影響正常的除錯了——你所有的自定義控制檯輸出的除錯資訊都會被大量的debug資訊包圍著,那麼最好還是關閉這個模式的好,這樣就清爽多了,也方便我們自己除錯:

總結:

debug模式只在開發者工具中有效,預設關閉,即不設定,如需開啟,需設定為true。

requiredBackgroundModes:

申請開啟後臺執行的能力,型別為陣列。如支援音樂後臺播放。

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

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

其他一些不常用的配置項:

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

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

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

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

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

preloadRule——宣告分包預下載的規則。

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