Taro支付宝小程序tabbar的坑

1. CoverImage点击问题

github.com/NervJS/taro…
按照官方demo提供的写法，底部tabbar自定义，其实是用CoverView做的，CoverView里面嵌套CoverImage作为图标，
但是在点击的时候，CoverImage严格来说只是叠放到CoverView上方，并非是父子节点，所以点击到图标的时候，点击事件并不会冒泡到外层CoverView上，尝试过给内层的CoverImage加上onTap事件，CoverView加上onClick事件，点击都执行同一个函数，但是onTap没生效，点击了没反应
所以只能把CoverImage换成普通的Image，只有外层用CoverView，里层用普通的Image和View组件

2. tabbar的items数量限制

假设需求上要求不同的角色对应不同的权限，那么展示的tabbar也不一样，假设3个角色分别对应A，B，C三种Tabbar配置，每种都有4个items。
如果用Taro.switchTab去跳转的话，tab页一定得在app.config.ts中定义才可以，这种情况下，3*4=12，要定义12个tab页上去，支付宝这边只能定义5个，也就是说，A，B，C所有可能用到的tab页加起来最多5个。否则用switchTab跳转到第6个开始的页面时，会报错，且卡死

app.config.ts的tab List中配置了超出数量的tab时，点击会报错

当前同时存在多个导航调用 switchTab:pages/xxx/my/index 和 switchTab:pages/index/index，基础库不能保证调用先后顺序，请在前者调用完成后再调用

解决方案：合并了一些页面

3. tabbar 高亮选中项

根据github上以及支付宝社区的老哥们描述，调用switchTab时，其实是在新页面新生成了一个tabbar，所以对应的按钮在点击后并不会自动高亮，在tabbar组件里面setState了也没用，因为这是一个新的tabbar实例，有一些方案是用redux之类的工具全局管理高亮选中项，有一些则是用Taro.getTabbar().setState()...之类的方案(我试过了报错)

使用了recoil去做状态管理

**

import { CoverImage, CoverView, Image, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRecoilState, useRecoilValue } from 'recoil';
import { tabBarState, userState } from '@/store/store';
import {
  A_TAB_BAR,
  B_TAB_BAR,
  A_TAB_BAR_CONFIG,
  A_TAB_BAR_CONFIG,
  B_TAB_BAR,
} from '@/utils/constant';
import styles from './index.less';


const CustomTabBar = () => {
  const [selected, setSelected] = useRecoilState<any>(tabBarState);
  const userInfo = useRecoilValue(userState);

  const tabList =
    +userInfo?.userType === 2
      ? LEGAL_TAB_BAR
      : +userInfo?.switchType === 2
      ? B_TAB_BAR
      : A_TAB_BAR;
  const tabBarConfig =
    +userInfo?.userType === 2 || +userInfo?.switchType === 2
      ? A_TAB_BAR_CONFIG
      : B_TAB_BAR_CONFIG;

  const switchTab = (item, index) => {
    const url = '/' + item.pagePath;
    setSelected(index);
    Taro.switchTab({
      url,
    });
  };
  return (
    <CoverView className={styles.bottomTab}>
      {tabList.map((item, index) => {
        return (
          <CoverView
            className={styles.bottomTabItem}
            onClick={() => switchTab(item, index)}
            data-path={item.pagePath}
            key={item.text}
          >
            <View
              className={
                +userInfo?.switchType === 2 && index === 1
                  ? styles.bottomTabItemImgWrap
                  : ''
              }
            >
              <Image
                className={styles.bottomTabItemImg}
                src={selected === index ? item.selectedIconPath : item.iconPath}
              />
            </View>

            <View
              className={styles.bottomTabItemText}
              style={{
                color:
                  selected === index
                    ? tabBarConfig.selectedColor
                    : tabBarConfig.color,
              }}
            >
              {item.text}
            </View>
          </CoverView>
        );
      })}
    </CoverView>
  );
};

export default CustomTabBar;