Taro
欢迎来到 Taro 开发知识库！
🥤 Taro 简介
Taro 是京东开源的多端统一开发框架，支持使用 React/Vue/Vue3 编写一次代码，生成能运行在微信/京东/百度/支付宝/字节跳动/QQ/飞书小程序、快应用、H5、React Native 等多个平台的应用。
🎯 适用场景
✅ 非常适合
- 多端小程序开发
- React 技术栈团队
- 需要 H5 + 小程序
- 希望使用 React 开发小程序
- 电商类应用
⚠️ 不太适合
- 纯 App 开发（Flutter/RN 更好）
- 极致性能要求
- 小团队快速原型
🎯 学习路线
第一阶段：基础入门 (1-2周)
前置要求：
- React 基础（推荐）或 Vue 基础
- ES6+ JavaScript
- 小程序基础概念
Taro 基础
- CLI 工具使用
- 项目结构
- 配置文件
内置组件
- View、Text、Image
- 表单组件
- 媒体组件
样式系统
- Taro UI
- CSS Modules
- Sass/Less
第二阶段：进阶学习 (2-3周)
React/Vue 特性
- Hooks 使用
- 组件化开发
- 生命周期
API 调用
- 网络请求
- 路由跳转
- 本地存储
跨端适配
- 多端统一
- 平台差异处理
- 条件编译
第三阶段：实战项目 (1-2个月)
状态管理
- Redux / Zustand
- Pinia（Vue）
性能优化
- 分包加载
- 按需引入
- 预加载
UI 组件库
- Taro UI
- NutUI
✨ Taro 特点
✅ 核心优势
- React 生态 - 使用 React 开发小程序
- 多端支持 - 一套代码多端运行
- 类型安全 - 完整的 TypeScript 支持
- 大厂背书 - 京东开源，生产验证
- 社区活跃 - GitHub 34k+ stars
- 生态丰富 - 组件库、插件完善
⚠️ 注意事项
- 主要面向小程序平台
- RN 支持相对较弱
- 某些高级特性受限
- 编译体积略大
📊 与其他框架对比
| 特性 | Taro | Uni-app | React Native |
|---|---|---|---|
| 框架 | React/Vue | Vue | React |
| 性能 | ⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 学习成本 | 🟢 低 | 🟢 低 | 🟡 中 |
| 小程序支持 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐ |
| TypeScript | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 社区 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 适合人群 | React 开发者 | Vue 开发者 | 原生 App |
🏗️ 项目结构
my-taro-app/
├── config/ # 编译配置
│ ├── dev.js
│ ├── prod.js
│ └── index.js
├── src/
│ ├── pages/ # 页面
│ │ ├── index/
│ │ │ ├── index.tsx
│ │ │ ├── index.module.scss
│ │ │ └── index.config.ts
│ │ └── mine/
│ ├── components/ # 组件
│ │ ├── CustomButton/
│ │ └── NavBar/
│ ├── store/ # 状态管理
│ │ ├── index.ts
│ │ └── slices/
│ ├── services/ # API 服务
│ │ └── api.ts
│ ├── utils/ # 工具函数
│ │ └── request.ts
│ ├── assets/ # 静态资源
│ ├── app.config.ts # 应用配置
│ ├── app.tsx # 应用入口
│ └── app.scss # 全局样式
├── package.json
├── tsconfig.json
└── project.config.json # 小程序配置📦 支持的平台
小程序
- 微信小程序 ⭐⭐⭐⭐⭐
- 支付宝小程序 ⭐⭐⭐⭐
- 百度小程序 ⭐⭐⭐⭐
- 字节跳动小程序 ⭐⭐⭐⭐
- QQ 小程序 ⭐⭐⭐⭐
- 京东小程序 ⭐⭐⭐⭐⭐
- 飞书小程序 ⭐⭐⭐
其他平台
- H5 ⭐⭐⭐⭐
- React Native ⭐⭐⭐
- 快应用 ⭐⭐⭐
📖 学习资源
官方资源
推荐课程
中文资源
常用库
🎯 开始学习
选择一个方向开始深入学习：
💡 学习建议
- 选择技术栈 - React 或 Vue，推荐 React + TypeScript
- 掌握小程序概念 - 了解小程序的基本概念
- 使用 Taro CLI - 命令行工具很强大
- 多端调试 - 在不同小程序平台测试
- 使用 UI 库 - Taro UI 或 NutUI
- TypeScript - 提高代码质量
🚀 第一个 Taro 项目
创建项目
bash
# 安装 Taro CLI
npm install -g @tarojs/cli
# 创建项目
taro init my-taro-app
# 选择模板
# - React (推荐)
# - Vue 3
# - TypeScript 支持Hello World 示例 (React)
tsx
// src/pages/index/index.tsx
import { Component } from 'react'
import { View, Text, Button } from '@tarojs/components'
import './index.scss'
export default class Index extends Component {
state = {
count: 0
}
increment = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
const { count } = this.state
return (
<View className='index'>
<Text className='title'>你好，Taro！</Text>
<Text className='counter'>
计数：{count}
</Text>
<Button
type='primary'
onClick={this.increment}
>
点击 +1
</Button>
</View>
)
}
}Hooks 版本
tsx
import { useState } from 'react'
import { View, Text, Button } from '@tarojs/components'
import './index.scss'
export default function Index() {
const [count, setCount] = useState(0)
return (
<View className='index'>
<Text className='title'>你好，Taro！</Text>
<Text className='counter'>
计数：{count}
</Text>
<Button
type='primary'
onClick={() => setCount(count + 1)}
>
点击 +1
</Button>
</View>
)
}样式
scss
// src/pages/index/index.scss
.index {
padding: 40px;
text-align: center;
.title {
font-size: 32px;
font-weight: bold;
margin-bottom: 60px;
}
.counter {
font-size: 24px;
margin-bottom: 40px;
display: block;
}
}运行项目
bash
# 微信小程序
npm run dev:weapp
# H5
npm run dev:h5
# 支付宝小程序
npm run dev:alipay你的第一个 Taro 项目完成了！🎉
准备好了吗？让我们用 React 开发多端小程序！