微信小程式開發之——比較數字大小-配置檔案(2.4)

PGzxc發表於2020-10-26
微信小程式

一 概述

小程式的每一個頁面均可以使用json檔案對頁面的效果進行配置。頁面配置分為頁面級和應用級，在本專案中，pages/index/index.json是頁面級配置檔案，而app.json是應用級配置檔案

二 頁面級配置檔案

在頁面級配置檔案中可以更改頁面的導航樣式，控制頁面是否允許上下滾動等。下面通過表2-5列舉常用的頁面級配置

屬性說明
navigationBarBackgroundColor導航欄背景顏色，預設為#000000
navigationBarTextStyle導航欄標題顏色，僅支援black、white(預設)
navigationBarTitleText導航欄的標題文字內容
backgroundColor視窗的背景色，預設為#ffffff
backgroundTextStyle下拉loading的樣式，僅支援dark(預設)、light
enablePullDownRefresh是否全域性開啟下拉重新整理，預設為false
onReachBottomDistance頁面上拉觸底時頁面底部距離(單位為px)，預設為50
disableScrol預設為false。設定為true時，頁面整體不能上下移動

在上表中，若將enablePullDownRefresh設為true，頁面可以下拉重新整理，當下拉重新整理操作執行時，就會觸發下拉重新整理時間onPushDownRefresh，在pages/index/index.js檔案中可以找到該事件的處理函式。

onReachBottomDistance主要用於開發自動載入更多的功能，也就是頁面中的內容非常長的時候，為了加快載入速度，並不是一次性載入所有的資料，而是先載入一部分資料將頁面填滿，直到出現滾動條，頁面可以向上滾動。當使用者上拉時，如果快要到達底部了，就立即載入後面的資料。因此，onReachBottomDistance的值越大，載入的時機越提前。如果達到了給定的值，就會觸發上拉觸底事件onReachBottom，在pages/index/indes.s檔案中可以找到該事件的處理函式。

接下來演示頁面級配置的使用，開啟pages/index/index.json檔案，編寫程式碼如下：

1
2
3
4

{
  "navigationBarTitleText": "數值比較",
  "navigationBarBackgroundColor": "#369"
}

上述程式碼設定了導航欄標題為”數值比較”，顏色為藍色。執行結果為：

三 應用級配置檔案

專案根目錄下app.json就是應用級配置檔案，其常用配置如下表：

屬性說明
pages頁面路徑列表
window全域性的預設視窗表現
tabBar底部tab欄的表現
networkTimeOut網路超時時間
debug是否開啟除錯模式，預設為false
requireBackgroundModes需要在後臺使用的能力，如音樂播放
plugins使用到的外掛

在上述屬性中，pages在前面已經用過；window的值是一個物件，可以將表中的配置寫在window中，作為應用級配置使用，從而一次設定多個頁面，且優先順序低於頁面級配置；tabBar、plugins和requiredBackgroundModes會在後面的章節進行講解；debug開啟後可以在控制檯中輸出除錯資訊，幫助開發者快速定位到一些常見的問題。

networkTimeout可以設定網路請求過程中的超時時間，詳細內容如下表：

屬性型別說明
requestNumberwx.request()的超時時間(ms)，預設為60000
connectSocketNumberwx.connectSocket()的超時時間(ms)，預設為6000
uploadFileNumberwx.uploadFile()的超時時間(ms)，預設為60000
downloadFileNumberwx.downloadFile()的超時時間(ms)，預設為6000

在上表中，以wx.開頭的是小程式中的API，如wx.request()用於傳送網路請求，關於這些API的具體使用方法會在後面的章節中講解

接下來演示應用級配置的使用，修改app.json檔案，具體程式碼如下：

1
2
3
4
5
6
7
8
9
10

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "數值比較",
    "navigationBarBackgroundColor": "#369"
  },
  "debug": true
}

在上述程式碼中，navigationBarTitleText和navigationBarBackgroundColor配置了導航欄的標題和樣式，如果將pages/index/index.json檔案中的相同配置刪除，則應用級配置會生效；debug開啟了除錯，執行程式後，會在控制檯中輸出除錯資訊。下圖中可以看到小程式啟動過程的資訊

 

相關文章