适读人群 ：从事前端开发，期望通过Taro解决多端小程序、H5和App开发问题的开发者

★ Taro多端开发市面首著

★ 深入学习使用Taro，玩转跨端跨框架开发

★ 支持使用 React/Vue/Nerv等框架

★ 一处代码，多处运行

★ 快速开发微信/京东/百度/支付*/字节跳动/ QQ小程序/H5/React Native等应用

★ 从基础到实战，全方位讲解Taro知识点与多端开发思路

《Taro多端开发权威指南：小程序、H5与App高效开发实战》详细介绍了使用 Taro 进行多端开发所需要掌握的知识点。本书由浅入深，介绍了 ES 6 常用语法、Taro 基本用法、数据交互、Hooks 解耦状态与视图、多端开发、Taro UI 使用、插件的使用、性能优化与Taro 原理剖析，最后以一个项目串联知识点，带读者一窥从项目搭建，到需求评审与开发，再到性能优化，最终部署上线的整个流程，直至完成一个完整的 Taro 多端开发项目。

《Taro多端开发权威指南：小程序、H5与App高效开发实战》示例丰富、注重实战，适用于从零开始学习 Taro 开发的初学者、希望更全面深入理解 Taro 的开发者。同时由于 Taro 与 React 语法相近，因此本书介绍的很多开发思想和实践经验同样适用于 React开发者。

李佩忠，资深前端工程师，专注于大前端技术，热衷开源，运营公众号“JavaScript全栈”，拥有丰富的 Web 前端开发、数据可视化与移动端开发经验，对 Taro 多端开发、移动端开发及 React 技术栈有深入的理解和实践经验。

58同城及安居客业务有众多的小程序场景，涵盖了市面上主流的小程序平台。我们采用 Taro 来实现大部分跨端开发需求，实践下来可以有效提升业务开发效率。

Taro 是一个较为成熟的跨端框架，可用来开发大部分业务，基本上可以做到开箱即用，远比直接使用小程序原生代码开发简单。

本书详细介绍了使用 Taro 进行多端开发的方方面面，表述层次非常清晰，内容由浅入深，同时结合了大量业务实践案例，仔细阅读后收获颇多。相信本书可以帮助到想要或者正在使用 Taro 的工程师。

作者提到的 Taro 3 React Native 部分，目前正由我们团队开发，并将很快同大家见面。期待 Taro 框架越做越出色。

—— 陈志庆，58同城前端架构师，技术委员会前端通道成员

京喜作为深度使用 Taro 进行多端开发的大型电商应用，伴随着 Taro 走过了成长期和成熟期。由于占据着微信和手机 QQ 一级购物入口，为海量用户提供服务，京喜在性能、体验等各方面要求极为苛刻，我们打磨产品过程中的一些实践在本书中有很好的体现。无论你的项目规模大小，这都是一本值得一读的佳作。

—— 桂永红，京喜项目前端负责人

多小程序、多代码导致研发ROI偏低，重复输出多，成长慢。Taro是业内非常成熟的多端解决方案，我一路见证了其从0到1的蜕变，相信本书能很好地帮助前端开发工程师全面了解多端研发一体化。

—— 许世超，网易严选前端负责人

第1章 初识Taro 1

1.1 Taro介绍 2

1.1.1 简介 2

1.1.2 特性 2

1.1.3 Taro UI 4

1.1.4 其他 5

1.2 ES 6常用语法简介 5

1.2.1 变量定义新方式——let、const 5

1.2.2 告别字符串拼接——模板字符串 7

1.2.3 优雅获取数组或对象中的值——解构赋值 8

1.2.4 二次元函数——箭头函数 9

1.2.5 异步处理——Promise 9

1.2.6 面向对象编程——class 11

1.2.7 模块化——import、export 12

1.3 开发环境及工具介绍 12

1.3.1 安装Taro脚手架工具 12

1.3.2 初始化项目 13

1.3.3 运行项目 13

1.3.4 打包项目 15

1.3.5 Taro脚手架命令 15

1.4 规范约定 18

1.4.1 项目组织 18

1.4.2 JavaScript / TypeScript书写规范 19

1.4.3 组件及JSX书写规范 20

1.5 本章小结 21

第2章 Taro基础 22

2.1 JSX 23

2.1.1 JSX简介 23

2.1.2 JSX语法 23

2.2 组件化 25

2.2.1 初识组件 26

2.2.2 组件定义 27

2.2.3 props 29

2.2.4 state 30

2.2.5 样式 31

2.3 组件生命周期 33

2.3.1 组件挂载 34

2.3.2 组件更新 34

2.3.3 组件卸载 35

2.4 事件处理 36

2.5 路由功能 40

2.6 实战案例：受控与非受控Input组件 42

2.7 本章小结 44

第3章 Taro进阶 45

3.1 组件设计 46

3.2 组件通信 47

3.2.1 父子组件通信 47

3.2.2 兄弟组件通信 49

3.2.3 更复杂的组件通信 49

3.3 服务端通信 52

3.3.1 Taro.request 52

3.3.2 请求终止 54

3.3.3 请求拦截器 55

3.4 使用Ref 56

3.5 本章小结 59

第4章 集中状态管理 60

4.1 Redux 61

4.1.1 Redux 设计理念 61

4.1.2 在Taro中使用Redux 63

4.1.3 Redux 案例 65

4.2 MobX 69

4.2.1 MobX 设计理念 69

4.2.2 在Taro中使用MobX 69

4.3 本章小结 73

第5章 Hooks 74

5.1 Hooks 简介 75

5.1.1 class组件的不足 75

5.1.2 Hooks概览 76

5.1.3 Hooks规则 80

5.2 Hooks基础 80

5.2.1 useState 81

5.2.2 useEffect 81

5.2.3 useReducer 83

5.2.4 useCallback 85

5.2.5 useMemo 86

5.2.6 useRef 87

5.2.7 useContext 88

5.2.8 其他Hooks 88

5.3 自定义Hooks 91

5.4 本章小结 94

第6章 多端开发 95

6.1 编译配置与约定 96

6.1.1 编译配置 96

6.1.2 设计稿与尺寸单位约定 98

6.2 多端开发方案 100

6.2.1 内置环境变量 100

6.2.2 统一接口的多端文件 101

6.2.3 指定解析 node_modules 包中的多端文件 103

6.3 多端同步调试与打包 104

6.4 本章小结 105

第7章 Taro UI 106

7.1 安装及使用 107

7.1.1 快速上手 107

7.1.2 自定义主题 108

7.2 组件介绍 110

7.3 本章小结 111

第8章 插件机制 112

8.1 插件机制简介 113

8.2 插件使用 115

8.3 自定义插件 117

8.3.1 插件结构 117

8.3.2 插件使用场景 117

8.3.3 插件环境变量 120

8.3.4 插件方法 122

8.4 本章小结 127

第9章 性能优化与原理剖析 128

9.1 性能优化 129

9.1.1 Prerender 129

9.1.2 虚拟列表 133

9.1.3 组件更新条件 134

9.2 Taro框架原理 135

9.2.1 Taro框架结构分析 136

9.2.2 Taro编译原理 138

9.2.3 Taro运行时 144

9.3 Taro 3.x原理概述 146

9.4 本章小结 155

第10章 多端开发环境搭建 156

10.1 微信小程序开发环境搭建 157

10.2 支付宝小程序开发环境搭建 158

10.3 React Native开发环境搭建 160

10.3.1 在macOS系统下搭建iOS开发环境 160

10.3.2 在macOS系统下搭建Android开发环境 160

10.3.3 在Windows系统下搭建Android开发环境 162

10.3.4 使用Taro开发 iOS应用 162

10.3.5 使用Taro开发Android应用 164

10.4 本章小结 166

第11章 闲置换App开发实践 167

11.1 项目介绍 168

11.1.1 项目背景 168

11.1.2 项目需求 168

11.1.3 项目核心功能设计 169

11.1.4 项目架构设计 171

11.1.5 项目接口mock 172

11.2 基础功能开发 172

11.2.1 通用请求库封装 172

11.2.2 引入dva 174

11.2.3 定义请求服务 177

11.2.4 为H5配置请求代理 179

11.3 自定义导航器 182

11.3.1 需求分析 182

11.3.2 微信小程序端开发 184

11.3.3 H5端开发 188

11.3.4 React Native端开发 190

11.4 首页开发 194

11.4.1 搜索组件 194

11.4.2 瀑布流图片组件 198

11.4.3 轮播图组件 203

11.4.4 数据联调 205

11.5 消息页开发 216

11.5.1 定义底部导航 216

11.5.2 消息列表页开发 219

11.5.3 聊天页面开发 221

11.6 商品详情页开发 239

11.7 项目优化与发布 259

11.7.1 项目优化 259

11.7.2 项目打包发布 271

11.8 本章小结 280

第12章 拥抱Taro 3 281

12.1 Taro 演进历程 282

12.1.1 Taro 1.x 282

12.1.2 Taro 2.x 282

12.1.3 Taro 3.x 284

12.2 使用Taro 3 285

12.2.1 React模板 285

12.2.2 Vue模板 288

12.3 本章小结 290

3.2 组件通信

上一节我们了解了组件的设计思想，组件在被设计出来以后不是孤立的，也需要“交往”。例如下面的组件结构：

MyContent与MySide的关系被称为父子组件关系，MySide与MyList的关系被称为兄弟组件关系。有时可能在MySide中的操作需要通知MyList，或者MySide中的操作需要通知MyContent，这一需求背后正是父子组件或兄弟组件之间的通信。

3.2.1 父子组件通信

一般而言，父子组件之间的通信通过事件完成，即在父组件定义事件处理函数，将这个函数作为props 传递给子组件，就能实现指定子组件的操作通知到父组件。示例如下：

class Demo extends Taro.Component {
handleChange(res) {
console.log(res)
}
render() {
return (



)
}
}

上例说明了子组件操作触发父组件的逻辑处理。那么父组件的操作触发子组件的更新呢？便是通过props了，父组件数据更新后，通过props告知子组件，示例如下：

class Demo extends Taro.Component {
state = {
count: 0
}
render() {
return (



)
}
}

这种方式其实是将MySide中的count 状态抽离出来存放到父组件，使得父组件或者父组件内的其他组件更改这个值变得容易。如果父组件希望触发子组件内的操作，则可以结合引用Ref获取子组件实例，然后通过引用使用子组件中的值或方法，具体使用方法我们将在3.4节介绍。

3.2.2 兄弟组件通信

兄弟组件状态同步只能通过父组件实现，即将兄弟组件需要共用的状态提取到父组件中，进而在兄弟组件上使用自定义事件的方式监听组件内部的操作。如果值发生更改，则需要通知其兄弟组件，代码实现示例如下：

class Demo extends Taro.Component {
state = {
count: 0
}
handleChange = (res) => {
this.setState({count: this.state.count + 1})
}
render() {
const {count} = this.state
return (




)
}
}

回想一下，在讨论组件设计需要遵循的原则时，我们说组件的边界要清晰，但是我们现在发现上例中MySide组件和MyList组件共同依赖了count 这一状态。这时我们需要思索，这个问题出现的原因是什么，是组件设计粒度不合理？还是组件之间确实需要共用这个状态？如果是前者，则需要重新考虑一下组件的设计；如果是后者，则可以用本例所示的解决方案去解决这一问题。

3.2.3 更复杂的组件通信

大多数情况下，以上列举的两种方案可以很好地解决组件之间的状态同步问题。可往往还有更复杂的场景、更复杂的状态同步问题亟待解决。例如，更深层级的状态传递与通信，且该状态只被最内层组件消费，以及状态合并问题等。这里我们来看深层状态传递问题。首先我们可以想到通过props逐层传递，例如：

class One extends Taro.Component {
render() {
const {count} = this.props
return{count}
}
}

class Two extends Taro.Component {
render() {
const {count} = this.props
return (

Two


)
}
}

class Three extends Taro.Component {
render() {
return
}
}

Two组件很显然只是中介，count属性传递给了它却没有被使用，只是透传给了One组件。是否可以不经过这样层层传递，而直接由Three组件创建状态，One组件使用这个状态呢？这就需要使用Taro提供的context实现。代码示例如下：

const CountContext = Taro.createContext()

class One extends Taro.Component {
render() {
return (

{count =>{count}}

)
}
}

class Two extends Taro.Component {
render() {
const {count} = this.props
return (

Two


)
}
}

class Three extends Taro.Component {
render() {
return (



)
}
}

这样一来，count这一状态就只是Three组件创造与更新、One组件消费了。这样props 更简捷，没有造成污染。

如果以上方案还是无法解决应用中的状态管理问题，就可能需要使用全局状态管理了，关于复杂组件的状态管理我们将在下一章详细探讨。

推荐序

2017年1月9日凌晨，微信正式推出小程序，为移动端家族增加了新的业务形态和玩法。当大家还在探讨这一新兴平台能做什么的时候，京东率先上线了“京东购物”小程序，惊艳业界。随后，更多的电商行业执牛耳者纷纷入驻小程序，从此，承载电商的主战场逐渐从需要自建流量的移动端App向小程序倾斜。

小程序的出现，为电商行业的研发带来了巨大的挑战。继微信之后，越来越多的头部流量互联网公司纷纷盯上小程序这块“蛋糕”，相继推出了各自的小程序平台，如京东、阿里巴巴、百度、字节跳动等，为了让我们的电商业务能快速移植到这些小程序平台，帮助我们快速拓展业务渠道，我们开始了新的尝试。

我们开始尝试使用技术的手段，探索一种能够统一所有平台开发的新技术。

Taro正是在这一背景下诞生的解决方案，从小程序出发，逐步统一H5、App这些平台，从而解决业务多端适配的问题，帮助业务快速适配更多平台，获得更多的流量收益。

目前Taro作为多端统一开发解决方案，在京东内部服务于京东零售、物流、数科、智联云、安联保险等多个子集团，为京喜、京喜拼拼、京东快递、京东生鲜、7Fresh、拍拍二手等70余个重量级业务的研发上线助力赋能，大幅提升业务研发效率。同时，在业界，Taro 累计服务超过10万名开发者，共有281位开源爱好者为Taro贡献过代码。Taro团队还与业界多家头部互联网公司研发团队共同探讨进步。

Taro 是一个非常值得学习的，也是一个生生不息、积极开放的多端技术方案。

本书是一场关于Taro的深入浅出学习之旅。首先，它从 Taro 的基础知识开始，帮助读者了解Taro、熟悉Taro，再结合实践经验，帮助读者构建组件化开发的思想，同时深入介绍了React及其生态，帮助读者打下坚实的基础。然后，深入介绍了Taro的多端开发知识、性能优化实践及Taro的核心原理，让读者对Taro有更深层次的了解。最后，结合具体实战，帮助读者总结知识、消化知识，达到融会贯通的目的。

本书将是入门Taro、深入使用Taro的好帮手，无论是Taro初学者，还是想在Taro之路上更进一步的开发者，都能获益匪浅。

从 Taro 1 到 Taro 2，再到目前最新的Taro 3，都可以看出Taro 一直在坚定不移地探索、前进，一切都为了更好的开发体验和更高的研发效率。当下 Taro 已成为业界最为火热的多端统一开发解决方案，它将会继续保持初心，不断地成长。我们也将基于 Taro 输出更多好玩的东西到社区，帮助开发者更好地开发多端应用。学习Taro最好的时候是过去，同时也是现在。

——隔壁老李，京东零售凹凸实验室资深前端工程师

前言

2017年1月9日，微信小程序正式上线。自此，这种触手可及、用完即走的小程序产品引起广泛关注。

在此后的一段时间里，数个产品均发布了自己的小程序平台，其中包括支付宝小程序、百度小程序、字节跳动小程序等。各小程序平台间存在或多或少的差异，如语法差异、规范差异等，对于开发者而言，开发各端小程序是非常浪费精力的，因为各端小程序之间存在的差异是少量的，我们希望编写同一套代码，在编译时抹平各端差异，从而提升开发效率，降低开发成本。

除了小程序，产品可能还需要在 H5、iOS、Android 端运行。能否在兼顾小程序的同时编译生成 H5、iOS、Android 应用呢？毕竟在 React 的生态里，有一个框架——React Native 支持使用 React 开发 iOS、Android 应用。经过很多开发者的不停探索，催生出了很多优秀的多端开发框架，其中就有 Taro。

Taro 诞生已有两年多时间，在这两年多时间里，Taro 一直保持高速成长状态。从 1.x 版本到 3.x 版本，Taro 经历了大的版本迭代与重构，正是因为源码的不断重构与架构调整，才使得更多的开发者加入其中，共同迭代升级 Taro，有越来越多的公司选择使用 Taro 开发多端统一应用。

多端开发“封神榜”上，一定会有 Taro 的名字。

阅读建议

本书从基础知识切入，循序渐进，由浅入深。在掌握 Taro 基础知识以后，你可以尝试使用 Taro 去开发一些小的案例，书中也提供了一些小案例用于理解某些开发中常用的知识点。最后通过开发一个闲置换 App，带读者一窥从项目搭建，到需求评审与开发，再到性能优化，最终部署上线的整个流程。

本书作为市面上首本 Taro 开发参考书，首先需要覆盖绝大多数开发工作中所使用的知识点，将这些知识点穿成线。其次需要带读者一起了解 Taro 原理，知其然且知其所以然才能让我们在开发工作中游刃有余。本书一共12章，各章内容介绍如下：

第1章 介绍了 Taro 的诞生背景、基本理念及主要特性。同时介绍了使用 Taro 进行开发前需要掌握的 ES 6 常用语法知识、Taro 脚手架及规范约定。学完本章，相信大家会对使用 Taro 开发多端应用有一个基本认识。

第2章 介绍了 JSX 语法基础。同时介绍了组件化开发基本思想、组件生命周期、组件中事件的处理，以及如何绑定事件、如何解决 this 指向性问题等。了解单个页面开发以后，我们可以尝试将多个页面有机组合，这时就需要使用路由功能了。路由系统将各个模块通过路径和路径参数编织成网，路由操作允许你在网的节点之间穿梭。最后以表单控件串联起了本章学习的重要内容，举一反三。

第3章 介绍了组件设计基本原则。介绍了组件关系、组件之间的通信即状态同步问题。还介绍了组件和服务端数据交互与通信使用的 API，同时介绍了如何使用拦截器在请求发出前或响应到来后做一些特殊处理。最后介绍了 Ref 在开发过程中的使用方法。

第4章 介绍了项目中常用的两种集中状态管理方案，分别为 Redux 与 MobX。在新版本的 Taro 中建议使用 Hooks 结合 context 管理状态。

第5章 介绍了 Hooks 相关知识。Hooks 赋予了函数组件管理内部状态和处理副作用的能力，使得组件与数据得以拆分，同时解决了状态难以复用的问题。

第6章 介绍了如何使用 Taro 同步开发多端应用，开发之前需要根据项目具体需求和设计稿合理配置项目配置文件。开发多端应用过程中，可供选择的方案有3种，可根据模块开发需求选择合适方案。然后介绍了如何修改配置以支持多端同步调试与打包。

第7章 介绍了 Taro UI 的使用，使用 Taro UI 不仅能降低开发成本，还能保证多端样式统一。

第8章 介绍了 Taro 中较难理解但是颇有用途的一个特性——插件机制。插件机制提供给开发者众多能力，例如，自定义业务相关插件辅助业务开发、自定义命令拓展 Taro 命令行工具、自定义 Hooks 处理自定义处理逻辑，甚至可以借助该功能拓展编译规则，从而使 Taro 支持更多端应用的编译工作。工作中用好 Taro 插件机制能在很大程度上提高开发及构建效率。

第9章 介绍了 Taro 项目性能优化的知识。我们可以通过 Prerender 预渲染提升渲染速度，利用虚拟列表解决大数据列表的性能问题，同时可以自定义组件更新重渲染条件从而达到优化目的。还介绍了 Taro多端开发的实现原理，通过讲解 Taro 1.x 源码，介绍了 Taro的基本原理。

第10章 介绍了微信小程序、支付宝小程序、React Native 的开发环境搭建的相关内容，通过 Taro 编译不同端应用以提升开发效率。

第11章 介绍了使用 Taro 开发 H5、微信小程序、React Native 端应用的流程，从项目搭建到多端适配，完整讲解了使用 Taro 开发多端应用的方法和需要注意的问题，最后介绍了不同端打包发布的流程，从0到1打造多端应用。

第12章 介绍了 Taro 的发展及如何使用 Taro 3 进行多端开发。

通过阅读本书，希望读者能对多端开发方案有一定认识，能够使用 Taro 开发多端应用。

读者反馈

本书作为市面上首本全面讲解 Taro 的图书，在写作过程中，我深感开创者的不易，因自身水平有限，书中难免会有疏漏，恳请读者指正。你可以通过邮箱 flana_zhong@163.com 与我联系，或者关注我的微信公众号“JavaScript 全栈”私信我，看到反馈后我会第一时间回复。

示例代码下载

本书实战部分代码托管在GitHub 上，访问地址为https://github.com/HeyiMaster/taro-book，源码仅供参考学习，建议结合书中源码片段学习。

致谢

我坚信成就自己最好的方式就是帮助他人。我乐于分享，无论是技术还是生活，在将我所掌握的知识、生活技能等通过文字或视频形式传递给他人的时候，我都非常开心。正是因为分享和开源，我有幸结识了 Taro 团队的很多小伙伴，他们为 Taro 付出了很多，牺牲了很多周末时间，推掉了很多个朋友聚会，挤压了陪伴家人的时间。同时我在想，为什么目前市面上还没有一本工具书介绍 Taro，让更多开发者听到 Taro 的声音？

因为一直囿于文笔不好，担心写出的内容不能很好地将 Taro 的精华传授于读者，所以踟蹰不前。直到电子工业出版社编辑李秀梅老师找到我，给予了我很多鼓励，加上疫情在家无法外出，可以全身心投入写作，我才决定开始本书的写作。

在此，特别感谢 Taro 团队小伙伴老李、立哥、帅哥的答疑解惑，同时特别感谢电子工业出版社李秀梅编辑不厌其烦地纠正书稿中的错误。真心感谢你们，是你们的支持和鼓励让这本书得以面世。

最后，感谢我的父母，是你们含辛茹苦将我养育成人。也感谢我的妻子严霜，是你的支持与理解让我顺利完成写作。