Taro：多端混合开发框架的探索

“ 一套代码，多端运行。”

Taro：多端混合开发框架的探索

Taro是什么

Taro 是一个开放式跨端跨框架解决方案，旨在简化开发者在不同平台上构建应用的过程，使开发者能够通过编写一套代码，同时在多个平台上运行应用。支持使用 React/Vue/Nerv 等框架来开发微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书小程序 / H5 / RN 等应用。由京东·凹凸实验室开发，于2018年6月开源。截至2024年8月，GitHub已有35k+ Star。

Taro GitHub：

https://github.com/NervJS/taro

Taro如何使用

安装node

Taro 项目基于 node，请确保已具备较新的 node 环境（>=12.0.0），推荐使用 node 版本管理工具 nvm 来管理 node，这样不仅可以很方便地切换 node 版本。

安装Taro Cli工具

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


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


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

初始化项目

创建一个模板项目，初始化过程中，可自定义选择使用的框架，如React、Vue。

D:RIO	rain>taro init myTaroApp
 Taro v4.0.4


Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper


? 请输入项目介绍 train
? 请选择框架 React
? 是否需要使用 TypeScript ？Yes
? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
? 请选择包管理工具 yarn
? 请选择编译工具 Vite
? 请选择模板源 CLI 内置默认模板


✔ 创建项目: myTaroApp
✔ 创建文件: D:RIO	rainmyTaroAppabel.config.js
✔ 创建文件: D:RIO	rainmyTaroAppconfig/dev.ts
✔ 创建文件: D:RIO	rainmyTaroAppconfig/index.ts
✔ 创建文件: D:RIO	rainmyTaroAppconfig/prod.ts
✔ 创建文件: D:RIO	rainmyTaroApppackage.json
✔ 创建文件: D:RIO	rainmyTaroAppproject.config.json
✔ 创建文件: D:RIO	rainmyTaroAppsrc/app.config.ts
✔ 创建文件: D:RIO	rainmyTaroAppsrc/app.scss
✔ 创建文件: D:RIO	rainmyTaroAppsrc/app.ts
✔ 创建文件: D:RIO	rainmyTaroAppsrc/index.html
✔ 创建文件: D:RIO	rainmyTaroAppsrc/pages/index/index.config.ts
✔ 创建文件: D:RIO	rainmyTaroAppsrc/pages/index/index.scss
✔ 创建文件: D:RIO	rainmyTaroAppsrc/pages/index/index.tsx
✔ 创建文件: D:RIO	rainmyTaroApp	sconfig.json
✔ 创建文件: D:RIO	rainmyTaroApp	ypes/global.d.ts
✔ 创建文件: D:RIO	rainmyTaroApp.editorconfig
✔ 创建文件: D:RIO	rainmyTaroApp.env.development
✔ 创建文件: D:RIO	rainmyTaroApp.env.production
✔ 创建文件: D:RIO	rainmyTaroApp.env.test
✔ 创建文件: D:RIO	rainmyTaroApp.eslintrc
✔ 创建文件: D:RIO	rainmyTaroApp.gitignore


✔ 初始化 git 成功
执行安装项目依赖 yarn install, 需要一会儿...

至此，项目创建成功。

目录结构

myTaroApp/
|-- config/                  # 配置文件夹
|   |-- dev.js               # 开发环境配置
|   |-- index.js             # 默认配置
|   |-- prod.js              # 生产环境配置
|-- dist/                    # 构建输出目录
|-- node_modules/            # 依赖模块目录
|-- src/                     # 源代码目录
|   |-- assets/              # 静态资源（如图片、字体等）
|   |-- components/          # 组件目录
|   |-- pages/               # 页面目录
|       |-- index/           # index 页面
|           |-- index.jsx    # index 页面逻辑
|           |-- index.css    # index 页面样式
|           |-- index.config.js  # index 页面配置文件
|   |-- app.jsx              # 项目入口文件
|-- .editorconfig            # 编辑器配置
|-- .eslintrc.js             # ESLint 配置
|-- .gitignore               # Git 忽略文件配置
|-- package.json             # 项目配置文件
|-- project.config.json      # 小程序配置文件
|-- README.md                # 项目文档