基于 Taro 技术栈搭建的跨端客户端脚手架
一、项目背景
接手的项目各个技术栈不同，有原生微信小程序，有flutter开发的客户端，有uniapp开发的客户端，现在想统一技术栈，为什么选择Taro不是uniapp，主要是因为ReactNative。
二、技术栈选型
- Taro 3.x：京东凹凸实验室开源的跨端开发框架
- React 18：用于构建用户界面的 JavaScript 库
- TypeScript：添加了类型系统的 JavaScript 超集
- NutUI：京东风格的轻量级移动端组件库
- Redux Toolkit：Redux 官方推荐的工具集
- Pnpm：高性能的包管理工具
三、项目结构设计
├── config # 项目配置文件
│ ├── dev.js # 开发环境配置
│ ├── index.js # 基础配置
│ └── prod.js # 生产环境配置
├── src # 源码目录
│ ├── api # API 接口
│ ├── assets # 静态资源
│ ├── components # 公共组件
│ ├── constants # 常量定义
│ ├── models # 模型定义
│ ├── hooks # 自定义 Hooks
│ ├── pages # 页面文件
│ ├── service # 业务处理
│ ├── store # 状态管理
│ ├── types # TypeScript 类型定义
│ ├── utils # 工具函数
│ └── app.tsx # 应用入口
四、关键技术实现
1. 多端适配策略
// 条件编译示例
import { Platform } from '@tarojs/service'
// #ifdef WEAPP
console.log('微信小程序环境')
// #endif
// #ifdef TT
console.log('抖音小程序环境')
// #endif
2. 状态管理方案
// store/index.ts
import { configureStore } from '@reduxjs/toolkit'
import userReducer from './slices/user'
export const store = configureStore({
reducer: {
user: userReducer
}
})
3. 网络请求封装
// utils/request.ts
import Taro from '@tarojs/taro'
const request = async (options) => {
try {
const response = await Taro.request({
url: BASE_URL + options.url,
method: options.method,
data: options.data,
header: {
'content-type': 'application/json',
...options.header
}
})
return response.data
} catch (error) {
console.error('请求错误：', error)
throw error
}
}
五、最佳实践与注意事项
1. 组件库使用规范
- NutUI 图标组件引入顺序问题
// ✅ 正确示例
import { ArrowRight } from '@nutui/icons-react-taro'
import { Button } from '@nutui/nutui-react-taro'
// ❌ 错误示例
import { Button } from '@nutui/nutui-react-taro'
import { ArrowRight } from '@nutui/icons-react-taro'
2. 平台差异处理
- 抖音小程序 AbortController 兼容性问题
- 微信小程序热重载配置注意事项
3.注意点
如果报如下警告
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/.pnpm/css-loader@7.1.2_webpack@5.78.0_@swc+core@1.3.96_/node_modules/css-loader/dist/cjs.js
??ruleSet[1].rules[4].oneOf[0]
.use[1]!./node_modules/.pnpm/postcss-loader@8.1.1_postcss@8.4.49_typescript@5.7.3_webpack@5.78.0_@swc+core@1.3.96_/node_modules/postcss-loader/dist/cjs.js
??ruleSet[1].rules[4].oneOf[0]
.use[2]!./node_modules/.pnpm/@nutui+icons-react-taro@2.0.1/node_modules/@nutui/icons-react-taro/dist/style_icon.css
- couldn't fulfill desired order of chunk group(s) pages/user/index
- while fulfilling desired order of chunk group(s) pages/index/index, pages/category/index, pages/order/index
原因是
import { ArrowRight } from '@nutui/icons-react-taro'
import引入顺序有问题，因为在这个语句的前面有引入其他的组件，其他的组件里也使用了@nutui/icons-react-taro，所以会报这个警告，只需要把import { ArrowRight } from '@nutui/icons-react-taro'放到最前面就可以了。
4.坑点
taro的mock插件没有适配最新版，不能新建mock目录，已经适配了最新版的插件可自行编译https://github.com/javajeans/taro-plugin-mock
六、构建与部署
# 安装依赖
pnpm install
# 开发环境
pnpm dev:weapp # 微信小程序
pnpm dev:tt # 抖音小程序
pnpm dev:h5 # H5
# 生产环境
pnpm build:weapp
pnpm build:tt
pnpm build:h5
七、性能优化建议
- 合理使用条件编译
- 组件按需加载
- 图片资源压缩
- 避免不必要的重渲染
八、总结
通过 Taro 技术栈，我们成功搭建了一套可维护、可扩展的跨端开发脚手架。该脚手架具有以下特点：
- 统一的开发体验
- 完善的工程化配置
- 规范的代码风格
- 丰富的组件库支持
- 灵活的状态管理
评论