Taro+React+TS+Redux+Taro UI项目

Taro+React+TS+Redux+Taro UI项目

初始化搭建Taro项目

全局安装@tarojs/cli，或者直接使用 npx

这里是全局安装方法，终端输入命令：

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

查看 Taro 全部版本信息

终端可以使用 npm info 查看 Taro 版本信息，在这里你可以看到当前最新版本

npm info @tarojs/cli

如下图：

初始化项目

使用命令创建模板项目：

$ taro init myApp

如下图：

根据自己项目所需要，输入并选择相关内容
如下图：

此时初始化项目成功
如下图：

补充：npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目：

$ npx @tarojs/cli init myApp

编译运行Taro项目

这里以微信小程序为例，其他平台请参考Taro文档
Taro文档编译运行地址：Taro文档编译运行

微信小程序编译命令

# yarn
$ yarn dev:weapp
$ yarn build:weapp

# npm script
$ npm run dev:weapp
$ npm run build:weapp

# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp

# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

# watch 同时开启压缩
$ set NODE_ENV=production && taro build --type weapp --watch # CMD
$ NODE_ENV=production taro build --type weapp --watch # Bash

操作步骤

因为是微信小程序，所有要先下载微信开发者工具
打开微信开发者工具，选择小程序，选择导入，此时选择刚才我们初始化创建的Taro项目

填写AppId，选择需求内容，勾选协议，点击确定
如下图：

此时微信开发者工具是这样的

使用VSCode打开刚才创建的Taro项目，进入该文件夹下，打开终端输入命令运行项目

taro build --type weapp --watch

如下图：
VSCode

微信开发者工具

Taro项目配置Redux

想在Taro项目中使用Redux，以前写React项目用到一个很好用的插件，所以这次还是使用该方法，其他小伙伴想正常配置请移步Taro文档。

下载依赖

终端输入

yarn add @reduxjs/toolkit @tarojs/redux react-redux

创建redux文件夹

在src文件夹中创建redux文件夹
redux文件夹目录如下：

index.ts文件：

// 使用rtk(reduxToolKit)官方推荐写法，降低代码复制性，其中集成createAsyncThunk类似redux-thunk可进行接口异步调用
import { configureStore } from "@reduxjs/toolkit";
import testSlice from "./features/testSlice";

// configureStore创建一个redux数据
const store = configureStore({
  // 合并多个Slice
  reducer: {
    test: testSlice,
  },
});

export default store;

testSlice.ts文件：

//使用案例
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export interface TestState {
  data: object;
  title: string;
}
const initialState: TestState = {
  data: [],
  title: "获取所有数据",
};

//@ts-ignore
const getDataApi = () => getAllData().then((res: any) => res.json);
// thunk函数允许执行异步逻辑, 通常用于发出异步请求。
// createAsyncThunk 创建一个异步action，方法触发的时候会有三种状态：
// pending（进行中）、fulfilled（成功）、rejected（失败）
export const getData = createAsyncThunk("getAllData", async () => {
  const res = await getDataApi();
  return res;
});

// 创建一个 Slice
export const testSlice = createSlice({
  // 命名空间，name会作为action type的前缀
  name: "test",
  // 初始化状态
  initialState,
  // 1、定义reducer更新状态的函数
  // 2、组件中dispatch使用的action函数
  reducers: {
    // 数据请求完触发
    loadDataEnd: (state, { payload }) => {
      state.data = payload;
      state.title = "获取到数据啦";
      console.log("数据请求完触发");
    },
  },
  // extraReducers 字段让 slice 可以处理在别处定义的 actions，
  // 包括由 createAsyncThunk或其他slice生成的actions。
  extraReducers(builder) {
    builder
      .addCase(getData.pending, (state) => {
        console.log("🚀 ~ 进行中！");
      })
      .addCase(getData.fulfilled, (state, { payload }) => {
        state.data = payload;
        state.title = "获取到数据啦fulfilled";
        console.log("🚀 ~ fulfilled", payload);
      })
      .addCase(getData.rejected, (state, err) => {
        console.log("🚀 ~ rejected", err);
      });
  },
});
// 导出action函数
export const { loadDataEnd } = testSlice.actions;
// 导出reducer，创建store
export default testSlice.reducer;

修改入口文件app.ts

import { Provider } from "react-redux";
// 假设我们要使用 Redux
import store from "./redux";
// 全局样式
import "./app.less";

function App(props) {
  return (
    <Provider store={store}>
      {/* props.children 是将要被渲染的页面 */}
      {props.children}
    </Provider>
  );
}

export default App;

如下图：

创建home页面，修改home页面内容：

import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { View, Text } from '@tarojs/components'
import './index.less'

export default function Index() {
  // 获取redux
  const test: any = useSelector((state: any) => state);
  // 抛发
  const dispatch = useDispatch();
  useEffect(() => {
    console.log(test, "redux")
  }, [])

  return (
    <View className='home'>
      <Text>home</Text>
    </View>
  )
}

如下图：

在app.config.ts文件下添加路径：

export default defineAppConfig({
  pages: ["pages/home/index", "pages/index/index"],
  window: {
    backgroundTextStyle: "light",
    navigationBarBackgroundColor: "#fff",
    navigationBarTitleText: "WeChat",
    navigationBarTextStyle: "black",
  },
});

如图：

此时打印如下：

问题

配置Redux报错

第一次使用Taro，想要在Taro里使用redux，看文档配置了很多次入口文件，每次都是报同一个错误。
错误：“Provider”表示值，但在此处用作类型。是否指“类型 Provider”?


解决办法：将入口文件后缀名改成tsx

此时问题就解决了。

Taro项目配置Taro UI

Taro UI文档地址：Taro UI文档

安装Taro UI

命令：

npm install taro-ui

配置需要额外编译的源码模块
由于引用 node_modules 的模块，默认不会编译，所以需要额外给 H5 配置 esnextModules，在 taro 项目的 config/index.js 中新增如下配置项：

h5: {
  esnextModules: ['taro-ui']
}

Taro UI引入组件样式

入口文件App.tsx

import 'taro-ui/dist/style/index.scss' // 全局引入一次即可
import { Provider } from "react-redux";
// 假设我们要使用 Redux
import store from "./redux";
// 全局样式
import "./app.less";

function App(props) {
  return (
    <Provider store={store}>
      {/* props.children 是将要被渲染的页面 */}
      {props.children}
    </Provider>
  );
}

export default App;

Taro UI引入组件案例

home.tsx文件：

import Taro from "@tarojs/taro";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { View, Text } from "@tarojs/components";
import { AtSwipeAction } from "taro-ui";
import "./index.less";

export default function Index() {
  // 获取redux
  const test: any = useSelector((state: any) => state);
  // 抛发
  const dispatch = useDispatch();
  useEffect(() => {
    console.log(test, "redux");
  }, []);

  return (
    <View className='home'>
      <Text>home</Text>
      <AtSwipeAction
        // maxDistance={140} // 按钮宽度 * 个数
        // areaWidth={Taro.getSystemInfoSync().windowWidth * 1} //动态获取不同设备宽度
        options={[
          {
            text: "取消",
            style: {
              backgroundColor: "#6190E8",
            },
          },
          {
            text: "确认",
            style: {
              backgroundColor: "#FF4949",
            },
          },
        ]}
      >
        <View className='normal'>AtSwipeAction 一般使用场景</View>
      </AtSwipeAction>
    </View>
  );
}

预览内容如下：

Taro UI引入组件问题

各位安装的时候一定注意版本问题！！！不然一定会报各种各样的错误，甚至没有错误组件却不会显示。
我的Taro版本是v3.6.8

下载的Taro UI版本是3.0.0-alpha.3

"taro-ui": "3.0.0-alpha.3"