本篇文章為大家帶來了關於微信小程式的相關知識,其中主要介紹了關於全域配置以及頁面配置的詳細解析,其中包括了全域設定檔及常用組態項目、小程式視窗組成部分、設定導覽列的標題、背景色、標題顏色等等內容,下面一起來看一下,希望對大家有幫助。
![微信小程式全域配置以及頁面配置詳解](https://img.php.cn/upload/article/000/000/067/634128a28f0a5441.jpg)
【相關學習推薦:小程式學習教學】
##全域設定
#全域設定檔及常用設定項
![](https://img.php.cn/upload/article/000/000/067/3e96b5a69492460a6054749d86800398-0.jpg)
#全域設定—window
小程式視窗組成部分
![](https://img.php.cn/upload/article/000/000/067/26ed4a231edb3aabd8eb6b5a1c462559-1.png)
了解window節點常用的設定項目
![](https://img.php.cn/upload/article/000/000/067/0029bd3c141b6f38628b0635686f14dc-2.jpg)
設定導覽列的標題
設定步驟:app.json => window => navigationBarTitteText
#需求:把導航條上的標題,從預設的「WeChat」修改為"黑馬程式設計師",效果如圖所示:
![](https://img.php.cn/upload/article/000/000/067/d973e05a68abc4a3acbb5d765d67bb0e-3.png)
設定導覽列的背景顏色
設定步驟:app.json => window => navigationBarBackgroundColor
# 需求:把導覽列標題的背景色,從預設的#fff 修改為#2b4b6b ,效果如圖所示:
![](https://img.php.cn/upload/article/000/000/067/d973e05a68abc4a3acbb5d765d67bb0e-4.png)
設定導覽列的標題顏色
##設定步驟: app.json -> window -> navigationBarTextStyle
需求:把導覽列上的標題顏色,從預設的black 修改為white ,效果如圖所示:
![](https://img.php.cn/upload/article/000/000/067/291c3806461c4cca789e04c68f43b790-5.png)
#注意: navigationBarTextStyle 的可選值只有black 和white
全域開啟下拉刷新功能
概念:下拉刷新是行動端的專有名詞,指的是透過手指在螢幕上的下拉滑動操作,從而重新載入頁面資料的行為。
設定步驟:app.json -> window -> 把enablePullDownRefresh 的值設定為
true
##注意:在app.json 中啟用下拉刷新功能,會作用於每個小程式頁面!
設定下拉刷新時視窗的背景色
當全域開啟下拉刷新功能之後,預設的視窗背景為白色。如果自訂下拉刷新視窗背景色,設定步驟為: app.json -> window -> 為 backgroundColor 指定16進位的顏色值 #efefef。效果如下:
設定下拉刷新時loading的樣式![](https://img.php.cn/upload/article/000/000/067/4f937030d4ddecc2043c3a714cabe0b5-6.png)
當全域開啟下拉刷新功能之後,預設視窗的loading 樣式為白色,如果要更改loading 樣式的效果,設定步驟為app.json -> window -> 為backgroundTextStyle 指定
dark
值。效果如下:
注意: backgroundTextStyle 的可選值只有light 和dark
##設定上拉觸底的距離概念:上拉觸底是行動端的專有名詞,透過手指在螢幕上的上拉滑動操作,從而載入更多資料的行為。
設定步驟: app.json -> window -> 為onReachBottomDistance 設定新的數值
注意:預設距離為0,如果沒有特殊需求,建議使用預設值即可。
全域設定—tabbar什麼是tabbar
tabBar 是行動端套用常見的頁面效果,用來實現多頁面的快速切換。小程式中通常會將其分為:
底部tabBar
##注意:
tabBar中只能配置最少2 個、最多5 個tab 籤當渲染頂部tabBar 時, 不顯示icon ,只顯示文字
tabbar的6個組成部分
![](https://img.php.cn/upload/article/000/000/067/7596caa0b1a3e7b9ad6bd5bac906c349-9.jpg)
tabbar節點的設定項目
![](https://img.php.cn/upload/article/000/000/067/e726e610b13169a9f752d164380c8ed8-10.jpg)
每個tab項目的設定選項
![](https://img.php.cn/upload/article/000/000/067/3dbea93028cb8d05dc770ea8b9e8d4be-11.jpg)
頁面配置
頁面配置文件的作用
小程式中,每個頁面都有自己的.json 配置文件,用來對當前頁面的視窗外觀、頁面效果等進行配置。
頁面配置和全域配置的關係
小程式中,app.json 中的 window 節點,可以全域配置小程式中每個頁面的視窗表現。
如果某些小程式頁面想要擁有特殊的視窗表現,此時,「頁面層級的 .json 設定檔」就可以實現這種需求。
注意:當頁面配置與全域設定衝突時,根據就近原則,最終的效果以頁面配置為準。
頁面設定中常用的設定項目
![](https://img.php.cn/upload/article/000/000/067/3dbea93028cb8d05dc770ea8b9e8d4be-12.jpg)
#【相關學習推薦:小程式學習教學】
以上是微信小程式全域配置以及頁面配置詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!