學(xué)習(xí)的最大理由是想擺脫平庸，早一天就多一份人生的精彩；遲一天就多一天平庸的困擾。各位小伙伴，如果您：
想系統(tǒng)/深入學(xué)習(xí)某技術(shù)知識(shí)點(diǎn)…
一個(gè)人摸索學(xué)習(xí)很難堅(jiān)持，想組團(tuán)高效學(xué)習(xí)…
想寫博客但無(wú)從下手，急需寫作干貨注入能量…
熱愛寫作，愿意讓自己成為更好的人…

一、全局配置

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

小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置項(xiàng)如下：

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

二、全局配置 - window

1、小程序窗口的組成部分

2、了解 window 節(jié)點(diǎn)常用的配置項(xiàng)

3、設(shè)置導(dǎo)航欄的標(biāo)題

設(shè)置步驟：app.json -> window -> navigationBarTitleText
需求：把導(dǎo)航欄上的標(biāo)題，從默認(rèn)的 “WeChat”修改為“哥的時(shí)代”，效果如圖所示：

4、設(shè)置導(dǎo)航欄的背景色

設(shè)置步驟：app.json -> window -> navigationBarBackgroundColor
需求：把導(dǎo)航欄標(biāo)題的背景色，從默認(rèn)的 #fff 修改為 #2b4b6b ，（只支持十六進(jìn)制，不支持文本顏色）效果如圖所示：

5、設(shè)置導(dǎo)航欄的標(biāo)題顏色

設(shè)置步驟：app.json -> window -> navigationBarTextStyle
需求：把導(dǎo)航欄上的標(biāo)題顏色，從默認(rèn)的 black 修改為 white ，效果如圖所示：

6、全局開啟下拉刷新功能

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

注意：在 app.json 中啟用下拉刷新功能，會(huì)作用于每個(gè)小程序頁(yè)面！

7、設(shè)置下拉刷新時(shí)窗口的背景色

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

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

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

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

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

注意：默認(rèn)距離為50px，如果沒有特殊需求，建議使用默認(rèn)值即可。

三、全局配置 - tabBar

1、什么是 tabBar

tabBar 是移動(dòng)端應(yīng)用常見的頁(yè)面效果，用于實(shí)現(xiàn)多頁(yè)面的快速切換。小程序中通常將其分為：

• 底部 tabBar
• 頂部 tabBar

注意：

• tabBar中只能配置最少 2 個(gè)、最多 5 個(gè) tab 頁(yè)簽
• 當(dāng)渲染頂部 tabBar 時(shí)，不顯示 icon，只顯示文本

2、tabBar 的 6 個(gè)組成部分

• backgroundColor：tabBar 的背景色
• selectedIconPath：選中時(shí)的圖片路徑
• borderStyle：tabBar 上邊框的顏色
• iconPath：未選中時(shí)的圖片路徑
• selectedColor：tab 上的文字選中時(shí)的顏色
• color：tab 上文字的默認(rèn)（未選中）顏色

3、tabBar 節(jié)點(diǎn)的配置項(xiàng)

4、每個(gè) tab 項(xiàng)的配置選項(xiàng)

四、全局配置 - 案例：配置 tabBar

1、實(shí)現(xiàn)步驟

• 拷貝圖標(biāo)資源
• 新建 3 個(gè)對(duì)應(yīng)的 tab 頁(yè)面
• 配置 tabBar 選項(xiàng)

2、步驟1 - 拷貝圖標(biāo)資源

把放圖片的 images 文件夾，拷貝到小程序項(xiàng)目根目錄中
將需要用到的小圖標(biāo)分為 3 組，每組兩個(gè)，其中：
圖片名稱中包含 -active 的是選中之后的圖標(biāo)
圖片名稱中不包含 -active 的是默認(rèn)圖標(biāo)
截圖如下：

3、步驟2 - 新建 3 個(gè)對(duì)應(yīng)的 tab 頁(yè)面

通過(guò) app.json 文件的 pages 節(jié)點(diǎn)，快速新建 3 個(gè)對(duì)應(yīng)的 tab 頁(yè)面，示例代碼如下：

其中，home 是首頁(yè)，message 是消息頁(yè)面，contact 是聯(lián)系我們頁(yè)面。

4、步驟3 - 配置 tabBar 選項(xiàng)

• 打開 app.json 配置文件，和 pages、window 平級(jí)，新增 tabBar 節(jié)點(diǎn)
• tabBar 節(jié)點(diǎn)中，新增 list 數(shù)組，這個(gè)數(shù)組中存放的，是每個(gè) tab 項(xiàng)的配置對(duì)象
• 在 list 數(shù)組中，新增每一個(gè) tab 項(xiàng)的配置對(duì)象。對(duì)象中包含的屬性如下：
• pagePath 指定當(dāng)前 tab 對(duì)應(yīng)的頁(yè)面路徑【必填】
• text 指定當(dāng)前 tab 上按鈕的文字【必填】
• iconPath 指定當(dāng)前 tab 未選中時(shí)候的圖片路徑【可選】
• selectedIconPath 指定當(dāng)前 tab 被選中后高亮的圖片路徑【可選】

5、完整的配置代碼

  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首頁(yè)",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/message.png",
      "selectedIconPath": "/images/message-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "聯(lián)系我們",
      "iconPath": "/images/contact.png",
      "selectedIconPath": "/images/contact-active.png"
    }]
  },

總結(jié)

以上就是微信小程序之全局配置-window和tabBar的相關(guān)知識(shí)點(diǎn)，希望對(duì)你有所幫助。
積跬步以至千里，積怠惰以至深淵。時(shí)代在這跟著你一起努力哦！

到此這篇關(guān)于微信小程序之全局配置-window和tabBar的文章就介紹到這了,更多相關(guān)微信小程序全局配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論