【小程序】自定义tabbar踩坑

前言

• 最近做个小程序又用上了自定义tabbar，和上一次使用自定义tabbar已经间隔很久了，这次又踩了些新的经验。

自定义tabbar真机调试或者预览不显示

• 在开发工具上看一切正常，结果去真机调试或者预览就不显示了。
• 注意！真机调试不显示是正常情况，预览不显示就不正常，请使用预览查看自定义tabbar显示情况。只要预览能显示，那么发体验版在体验版就能看见。
• 如果2者都不显示，请注意是否使用了除CoverView与CoverImage以外的标签，如果使用这2以外的标签，是看不见效果，虽然开发工具那模拟机能看见。

自定义tabbar状态更新异常

• 这个是我在用taro时制作发现的，将currentIndex存入store，之后切换会产生问题，一共3个按钮前2个都正常，点击第三个就会跳到第一个去。就算强制刷新也不行。后来发现是单组件connect与hooks混用造成的bug。解决方法就是全套使用类组件或者函数组件。

• 自定义tabbar切换还需要个隐藏的api，否则当别的页面跳回来容易不进行高亮：

wx.onAppRoute((route) => {
  const res = tabbarPaths.findIndex((v) => v === route.path);
  if (res > -1) {
    store.dispatch(switchTab(res));
  } else {
    store.dispatch(switchTab(-1));
  }
});