教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

小程序頁面級配置文件和應用級配置文件

更新時間:2022年03月25日09時26分 來源:傳智教育 瀏覽次數:

小程序的每一個頁面均可以使用json文件對頁面的效果進行配置。頁面配置分為頁面級和應用級,在本項目中,pages/index/index.json是頁面級配置文件,而app.json是應用級配置文件。下面分別進行講解。

1.頁面級配置文件

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

在表2-5中,若將enablePullDownRefresh設為true,頁面可以下拉刷新,當下拉刷新操作執(zhí)行時,就會觸發(fā)下拉刷新事件onPullDownRefresh,在pages/index/index.js文件中可以找到該事件的處理函數。

onReachBottomDistance主要用于開發(fā)自動加載更多的功能,也就是當頁面中的內容非常長的時候,為了加快加載速度,并不是一次性加載所有的數據,而是先加載一部分數據將頁面填滿,直到出現滾動條,頁面可以向上滾動。當用戶上拉時,如果快要到達底部了,就立即加載后面的數據。因此,onReachBottomDistance的值越大,加載的時機越提前。如果達到了給定的值,就會觸發(fā)上拉觸底事件onReachBottom,在pages/index/index.js文件中可以找到該事件的處理函數。

接下來演示頁面級配置的使用,打開pages/index/index.json文件,編寫代碼如下。

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

上述代碼設置了導航欄標題為“數值比較”,顏色為藍色。運行結果如圖2-12所示。

2.應用級配置文件

項目根目錄下app.json就是應用級配置文件,其常用配置如表2-6所示。

表2-6app.json常用配置

在上述屬性中,pages在前面已經用過;window的值是一個對象,可以將表2-5中的配置寫在window中,作為應用級配置使用,從而一次設置多個頁面,且優(yōu)先級低于頁面級配置;tabBar、plugins和requiredBackgroundModes會在后面的章節(jié)進行講解;debug開啟后可以在控制臺中輸出調試信息,幫助開發(fā)者快速的定位到一些常見的問題。

networkTimeout可以設置網絡請求過程中的超時時間,詳細內容如表2-7所示。

在表2-7中,以“wx.”開始的是小程序中的API,如wx.request()用于發(fā)送網絡請求,關于這些API的使用具體會在后面的章節(jié)中講解。

接下來演示應用級配置的使用,修改app.json文件,具體代碼如下。

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

在上述代碼中,第5~6行配置了導航欄的標題和樣式,如果將pages/index/index.json文件中的相同配置刪除,則應用級配置就會生效;第7行開啟了調試,運行程序后,就會在控制臺中輸出調試信息,如圖2-13所示。從圖中可以看到小程序啟動過程的信息。




猜你喜歡:

微信小程序教程:10天精通微信小程序開發(fā)【2022最新】

企業(yè)為什么需要開發(fā)微信小程序?微信小程序有哪些優(yōu)勢?

微信小程序開發(fā)環(huán)境配置教程

vue-router如何實現實現單頁面前端路由?

傳智教育web前端培訓課程

0 分享到:
和我們在線交談!