更新時(shí)間:2022-03-24 來(lái)源:黑馬程序員 瀏覽量:
小程序的每一個(gè)頁(yè)面均可以使用json文件對(duì)頁(yè)面的效果進(jìn)行配置。頁(yè)面配置分為頁(yè)面級(jí)和應(yīng)用級(jí),在本項(xiàng)目中,pages/index/index.json是頁(yè)面級(jí)配置文件,而app.json是應(yīng)用級(jí)配置文件。下面分別進(jìn)行講解。
1.頁(yè)面級(jí)配置文件
在頁(yè)面級(jí)配置文件中可以更改頁(yè)面的導(dǎo)航欄樣式,控制頁(yè)面是否允許上下滾動(dòng)等。下面通過(guò)表2-5列舉常用的頁(yè)面級(jí)配置。
在表2-5中,若將enablePullDownRefresh設(shè)為true,頁(yè)面可以下拉刷新,當(dāng)下拉刷新操作執(zhí)行時(shí),就會(huì)觸發(fā)下拉刷新事件onPullDownRefresh,在pages/index/index.js文件中可以找到該事件的處理函數(shù)。
onReachBottomDistance主要用于開發(fā)自動(dòng)加載更多的功能,也就是當(dāng)頁(yè)面中的內(nèi)容非常長(zhǎng)的時(shí)候,為了加快加載速度,并不是一次性加載所有的數(shù)據(jù),而是先加載一部分?jǐn)?shù)據(jù)將頁(yè)面填滿,直到出現(xiàn)滾動(dòng)條,頁(yè)面可以向上滾動(dòng)。當(dāng)用戶上拉時(shí),如果快要到達(dá)底部了,就立即加載后面的數(shù)據(jù)。因此,onReachBottomDistance的值越大,加載的時(shí)機(jī)越提前。如果達(dá)到了給定的值,就會(huì)觸發(fā)上拉觸底事件onReachBottom,在pages/index/index.js文件中可以找到該事件的處理函數(shù)。
接下來(lái)演示頁(yè)面級(jí)配置的使用,打開pages/index/index.json文件,編寫代碼如下。
{ "navigationBarTitleText": "數(shù)值比較" "navigationBarBackgroundColor": "#369" }
上述代碼設(shè)置了導(dǎo)航欄標(biāo)題為“數(shù)值比較”,顏色為藍(lán)色。運(yùn)行結(jié)果如圖2-12所示。
2.應(yīng)用級(jí)配置文件
項(xiàng)目根目錄下app.json就是應(yīng)用級(jí)配置文件,其常用配置如表2-6所示。
表2-6app.json常用配置
在上述屬性中,pages在前面已經(jīng)用過(guò);window的值是一個(gè)對(duì)象,可以將表2-5中的配置寫在window中,作為應(yīng)用級(jí)配置使用,從而一次設(shè)置多個(gè)頁(yè)面,且優(yōu)先級(jí)低于頁(yè)面級(jí)配置;tabBar、plugins和requiredBackgroundModes會(huì)在后面的章節(jié)進(jìn)行講解;debug開啟后可以在控制臺(tái)中輸出調(diào)試信息,幫助開發(fā)者快速的定位到一些常見的問(wèn)題。
networkTimeout可以設(shè)置網(wǎng)絡(luò)請(qǐng)求過(guò)程中的超時(shí)時(shí)間,詳細(xì)內(nèi)容如表2-7所示。
在表2-7中,以“wx.”開始的是小程序中的API,如wx.request()用于發(fā)送網(wǎng)絡(luò)請(qǐng)求,關(guān)于這些API的使用具體會(huì)在后面的章節(jié)中講解。
接下來(lái)演示應(yīng)用級(jí)配置的使用,修改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)用級(jí)配置就會(huì)生效;第7行開啟了調(diào)試,運(yùn)行程序后,就會(huì)在控制臺(tái)中輸出調(diào)試信息,如圖2-13所示。從圖中可以看到小程序啟動(dòng)過(guò)程的信息。