微信小程序開(kāi)發(fā)學(xué)習(xí)筆記《7》全局配置以及小程序窗口

博主正在學(xué)習(xí)微信小程序開(kāi)發(fā)，希望記錄自己學(xué)習(xí)過(guò)程同時(shí)與廣大網(wǎng)友共同學(xué)習(xí)討論。全局配置官方文檔

一、全局配置文件及常用的配置項(xiàng)

小程序根目錄下的app.json 文件是小程序的全局配置文件。

常用的配置項(xiàng)如下:

1. pages記錄當(dāng)前小程序所有頁(yè)面的存放路徑
2. window全局設(shè)置小程序窗口的外觀
3. tabBar設(shè)置小程序底部的tabBar 效果
4. style·是否啟用新版的組件樣式

pages和style之前學(xué)習(xí)過(guò)了，這次主要學(xué)習(xí)window和tabBar。

二、window小程序窗口設(shè)置

小程序窗口主要由下圖三個(gè)部分組成，分別是navigationBar、backgroud、page頁(yè)面。
app.json文件中的window配置可以配置navigationBar、backgroud。

window節(jié)點(diǎn)中常用的配置項(xiàng)

圖中為常用的配置項(xiàng)，建議所有學(xué)習(xí)者閱讀一下官方文檔。
以上常用配置主要可以分為三類，第一類帶有navigationBar,用于配置導(dǎo)航欄；第二類帶有backgroud，主要是配置背景；第三類控制頁(yè)面效果。

三、window中navigationBar配置

主要講解上圖三個(gè)配置項(xiàng)：navigationBarTitleText、navigationBarBackgroundcolor、navigationBarTextStyle。
注：在設(shè)置此節(jié)內(nèi)容時(shí)，如果沒(méi)有生效，請(qǐng)?jiān)O(shè)置"navigationStyle": “default”。

3.1 navigationBarTitleText設(shè)置導(dǎo)航欄標(biāo)題

設(shè)置步驟:app.json -> window -> navigationBarTitleText
我們打開(kāi)別人的公眾號(hào)，導(dǎo)航欄往往會(huì)是別人公眾號(hào)的名稱，這個(gè)需求可以通過(guò)設(shè)置navigationBarTitleText實(shí)現(xiàn)。
代碼與效果如圖所示:

上半部分為沒(méi)有設(shè)置navigationBarTitleText的展示，導(dǎo)航欄并沒(méi)有內(nèi)容；下半部分為設(shè)置"navigationBarTitleText": “王子的小程序”，導(dǎo)航欄就展示了“王子的小程序”。

3.2 navigationBarBackgroundcolor設(shè)置導(dǎo)航欄背景色

設(shè)置步驟:app.json -> window -> navigationBarBackgroundColor
需求:把導(dǎo)航欄標(biāo)題的背景色，從#000000 修改為#2b4b6b，效果如圖所示:

可以看到，上半圖展示了導(dǎo)航欄背景色為#000000，下半張圖通過(guò)修改背景色為#2b4b6b。
注：navigationBarBackgroundColor僅支持#色號(hào)設(shè)置，不支持直接使用red、blue等單詞文本設(shè)置。

3.3 navigationBarTextStyle設(shè)置導(dǎo)航欄文字顏色

設(shè)置步驟: app.json -> window -> navigationBarTextStyle
需求:把導(dǎo)航條上的文字，從black修改為white，效果如圖所示:

如圖，上半部分導(dǎo)航欄文字顏色設(shè)置為黑色，下半部分導(dǎo)航欄文字顏色設(shè)置為白色。
注意:navigationBarTextStyle的可選值只有black和 white

四、enablePullDownRefresh設(shè)置全局下拉刷新

概念:下拉刷新是移動(dòng)端的專有名詞，指的是通過(guò)手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為。
設(shè)置步驟: app.json -> window ->把enablePullDownRefresh的值設(shè)置為true.

效果如下：

刷新的空白區(qū)域?yàn)楸尘皡^(qū)域，只有下拉才能看到。
注意:在app.json中啟用下拉刷新功能，會(huì)作用于每個(gè)小程序頁(yè)面! true是布爾類型，不能用雙引號(hào)包裹，不然變成字符串型了。

五、設(shè)置下拉刷新背景

5.1 backgroundColor設(shè)置下拉刷新背景色

當(dāng)全局開(kāi)啟下拉刷新功能之后，默認(rèn)的窗口背景為白色。如果自定義下拉刷新窗口背景色。設(shè)置步驟為;app.json -> window ->為backgroundColor指定16進(jìn)制的顏色值#efefef。效果如下:

默認(rèn)顏色如四中圖片所示，通過(guò)修改如上圖。

5.2 backgroundTextStyle設(shè)置下拉刷新時(shí)loading的樣式

當(dāng)全局開(kāi)啟下拉刷新功能之后，默認(rèn)窗口的loading 樣式為dark，如果要更改loading樣式的效果，設(shè)置步驟為app.json -> window ->為backgroundTextStyle指定 light值。
backgroundTextStyle僅支持 dark / light設(shè)置
效果如下：

如5.1圖為默認(rèn)加載樣式，通過(guò)修改為light如上圖所示。

六、onReachBottomDistance設(shè)置上拉觸底的距離

概念:上拉觸底是移動(dòng)端的專有名詞，通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。
設(shè)置步驟: app.json -> window ->為onReachBottomDistance設(shè)置新的數(shù)值

注意:默認(rèn)距離為50px，如果沒(méi)有特殊需求，建議使用默認(rèn)值即可。
50px意味著，當(dāng)上拉滑動(dòng)頁(yè)面時(shí)，滾動(dòng)條不足50px時(shí)，加載更多數(shù)據(jù)。

總結(jié)：小程序根目錄下的app.json 文件是小程序的全局配置文件
app.json文件中的window配置可以配置navigationBar、backgroud。

以上學(xué)習(xí)筆記都是博主在B站學(xué)習(xí)黑馬程序員課程時(shí)的學(xué)習(xí)筆記，如果有什么問(wèn)題，煩請(qǐng)聯(lián)系我刪除。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-812851.html

到了這里，關(guān)于微信小程序開(kāi)發(fā)學(xué)習(xí)筆記《7》全局配置以及小程序窗口的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！