使用 Taro + React 开发微信小程序

主要记录下 Taro + React 创建微信小程序的过程 及 自定义 tabbar 遇到的问题及解决方案。

一、新建项目

创建项目前先用以下命令全局安装 @tarojs/cli

npm install -g @tarojs/cli

使用下面命令创建项目

taro init myApp

然后选择对应的框架，我这边项目选择的是 React + TypeScript + Sass + Webpack4，项目创建完成。

二、启动项目

1.执行 cd myApp 进入新建的项目目录；

2.执行taro build --type weapp 生成对应的 dist 文件，如下图所示，就能看到 Hello world!；

三、tabbar 自定义

默认 tabbar 在 app.config.ts 文件中配置如下内容：

export default defineAppConfig({
  pages: [
    'pages/index/index',
    'pages/my/index',
    'pages/cart/index',
    'pages/category/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  },
  tabBar: {
    custom: false, // 该属性默认时也可以不写
    color: "#000000",
    selectedColor: "#A4462A",
    list: [
      {
        pagePath: "pages/index/index",
        iconPath: "images/icon_home_grey@2x.png",
        selectedIconPath: "images/icon_home_red@2x.png",
        text: "首页"
      },
      {
        pagePath: "pages/category/index",
        iconPath: "images/icon_list_grey@2x.png",
        selectedIconPath: "images/icon_list_red@2x.png",
        text: "分类"
      },
      {
        pagePath: "pages/cart/index",
        iconPath: "images/icon_shoppingbag_grey@2x.png",
        selectedIconPath: "images/icon_shoppingbag_red@2x.png",
        text: "购物车"
      },
      {
        pagePath: "pages/my/index",
        iconPath: "images/icon_my_grey@2x.png",
        selectedIconPath: "images/icon_my_red@2x.png",
        text: "我的"
      }
    ]
  }
})

效果如下图所示：

那么我们想要实现在定义的 tabbar 应该怎么做呢？

将 tabbar 中的 custom: false 改为 custom: true
效果如下：

这时候呢，我们需要在 pages 同级新建文件夹 custom-tab-bar，在该文件中实现自己想要的样式；
效果如下：

点击切换如下所示，这效果似乎不太对劲？？？

那我们怎么去解决这个问题呢？
在原生小程序中，我们使用如下代码：

if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0, // selected 表示当前点击后的 icon
      })
 }

在 Taro + React 中用以下代码来实现

import { View, Text } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'
import type CustomTabBar from '../../custom-tab-bar'

import { useMemo } from 'react'
import './index.scss'

export default function Index() {
  const page = useMemo(() => Taro.getCurrentInstance().page, [])
  useDidShow(() => {
    const tabbar = Taro.getTabBar<CustomTabBar>(page)
    tabbar?.setSelected(0)
  })

  return (
    <View className='index'>
      <Text>Hello world!</Text>
    </View>
  )
}

在其他的几个页面也加入以下代码

// 函数式组件 使用如下
const page = useMemo(() => Taro.getCurrentInstance().page, [])

useDidShow(() => {
  const tabbar = Taro.getTabBar<CustomTabBar>(page)
  tabbar?.setSelected(currentIndex) // currentIndex 表示点击的第几个，页面对应第几个就写几
})

//类组件使用如下
pageCtx = Taro.getCurrentInstance().page

componentDidShow () {
  const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx)
  tabbar?.setSelected(0)
}

加入后效果如下：

这时候我们发现切换就好啦，第一次切换时会闪烁，这个暂时没发现有什么办法可以解决。

以上一个简单的项目基本完成了。