支付寶小程序 hideTabBar 無效，出現兩個 TabBar

問題描述：

使用 uni-app 開發的小程序，使用組件的形式做了自定義 TabBar，在部分支付寶小程序中出現了兩個 TabBar

在支付寶小程序的開發社區中也有類似問題的反饋
《hideTabBar IOS失效，模擬器和安卓正常》

《真機上調用my.hideTabBar無效》

《tabbar隱藏在特殊情況下無效的問題》

 

解決方案：

這個問題應該是支付寶基礎庫的問題，除了依賴於官方更新之外，開發者可以利用《自定義 tabBar》曲線救國

也就是創建一個空內容的自定義tabBar，這樣即使 tabBar 被渲染出來，但從視覺上也不會有問題

在 src/pages.json 文件中定義自定義tabBar（可以限制爲支付寶小程序中生效）

{
  "tabBar": {
    // #ifdef MP-ALIPAY
    "customize": true
    // #endif

    // ... 其他配置
  }
}

然後創建 src/customize-tab-bar 目錄及以下文件

 index.axml

<view class="hidden-alipay-tab-bar"></view>

index.acss

.hidden-alipay-tab-bar {
  display: none;
}

index.js

/**
 * 注意：該自定義 tab-bar 不可刪除！！！
 * 部分支付寶小程序無法使用 hideTabBar 隱藏原生 tabBar
 * 於是通過自定義一個空 tabBar 的方式隱藏
 */
Component({
  data: {},
  methods: {}
});

然後正常編譯即可，搞定收工~