Taro+TypeScrippt implements applets that customize tabbars based on different identities

Reference article: blog.csdn.net/weixin_4386…

Add the following folder to SRC

app.config.ts:

export default {
    pages: [
        'pages/home/home'./ / home page
        'pages/product/product'.// Select products
        'pages/dataWarehouse/dataWarehouse'./ / data warehouse
        'pages/mine/mine'./ / to me
        'pages/login/login'./ / login].window: {
        backgroundTextStyle: 'light'.navigationBarBackgroundColor: '#F24D44'.navigationBarTitleText: 'xxxxx'.navigationBarTextStyle: 'white',},tabBar: {
        custom: true.// This line is important!!
        color: '#111e36'.selectedColor: '#F24D44'.backgroundColor: '#fff'.borderStyle: 'white'.list: [{pagePath: 'pages/home/home'.text: 'home'.iconPath: './assets/images/tarBar/home.png'.selectedIconPath: './assets/images/tarBar/home-selected.png'}, {pagePath: 'pages/product/product'.text: 'Selected Products'.iconPath: './assets/images/tarBar/product.png'.selectedIconPath: './assets/images/tarBar/product-selected.png'}, {pagePath: 'pages/dataWarehouse/dataWarehouse'.text: 'Data warehouse'.iconPath: './assets/images/tarBar/dataWarehouse.png'.selectedIconPath: './assets/images/tarBar/dataWarehouse-selected.png'}, {pagePath: 'pages/mine/mine'.text: 'I'.iconPath: './assets/images/tarBar/mine.png'.selectedIconPath: './assets/images/tarBar/mine-selected.png',},],}};Copy the code

index.config.ts:

export default {
  component: true};Copy the code

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; }}}Copy the code

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: 'home'.iconPath: homeIcon,
        selectedIconPath: homeSelectIcon,
      },
      {
        pagePath: 'pages/mine/mine'.text: 'I'.iconPath: mineIcon,
        selectedIconPath: mineSelectIcon,
      },
    ],
  };
  const stateB = {
    color: '#A5A1B1'.selectedColor: '#F24D44'.list: [{pagePath: 'pages/home/home'.text: 'home'.iconPath: homeIcon,
        selectedIconPath: homeSelectIcon,
      },
      {
        pagePath: 'pages/product/product'.text: 'Selected Products'.iconPath: productIcon,
        selectedIconPath: productSelectIcon,
      },
      {
        pagePath: 'pages/dataWarehouse/dataWarehouse'.text: 'Data warehouse'.iconPath: dataIcon,
        selectedIconPath: dataSelectIcon,
      },
    ],
  };
  const getTabBar = () = > {
    if (isWxwork) {
    // Enterprise wechat
      setMyTabbar(stateB);
    } else {
    / / WeChatsetMyTabbar(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);
Copy the code

//isTypes.ts
// Whether to open in the enterprise wechat
const isWxwork = () = > {
  let result = false;
  const res = Taro.getSystemInfoSync();
  if (res.environment === 'wxwork') {
    result = true;
  }
  return result;
};
export default {
  isWxwork
};
Copy the code

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 { }

Copy the code

Results: Enterprise wechat terminal (B-terminal)Wechat terminal (C-terminal)

One of the inevitable problems with this is that it flashes on the first click. Click on the second TAB to exit the applet. Next time you enter the applet, the page is the home page, but the TAB TAB is the second TAB that you left last time