使用多端适配方案 Taro+React+RTK(@reduxjs/toolkit)开发微信小程序及RTK使用详解

原创

已于 2024-12-22 20:58:57 修改 · 1.4k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#react #redux #typescript #状态管理 #taro #小程序 #RTK

于 2024-12-22 20:55:42 首次发布

目前可以实现多端适配，如自动适配开发微信/支付宝/百度/抖音(头条)小程序+h5+App的方案框架已经不少了，如基于 Vue 语法的 uni-app，基于 React 语法的 Remax 等。但 uni-app 开发的跨端适配App是基于Web H5 实现的，不是原生 App。可以实现开发接近原生 Android 或 IOS App 的框架，目前比较流的是基于 Vue 语法的 Weex 和基于 React 语法的 Remax。
但 Remax 目前已经停止更新维护了。
本文来说一说并简单使用一个比较成熟的基于 React 进行多端适配开发微信/支付宝/百度/抖音(头条)小程序+h5+原生App的跨端适配开发框架–京东凹凸实验室团队出品的跨端适配开发框架 Taro. Taro 意译为“芋头”，希望不是“烫手的芋头”，呵呵！

好，下面正式开始说明使用 Taro4 + React 18 + RTK 开发简单的微信小程序，目前 Taro 最新稳定版本为 v4.0.8，也已经可以支持基于 Vue 语法进行开发了。也同时支持使用 React 18 的 hooks 函数式组件，或 React 17 之前的类式组件进行开发。

一、使用 Taro4 + React18 + @reduxjs/toolkit(RTK状态管理工具) 开发的简单微信小程序样例

全局安装基于 React 的适配多端平台的小程序开发工具脚手架 @tarojs/cli，Taro 是京东凹凸实验室团队开发，目前最新正式版为v4.0.8，支持使用 React/Vue 框架语言开发：

# yarn
yarn global add @tarojs/cli
# npm
npm i @tarojs/cli -g

初始化 taro 项目工程，按提示选择 react + ts 选项

taro init taro-react-test

安装 @reduxjs/toolkit(RTK状态管理工具) + react-redux 中间件

cd taro-react-test
yarn add @reduxjs/toolkit react-redux

在项目根目录下的 project.config.json 配置文件中配置你的微信小程序的开发 appid，如下：

{
   
   
  "miniprogramRoot": "./dist",
  "projectname": "taro-react-test",
  "description": "test project.",
  "appid": "wxexxxxxnnnnnnn",
  "setting": {
   
   
    "urlCheck": true,
    "es6": false,
    "enhance": false,
    "compileHotReLoad": false,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram"
}