小程序頁面級配置文件和應(yīng)用級配置文件

小程序的每一個頁面均可以使用json文件對頁面的效果進(jìn)行配置。頁面配置分為頁面級和應(yīng)用級，在本項(xiàng)目中，pages/index/index.json是頁面級配置文件，而app.json是應(yīng)用級配置文件。下面分別進(jìn)行講解。

1.頁面級配置文件

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

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

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

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

{
    "navigationBarTitleText": "數(shù)值比較"
    "navigationBarBackgroundColor": "#369"
}

上述代碼設(shè)置了導(dǎo)航欄標(biāo)題為“數(shù)值比較”，顏色為藍(lán)色。運(yùn)行結(jié)果如圖2-12所示。

2.應(yīng)用級配置文件

項(xiàng)目根目錄下app.json就是應(yīng)用級配置文件，其常用配置如表2-6所示。

表2-6app.json常用配置

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

networkTimeout可以設(shè)置網(wǎng)絡(luò)請求過程中的超時時間，詳細(xì)內(nèi)容如表2-7所示。

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

接下來演示應(yīng)用級配置的使用，修改app.json文件，具體代碼如下。

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

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

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

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

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

vue-router如何實(shí)現(xiàn)實(shí)現(xiàn)單頁面前端路由？

傳智教育web前端培訓(xùn)課程