⚡ 30 秒速记
- 核心判断：小程序通过逻辑层、渲染层与宿主桥接实现跨端运行，通信与序列化成本决定交互上限
- 原理主线：围绕 「一、Taro 的安装与使用」、「二、Taro 开发说明与注意事项」、「三、Taro 设计思想及架构」 建立输入、状态变化与输出之间的因果关系
- 文章范围：介绍了 Taro 框架的原理、安装方法、项目初始化流程，以及如何编译和预览多端小程序，帮助开发者快速上手并理解 Taro 的核心机制。
- 边界与代价：不同平台组件、线程模型和包体限制并不完全一致，跨端抽象无法抹平所有能力差异
- 工程落地：实现时控制跨层数据量、拆分包体、减少频繁 setData，并在目标真机验证
Taro 的跨端运行依赖逻辑层、渲染层和宿主环境之间的桥接，通信及序列化成本会直接影响交互上限。 工程上可以通过 @tarojs/cli 创建项目，再针对微信小程序等目标端完成编译和预览。由于文中实现对应特定版本，我一般会先确认工具主版本，并用实际交互验证正常路径和边界行为。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。
# 一、Taro 的安装与使用
# 1.1 安装
$ npm install -g @tarojs/cli
taro -V
# 1.2 使用
使用命令创建模板项目
$ taro init myApp
# 1.2.1 微信小程序
选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览
微信小程序编译预览及打包
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 1.2.2 百度小程序
选择百度小程序模式，需要自行下载并打开百度开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览
百度小程序编译预览及打包
# npm script
$ npm run dev:swan
$ npm run build:swan
# 1.2.3 支付宝小程序
选择支付宝小程序模式，需要自行下载并打开支付宝小程序开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览
支付宝小程序编译预览及打包：
# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 1.2.4 H5
H5 编译预览及打包：
