Taro+TypeScrippt 实现小程序根据不同身份的自定义tabbar

参考文章：blog.csdn.net/weixin_4386…

在src上添加如下文件夹

app.config.ts:

export default {
    pages: [
        'pages/home/home', //首页
        'pages/product/product', //精选产品
        'pages/dataWarehouse/dataWarehouse', //数据仓
        'pages/mine/mine', //我的
        'pages/login/login', //登录
    ],
    window: {
        backgroundTextStyle: 'light',
        navigationBarBackgroundColor: '#F24D44',
        navigationBarTitleText: 'xxxxx',
        navigationBarTextStyle: 'white',
    },
    tabBar: {
        custom: true,//这行很重要！！！
        color: '#111e36',
        selectedColor: '#F24D44',
        backgroundColor: '#fff',
        borderStyle: 'white',
        list: [
            {
                pagePath: 'pages/home/home',
                text: '首页',
                iconPath: './assets/images/tarBar/home.png',
                selectedIconPath: './assets/images/tarBar/home-selected.png',
            },
            {
                pagePath: 'pages/product/product',
                text: '精选产品',
                iconPath: './assets/images/tarBar/product.png',
                selectedIconPath: './assets/images/tarBar/product-selected.png',
            },
            {
                pagePath: 'pages/dataWarehouse/dataWarehouse',
                text: '数据仓',
                iconPath: './assets/images/tarBar/dataWarehouse.png',
                selectedIconPath: './assets/images/tarBar/dataWarehouse-selected.png',
            },
            {
                pagePath: 'pages/mine/mine',
                text: '我的',
                iconPath: './assets/images/tarBar/mine.png',
                selectedIconPath: './assets/images/tarBar/mine-selected.png',
            },
        ],
    }
};

index.config.ts:

export default {
  component: true,
};

index.scss:

.bottom-tab {
    position: fixed;
    display: flex;
    width: 100%;
    background: white;
    box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.03);
    bottom: 0;
    padding: 10px 0 calc(15rpx + env(safe-area-inset-bottom)) 0;
    //   padding-bottom: env(safe-area-inset-bottom);
    &-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &-img {
            margin: 10px auto 10px;
            width: 40px;
            height: 40px;
        }
        &-text {
            font-size: 20px;
            font-family: PingFangSC, PingFangSC-Regular;
            color: #a5a1b1;
            line-height: 20px;
            height: 24px;
        }
    }
}

index.tsx:

import { useEffect } from 'react';
import Taro from '@tarojs/taro';
import { CoverView, CoverImage } from '@tarojs/components';
import { useStore, observer } from '@store';
import './index.scss';
import { isTypes } from '@utils';
import homeIcon from '@assets/images/tarBar/home.png';
import homeSelectIcon from '@assets/images/tarBar/home-selected.png';

import productIcon from '@assets/images/tarBar/product.png';
import productSelectIcon from '@assets/images/tarBar/product-selected.png';

import dataIcon from '@assets/images/tarBar/dataWarehouse.png';
import dataSelectIcon from '@assets/images/tarBar/dataWarehouse-selected.png';

import mineIcon from '@assets/images/tarBar/mine.png';
import mineSelectIcon from '@assets/images/tarBar/mine-selected.png';

const customTabBar = () => {
  const { CommonStore } = useStore();
  const isWxwork = isTypes.isWxwork();
  const { selectedIndex, setSelectedIndex, setMyTabbar, myTabbar } = CommonStore;
  const stateC = {
    color: '#A5A1B1',
    selectedColor: '#F24D44',
    list: [
      {
        pagePath: 'pages/home/home',
        text: '首页',
        iconPath: homeIcon,
        selectedIconPath: homeSelectIcon,
      },
      {
        pagePath: 'pages/mine/mine',
        text: '我的',
        iconPath: mineIcon,
        selectedIconPath: mineSelectIcon,
      },
    ],
  };
  const stateB = {
    color: '#A5A1B1',
    selectedColor: '#F24D44',
    list: [
      {
        pagePath: 'pages/home/home',
        text: '首页',
        iconPath: homeIcon,
        selectedIconPath: homeSelectIcon,
      },
      {
        pagePath: 'pages/product/product',
        text: '精选产品',
        iconPath: productIcon,
        selectedIconPath: productSelectIcon,
      },
      {
        pagePath: 'pages/dataWarehouse/dataWarehouse',
        text: '数据仓',
        iconPath: dataIcon,
        selectedIconPath: dataSelectIcon,
      },
    ],
  };
  const getTabBar = () => {
    if (isWxwork) {
    //企业微信
      setMyTabbar(stateB);
    } else {
    //微信
      setMyTabbar(stateC);
    }
  };

  useEffect(() => {
    getTabBar();
  }, [isWxwork]);

  const switchTab = (item, index) => {
    setSelectedIndex(index);
    const url = '/' + item.pagePath;
    Taro.switchTab({
      url,
    });
  };

  return (
    <CoverView className='bottom-tab'>
      {myTabbar?.list.map((item, index) => {
        return (
          <CoverView className='bottom-tab-item' key={item.text} onClick={() => switchTab(item, index)}>
            <CoverImage
              className='bottom-tab-item-img'
              src={selectedIndex === index ? item.selectedIconPath : item.iconPath}
            />
            <CoverView
              className='bottom-tab-item-text'
              style={{ color: selectedIndex === index ? myTabbar.selectedColor : myTabbar.color }}
            >
              {item.text}
            </CoverView>
          </CoverView>
        );
      })}
    </CoverView>
  );
};
export default observer(customTabBar);

//isTypes.ts
// 是否在企业微信打开
const isWxwork = () => {
  let result = false;
  const res = Taro.getSystemInfoSync();
  if (res.environment === 'wxwork') {
    result = true;
  }
  return result;
};
export default {
  isWxwork
};

common.ts:

import { observable, action } from 'mobx';
class CommonStore {
    @observable selectedIndex: number = 0;
    @observable myTabbar: any = null;

    @action.bound
    setSelectedIndex(value) {
        this.selectedIndex = value;
    }
    @action.bound
    setMyTabbar(value) {
        this.myTabbar = value;
    }
}

export default new CommonStore();
export interface ICommonStore extends CommonStore { }

结果： 企业微信端（B端） 微信端（C端）

这么做会有一个不可避免的问题就是第一次点击的时候会闪。 还有一个就是当点击第二个tab时退出小程序下一次进入小程序的时候页面是首页但是选中tab项是上一次退出的第二个tab，可以这样解决：在每一个tab页都监听，要是处于该页面就将index设置为该页面的index