快捷導(dǎo)航

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

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

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

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

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

定義 tabBar

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

創(chuàng)建一個(gè)與 /pages 的同級(jí)目錄，命名為 /custom-tab-bar，注意目錄層級(jí)與目錄命名問題，不可用其他名稱命名。
在 /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)行頁面跳轉(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)簽欄，詳見代碼，不再贅述。

<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 頁列表，在列表中的頁面將被設(shè)置為 tab 頁，自動(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 頁面 tabBar 的實(shí)例是不同的：

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

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

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

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

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

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

踩坑

getTabBar() 方法缺失

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

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

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

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