1、简述

Taro 是由 京东·凹凸实验室 开源的一款 多端统一开发框架，核心目标是：

使用一套代码，同时开发微信小程序、H5、React Native、支付宝 / 百度 / 抖音小程序等多个平台

Taro 本质上解决的是前端开发中的一个老问题：

业务一致，但平台割裂

GitHub 地址：https://github.com/NervJS/taro

---

2、基本架构

2.1 Taro 的核心能力

能力	说明
多端支持	微信 / 支付宝 / 百度 / 抖音 / H5 / RN
技术栈	React / Vue / Vue3
统一 API	封装平台差异
编译时适配	非运行时 hack
生态完善	UI、状态管理、插件

📌 Taro 的关键优势在于“编译期多端适配”

2.2 Taro 架构简析（React 技术栈）

┌──────────────────┐
│   React / Vue    │  业务代码
└────────┬─────────┘
         │
┌────────▼─────────┐
│   Taro Runtime   │  API 抽象 / 生命周期
└────────┬─────────┘
         │
┌────────▼─────────┐
│ Compiler (CLI)   │  多端编译
└────────┬─────────┘
         │
┌────────▼─────────┐
│  小程序 / H5 / RN │
└──────────────────┘

📌 不同于 uni-app 的运行时适配，Taro 更偏工程化

---

3、安装 Taro 开发环境

Taro 项目结构解析

taro-demo/
├── src/
│   ├── pages/
│   │   └── index/
│   │       ├── index.tsx
│   │       └── index.scss
│   ├── app.tsx
│   └── app.config.ts
├── config/
│   ├── dev.ts
│   └── prod.ts
└── package.json

1️⃣ 环境要求

• Node.js ≥ 16
• npm / pnpm / yarn
• 小程序 IDE（微信开发者工具）

2️⃣ 安装 Taro CLI

安装 Taro 开发工具 @tarojs/cli

使用 npm 或者 yarn 全局安装，或者直接使用 npx

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

验证：

taro -v

3️⃣ 初始化项目

taro init taro-demo

选择示例（推荐）：

Framework: React
CSS: Sass
Compiler: Webpack5

进入项目：

$ cd taro-demo
$ npm install taro-ui

---

4、运行多端项目

1️⃣ 运行微信小程序

 npm script
$ npm run dev:weapp
# 仅限全局安装
$ taro build --type weapp --watch
# npx用户也可以使用
$ npx taro build --type weapp --watch

然后用 微信开发者工具 打开：

dist/

2️⃣ 运行 H5

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch

访问：

http://localhost:10086

3️⃣ 支付宝小程序

# npm script
$ npm run dev:alipay
# 仅限全局安装
$ taro build --type alipay --watch
# npx 用户也可以使用
$ npx taro build --type alipay --watch

---

5、基础实践

1️⃣ 页面配置（index.config.ts）

export default definePageConfig({
  navigationBarTitleText: '首页'
});

2️⃣ 页面组件（index.tsx）

import { View, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';

export default function Index() {
  return (
    <View className="index">
      <Text>Hello Taro</Text>
      <Button
        onClick={() => {
          Taro.showToast({ title: '点击成功' });
        }}
      >
        点击我
      </Button>
    </View>
  );
}

📌 无需区分平台 API，Taro 自动适配

---

6、总结

Taro 并不是“写一次永远不改”，而是在可接受的代价下，最大化代码复用率：

• 电商小程序
• 企业内部工具
• 多端内容平台
• 活动页 / H5

对于拥有 React 技术栈 + 多端需求 的团队来说，Taro 依然是一个成熟、可靠、工程化程度很高的跨端解决方案。

框架	特点
Taro	编译期多端、React 友好
uni-app	Vue 友好、生态大
Flutter	性能强、学习成本高
RN	原生体验、配置复杂

📌 React 技术栈优先选 Taro