在app.json文件中添加tabBar節點。tabBar是小程序客戶端底部或頂部tab欄的實現。
（1）tabBar相關屬性
color：tab上的文字默認顏色，僅支持十六進制顏色。
selectedColor：tab上的文字選中時的顏色，僅支持十六進制顏色。
backgroundColor：tab的背景色，僅支持十六進制顏色。
borderStyle：tabbar上邊框的顏色， 僅支持 black / white。
position：tabBar的位置，默認值是: bottom，僅支持 bottom / top。當 position 為 top 時，不顯示 icon。
custom：自定義tabBar。
"tabBar":?{
"color":?"#000000",
"selectedColor":?"#336699",
"backgroundColor":?"#ffffff",
"borderStyle":?"black",
"position":?"bottom"
?}
（2）list
list：tab的列表。
list 接受壹個數組，只能配置最少 2 個、最多 5 個 tab。
pagePath：頁面路徑，必須在pages 中先定義。
text：tab 上按鈕文字。
iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。selectedIconPath：選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片。
"list":?[
?{
"text":?"首頁",
"pagePath":?"pages/index/index",
"iconPath":?"assets/icon/home.png",
"selectedIconPath":?"assets/icon/home2.png"
?},
?{
"text":?"列表",
"pagePath":?"pages/list/list",
"iconPath":?"assets/icon/list.png",
"selectedIconPath":?"assets/icon/list2.png"
?}
]
2、頁面跳轉
（1）跳轉普通頁面
方法① navigator組件
?<!--?跳轉到普通頁，可以通過返回按鈕返回?-->
?<navigator?url="../detail/detail">到詳情頁</navigator>
方法② navigateTo()方法
navigateTo()方法，用於跳轉普通頁面。
<view?bindtap="gotoDetail">到詳情頁</view>
gotoDetail(){
//使用全局api跳轉，navigateTo()方法，用於跳轉普通頁面
wx.navigateTo({
?url:?'../detail/detail',
})
}
（2）跳轉tabBar頁面
方法① navigator組件
如果要使用navigator組件跳轉tabBar頁面，需要設置open-type="switchTab"。
?<!--?跳轉到tabBar頁面，不可以通過返回按鈕返回。因為跳轉到指定的tabBar頁面後，會關閉其他所有頁面?-->
<navigator?url="../list/list"?open-type="switchTab">到列表頁</navigator>?
方法② switchTab()方法
switchTab()方法，用於跳轉tabBar頁面。
<view?bindtap="gotoList">到列表頁</view>gotoList(){
wx.switchTab({
?url:?'../list/list',
})
?}