自從開始在知乎上發教程后，發現一個事情啊，

大家對于我寫的教程，都在偷偷地收藏~~

但是，

卻沒有銀點贊~

知乎這個平臺吧，點贊的分量比收藏更大，

這里也不是要贊（我知道自己還能做的更好），

只是希望看了我文章覺得我寫得還行的童鞋們，

給我點個贊，多多支持一下，讓更多有需要的人看到~

謝謝大家了~~~

咳咳，說正事，開始我們今天的小程序開發小課堂~~~

上一篇文章，我們一起掰扯了全局配置文件-window字段的相關知識，

大家看過的，再復習一下，沒看過的點擊下方鏈接！

相信自己：05. 教你零基礎搭建小程序（解讀全局配置文件-window字段）?zhuanlan.zhihu.com

還有沒學過小程序開發的，想從頭學習的，

安排！

點擊下方小程序訓練營，系統學習吧~~

小程序訓練營?zhuanlan.zhihu.com

話不多說（廢話真多），今天一起來學習全局配置文件-tabBar字段吧~

（一） tabBar 字段的定義和功能

什么是tabBar 字段呢？

先來看一下，官方定義

in other words,

tabBar 字段就是負責創建一個標簽頁的效果。

啥意思涅？

我們打開某寶APP首頁，首頁下方的底部標簽頁面，

我們使用全局配置文件中的tabBar 字段，就是來實現類似 某寶 底部標簽 的效果呈現。

（二）認識 tabBar 字段 的 屬性—— list 屬性

• list 屬性的描述和組成部分

回到微信開發者工具 界面中，

tabBar 字段是長介樣兒的

list 屬性 官方解釋如下：

由上上圖可看到，

list屬性下包括4部分，

pagePath：頁面路徑 text：標題 iconPath：未被選中的頁面路徑 selectedIconPath：已選中的頁面圖標路徑

艾瑞巴蒂，

我知道，我又在一本正經胡說八道了，

好吧~

我們還是圖文并茂吧~~

1、pagePath：頁面路徑

還是拿某寶來說吧， pagePath 這一行， 決定的就是， 點擊下方菜單欄，要跳轉至哪一個頁面的路徑。

2、text：標題

如上圖所示， 某寶中，下方菜單 比如：微淘，消息，購物車等，都是 text

3、iconPath：未被選中的頁面路徑

iconPath ： 點擊某寶-購物車后， 可以看到下圖菜單欄中未選中的頁面的狀態

4、selectedIconPath：已選中的頁面圖標路徑

某寶中， 點擊“首頁”后， 下方菜單欄的頁面路徑

了解完 tabBar 字段的list屬性后， 我們可以發現， 要想在小程序中建立向某寶頁面底部中一樣的tab欄， 一要先在全局配置文件中的pages 字段中，新建各個子頁面； 二是還要用到圖標icon， 并將圖標文件夾復制至開發者工具中建立的小程序項目目錄下， 并且，icon文件夾與pages、utils文件夾同層級別, 如下圖所示。

這里，本節課，需要用到這8個圖標（想要的童鞋，私聊我哦~~）

• tabBar 字段中的實操—— 建立小程序底部的tab欄

這是實操模板，手把手帶你敲代碼~~

1、pages 字段中新增tab欄各個子頁面

步驟如下：

（1）將 index 頁面（首頁頁面）放在最前面，如下圖所示

（2）根據icon 文件夾中的后四個圖標，編寫每個圖標的頁面路徑 home--首頁 頁面； img--圖片預覽 頁面； my--個人中心 頁面； search--搜索中心 頁面 （3）點擊“保存”鍵 四個頁面的代碼和呈現結果如下：

2、tabBar 字段中新增四個子菜單欄

步驟如下：

（1）點擊下圖標識，將window 字段折疊

（2）window 字段后加入 tabBar 字段

（3）在tabBar 字段中編輯 index (首頁) 頁面，代碼修改如下：

首頁 頁面用到這兩個圖標，名稱一定要寫對哦~

（4）點擊保存， 發現調試器下面報錯， 意為 tabBar 字段中要同時加入2個頁面的路徑

(5) 在 "index" 路徑后加“，”（如下圖中的1） 復制 tabBar 字段中 "index" 代碼（如下圖中的2）

（6）將復制的代碼修改成img（圖片）頁面，代碼如下

img(圖片)頁面用到這兩個圖標，名稱一定要對上！

（7）按下”保存“鍵，小程序頁面呈現如下 可以看到，”首頁“是選中的狀態，而圖片菜單是未選中的

（8) 繼續在下方，復制 tabBar 字段中 "index" 代碼，修改成”個人中心“頁面 和 ”搜索中心“頁面的代碼，如下圖

（9）點擊保存，看呈現界面的變化

如上圖所示，小程序現在的底部菜單欄顏色是很單調的。

我們可以應用 tabBar 字段中的其他顏色屬性來調整顏色。

屬性哪里找呢？

請點擊下方鏈接，跳轉至小程序官方指導文檔中，全局配置 | 微信開放文檔?developers.weixin.qq.com

定位到 tabBar 字段 的屬性介紹頁面，如下圖

（三）認識 tabBar 字段 的 屬性—— color 屬性

我們修改菜單欄名稱的顏色，這里用到的屬性是 color

在tabBar 字段中，與list同層級，敲入 color 屬性的代碼 修改顏色為"#0094ff"（藍色）

菜單欄的字體顏色，變成藍色~~

（四）認識 tabBar 字段 的 屬性——selected color 屬性

修改選中菜單欄頁面的字體顏色，我們用到selected color 屬性

步驟如下：

在color 屬性后，緊接著加入 selected color 屬性， 顏色修改成橘黃色”ff9400“，保存，最后如下圖， 被選中的頁面（首頁頁面）的名稱是橘黃色的

敲黑板！！咚咚咚！ 這里的顏色不能直接寫 red, yellow等， 一定要是十六進制顏色！ 細心的童鞋，會發現， 官方文檔中也明確提到了。

（五）認識 tabBar 字段 的 屬性—— background color 屬性

修改選中菜單欄頁面的字體顏色，我們用到background color 屬性

在selected color 屬性后，緊接著加入 background color 屬性， 顏色修改成紅色”ff5433“，保存，最后如下圖， 菜單欄的背景顏色變成紅色。

（六）認識 tabBar 字段 的 屬性—— position 屬性

改變菜單欄在頁面中的位置，我們用到position 屬性

菜單欄在小程序中是默認在底部的， 如果想要菜單欄呈現在 頂部，就要用到position 屬性， 如下圖所示，position 屬性僅支持 頂部（top）和底部（bottom）兩種

與list 屬性同層級，加入position 屬性， 代碼如下圖， 將菜單欄設置為在頁面的頂部， 而且，大家也可以發現， 當菜單欄跑到頂部后，各個頁面的圖標都消失了 這是小程序的規定，大家指導就好了~~

tabBar 字段中還有一些本章未講到的屬性，大家課下自行實踐哈~~

最后，我們再來總結一下，這章的內容

（一） tabBar 字段的定義和功能

（二）認識 tabBar 字段 的 屬性—— list 屬性

• list 屬性的描述和組成部分
• tabBar 字段中的實操—— 建立小程序底部的tab欄

（三）認識 tabBar 字段 的 屬性—— color 屬性

（四）認識 tabBar 字段 的 屬性——selected color 屬性

（五）認識 tabBar 字段 的 屬性—— background color 屬性

（六）認識 tabBar 字段 的 屬性—— position 屬性

最后的最后，歡迎大家看完后給提點意見~ 如果覺得有幫助，希望得到一枚小小的贊~ 支持原創，鼓勵我辛苦碼字~~~ 謝謝啦~~~

總結

以上是生活随笔為你收集整理的局部配置和全局配置_06. 教你零基础搭建小程序（解读全局配置文件-tabBar字段）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。