uniapp で WeChat アプレットのカスタムタブバーを使用する

アプレットプロジェクトの tabBar を変更してカスタムタブバーを使用するのは実際に
は非常に簡単です。アプレット開発ドキュメントの手順に従うだけです。

1. 構成情報

app.json の tabBar 項目でカスタムフィールドを指定し、その他の tabBar 関連の構成も完了します。
usingComponents 項目はすべてのタブページの json で宣言する必要があり、app.json でグローバルに有効にすることもできます。

例：

{
    
    
  "tabBar": {
    
    
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
    
    
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
    
    
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {
    
    }
}

2.タブバーコードファイルを追加

コードのルートディレクトリにエントリファイルを追加します。

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. tabBar コードを記述します。

これはカスタムコンポーネントの形式で記述することができ、tabBar のレンダリングを完全に引き継ぎます。さらに、カスタムコンポーネントは getTabBar インターフェイスを追加します。これにより、現在のページの下にあるカスタム tabBar コンポーネントインスタンスを取得できます。
ドキュメントではこのように書かれていますが、公式のコードスニペットによるとuniappでは実現できないようです
ここに画像の説明を挿入
現在の効果としてはタブが切り替わり、ページも切り替わりますが、アクティブなタブは切り替わりません、 getTabBar を呼び出していないため、
各タブバーページにカスタムタブバーコンポーネントを導入し、ページが onShow のときにコンポーネントインスタンスを呼び出して選択された値を変更することを考えれば、目的を達成できます。

Pages.json にネイティブコンポーネントを導入する

// pages.json
{
    
    
	"pages":[
		{
    
    
			"path": "pages/index/index",
			"style": {
    
    
				"navigationBarTitleText": "工作台",
				"enablePullDownRefresh": true,
				"usingComponents": {
    
    
					"custom-tab-bar": "/custom-tab-bar/index"
				}
			}
		},
		...
	]
}

ページ内で呼び出す

// index/index.vue
<template>
...
    <custom-tab-bar v-show="0" ref="customTabBar" />
...
</template>
<script>
...
onShow() {
    
    
this.$nextTick(() => {
    
    
      this.$refs.customTabBar.getTabBar().setData({
    
    
        selected: 2
      })
    })
}
...
</script>

タブの切り替えとアクティベーションステータスを同期できるようになりました

更新する

後で、 getTabBar()メソッドをthis.$mp.pageの下で呼び出すことができるという記事を見かけましたが、こうすることで、上記のようなコンポーネントを繰り返し導入する必要がなく、よりエレガントになります。

onShow() {
    
    
  this.$mp.page.getTabBar().setData({
    
    
    selected: 1
  })
}

4. ピットに足を踏み入れる

完璧です。非常にシンプルかつスムーズに実装されました。携帯電話でプレビューすると、
正しいタブバーが 2 つあることがわかりました。カスタムタブバーとオリジナルタブバーが積み重ねられていました。
ここに画像の説明を挿入
どうしてこんなことが起こるのでしょうか
? "custom": true が設定されているのは明らかです。

そして、wx.setTabBarItem などの tabBar スタイルに関連するインターフェイスが無効になると記載されているドキュメントを見てください。
ここに画像の説明を挿入

5.解決する

その後、showTabBar が呼び出されたのかと思い、コードを検索して見つけましたが、なぜまだ動作するのでしょうか? ああ、ドキュメントには、"custom": true を設定した後、showTabBar のインターフェイスが無効になるとは書かれていませんでした。コード内の showTabBar は正常になります
。
ここに画像の説明を挿入
毎日少しの知識