快捷導(dǎo)航

微信小程序自定義tabBar的踩坑實(shí)踐記錄

更新時(shí)間：2020年11月06日 10:06:37 作者：江不知

這篇文章主要給大家介紹了關(guān)于微信小程序自定義tabBar的踩坑實(shí)踐記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

微信官方文檔對(duì)自定義 tabBar 的闡述較為潦草，在開(kāi)發(fā)自定義 tabBar 過(guò)程中我踩了很多坑，因此在此處做個(gè)總結(jié)。

我使用 Vant Weapp 作為 UI 組件庫(kù)，下面以此組件庫(kù)為例。

定義 tabBar

創(chuàng)建自定義 tabBar 文件

創(chuàng)建一個(gè)與 /pages 的同級(jí)目錄，命名為 /custom-tab-bar，注意目錄層級(jí)與目錄命名問(wèn)題，不可用其他名稱(chēng)命名。
在 /custom-tab-bar 下創(chuàng)建四個(gè)文件：

index.js
index.json
index.wxml
index.wxss

index.js

在 index.js 中我們定義相關(guān)數(shù)據(jù)：

active：當(dāng)前被點(diǎn)擊 tab 的索引
list：tab 列表

以及一個(gè)切換 tab 時(shí)觸發(fā)的方法：

function onChange(event)：標(biāo)簽切換時(shí)觸發(fā)，修改 active 值，點(diǎn)亮被點(diǎn)擊的 tab 并進(jìn)行頁(yè)面跳轉(zhuǎn)

Component({
 data: {
 // 選中的 tab 
 active: null,
 // 菜單列表
 list: [
  {
  pagePath: '/pages/subscriptions/subscriptions',
  text: '訂閱',
  name: 'subscriptions',
  icon: 'bullhorn-o'
  },
  {
  pagePath: '/pages/profile/profile',
  text: '我的',
  name: 'profile',
  icon: 'user-o'
  }
 ]
 },
 methods: {
 // 標(biāo)簽切換
 onChange: function (event) {
  this.setData({ active: event.detail })
  wx.switchTab({
  url: this.data.list[event.detail].pagePath,
  })
 }
 }
})

index.json

在 index.json 中，將 component 參數(shù)值設(shè)為 true，代表這是一個(gè)自定義組件：

{
 "component": true
}

因?yàn)槲沂褂昧?a target="_blank" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Vant Weapp 的 tabBar 標(biāo)簽欄，所以還需引入額外組件：

{
 "component": true,
 "usingComponents": {
 "van-tabbar": "@vant/weapp/tabbar/index",
 "van-tabbar-item": "@vant/weapp/tabbar-item/index",
 "van-icon": "@vant/weapp/icon/index"
 }
}

index.wxml

在 index.wxml 中定義組件形態(tài)，我在此處使用Vant Weapp 的 tabBar 標(biāo)簽欄，詳見(jiàn)代碼，不再贅述。

<van-tabbar active="{{ active }}" bind:change="onChange">
 <van-tabbar-item 
 wx:for="{{list}}" 
 wx:key="index"
 icon="{{item.icon}}" 
 data-path="{{item.pagePath}}">
 {{item.text}}
 </van-tabbar-item>
</van-tabbar>

配置 app.json

在 app.json 中配置如下參數(shù)：

usingComponents：僅聲明即可
tabBar：tabBar 組件的具體配置
- custom：設(shè)為 true，表示使用自定義組件
- list：tab 頁(yè)列表，在列表中的頁(yè)面將被設(shè)置為 tab 頁(yè)，自動(dòng)加載 tabBar

{
 "usingComponents":{

 },
 "tabBar":{
  "custom":true,
  "color":"#000000",
  "selectedColor":"#000000",
  "backgroundColor":"#000000",
  "list":[
   {
    "pagePath":"pages/subscriptions/subscriptions",
    "text":"訂閱列表",
    "iconPath":"",
    "selectedIconPath":""
   },
   {
    "pagePath":"pages/profile/profile",
    "text":"關(guān)于我",
    "iconPath":"",
    "selectedIconPath":""
   }
  ]
 }
}

實(shí)現(xiàn) tabBar 選中態(tài)

根據(jù)微信官方文檔描述，每個(gè) tab 頁(yè)面 tabBar 的實(shí)例是不同的：

每個(gè) tab 頁(yè)下的自定義 tabBar 組件實(shí)例是不同的，可通過(guò)自定義組件下的 getTabBar 接口，獲取當(dāng)前頁(yè)面的自定義 tabBar 組件實(shí)例。

顯而易見(jiàn)，每當(dāng)切換 tab 頁(yè)時(shí)，我們都需要更新 tabBar 的選中態(tài)。關(guān)于選中態(tài)的實(shí)現(xiàn)，官方文檔描述如下：

注意：如需實(shí)現(xiàn) tab 選中態(tài)，要在當(dāng)前頁(yè)面下，通過(guò) getTabBar 接口獲取組件實(shí)例，并調(diào)用 setData 更新選中態(tài)。

我們可以在使用到 tabBar 的頁(yè)面中這樣實(shí)現(xiàn)：

Page({
 onShow: function () {
 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  this.getTabBar().setData({
  // 當(dāng)前頁(yè)面的 tabBar 索引
  active: 1
  })
 }
 }
})

至此，一個(gè)自定義 tabBar 的實(shí)現(xiàn)已全部完成。

踩坑

getTabBar() 方法缺失

在實(shí)現(xiàn) tabBar 選中態(tài)時(shí)遇到 getTabBar() 方法缺失的問(wèn)題。在小程序開(kāi)發(fā)工具中跳轉(zhuǎn)到 getTabBar() 方法的定義，我們可以看到：

/**
 * 返回當(dāng)前頁(yè)面的 custom-tab-bar 的組件實(shí)例
 *
 * 最低基礎(chǔ)庫(kù)版本：[`2.6.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
 **/
getTabBar(): TrivialInstance

該方法的最低基礎(chǔ)版本庫(kù)為 2.6.2，我們修改 project.config.json 文件中的 libVersion 字段，升級(jí)到指定版本庫(kù)即可。
升級(jí)版本庫(kù)后 tabBar 組件報(bào)錯(cuò)

報(bào)錯(cuò)內(nèi)容如下：