微信小程序全局配置及常用配置項詳解
一、window常用配置
1.小程序根目錄下的app.json文件時小程序的全局配置文件。常用配置項如下:
① pages
記錄當前小程序所有頁面的存放路徑
② window
全局設(shè)置小程序窗口的外觀
③ tabBar
設(shè)置小程序底部的tabBar效果
④ style
是否啟用新版的組件樣式
2.window常用配置項
3.設(shè)置導航欄的標題
設(shè)置步驟:app.json->window->navigationBarTitleText 修改保存即可,導航欄背景顏色修改只支持十六進制。
注意:navigationBarTextStyle的可選值只支持black和white。
4.全局開啟下拉刷新功能
設(shè)置步驟:app.json->window->把enablePullDownRefresh的值設(shè)為true
注意:在app.json中啟用下拉刷新功能,會作用于每個小程序頁面。
5.設(shè)置下拉刷新時窗口的背景顏色
當全局開啟下拉刷新功能之后,默認的窗口背景為白色。如果自定義下拉刷新窗口背景色,設(shè)置步驟為:app.json->window->為backgroundColor指定16進制的顏色值。
6.設(shè)置下拉刷新時loading的樣式
當全局開啟下拉刷新功能之后,默認窗口的loading樣式為白色,如果要更改loading樣式的效果,設(shè)置步驟為:app.json->window->為backgroundTextStyle指定dark值(注意:可選值只有l(wèi)ight和dark兩個)。
7.設(shè)置上拉觸底的距離
上拉觸底是移動端的專有名詞,通過手指在屏幕上的上拉滑動操作,從而加載更多數(shù)據(jù)的行為。
設(shè)置步驟:app.json->window->為onReachBottomDistance設(shè)置新的值(注意:默認距離為50px,沒有特殊需求,建議使用默認)
二、tabBar全局配置
1.什么是tabBar
tabBar是移動端應(yīng)用常見的頁面效果,用于實現(xiàn)多頁面的快速切換,小程序中通常分為底部tabBar和頂部tabBar。
注意:
tabBar中只能配置最少2個,最多5個tab頁簽
當渲染頂部tabBar時,不顯示icon圖標,只顯示文本
2.tabBar的6個組成部分
① backgroundColor:tabBar的背景色
② selectedIconPath:選中時的圖片路徑
③ borderStyle:tabBar上邊框的顏色
④ iconPath:未選中時的圖片路徑
⑤ selectedColor:tab上的文字選中時的顏色
⑥ color:tab上文字的默認(未選中)顏色
3.tabBar節(jié)點配置項
每個tab項的配置選項
window節(jié)點平級定義tabBar節(jié)點:
"tabBar": { "list": [ { // 定義的頁面路徑 "pagePath": "pages/list/list", "text": "首頁" }, { "pagePath": "pages/test/test", "text": "我的" } ] },
注意:tabPage頁面的組件要放到pages節(jié)點內(nèi)部最前面,否則頁面沒效果。
三、頁面配置文件
1.頁面配置文件的作用
小程序中,每個頁面都有自己的.json配置文件,用來對當前頁面的窗口外觀,頁面效果等進行配置。
2.頁面配置和全局配置的關(guān)系
小程序中,app.json中的window節(jié)點,可以全局配置小程序中每個頁面的窗口表現(xiàn)。如果某些小程序頁面想要擁有特殊的窗口表現(xiàn),此時,頁面的.json配置文件就可以實現(xiàn)這種需求。
注意:當頁面配置與全局配置沖突時,根據(jù)就近原則,最終的效果以頁面配置為準。
3.頁面配置中常用的配置項
到此這篇關(guān)于微信小程序全局配置及常用配置項詳解的文章就介紹到這了,更多相關(guān)小程序全局配置 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript代碼實現(xiàn)左右上下自動晃動自動移動
最近幾天做了一個項目,原來是用css3動畫做的,由于不兼容IE,改成用js做了,特此分享給大家,供大家參考2016-04-04Bootstrap編寫一個在當前網(wǎng)頁彈出可關(guān)閉的對話框 非彈窗
這篇文章主要介紹了Bootstrap編寫一個在當前網(wǎng)頁彈出可關(guān)閉的對話框,不用跳轉(zhuǎn),非彈窗,感興趣的小伙伴們可以參考一下2016-06-06JavaScript樹形組件實現(xiàn)無限級樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript樹形組件實現(xiàn)無限級樹形結(jié)構(gòu),一種構(gòu)建多級有序樹形結(jié)構(gòu)JSON(或XML)數(shù)據(jù)源的方法,下面更多相關(guān)資料需要的小伙伴可以參考一下2022-03-03Three.js利用性能插件stats實現(xiàn)性能監(jiān)聽的方法
Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創(chuàng)建各種三維場景,而下面這篇文章主要給大家介紹了關(guān)于Three.js如何利用性能插件stats實現(xiàn)性能監(jiān)聽的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起學習學習吧。2017-09-09