多端统一开发框架 Taro 1.0 正式发布

September 18, 2018 · 20 min read

luckyadam

在 2018.6.7 我们对外开源了 多端统一开发框架——Taro。

Taro 是一个多端统一开发框架，它支持使用 React 的开发方式来编写可以同时在微信小程序、Web 、React Native 等多个平台上运行的应用，帮助开发者提升开发效率，改善开发体验，降低多端研发成本。

自开源以来，Taro 一直广受业界关注，其原理与思想也得到了广泛开发者的认可，这对于我们来说无疑是一件令人振奋的事。但是由于初期 Taro 测试与实现方式的不足，导致在开源期间 Bug 较多，受到了一些质疑。为此，我们痛定思痛，积极接受了开源社区的意见与帮助，并努力探索提升 Taro 稳定性与性能的方式。经过不断地迭代完善，已经让 Taro 浴火重生。

1.0.0 真的来了#

Taro 开源到现在 3 个月时间，累计发布 70 余日常版本及 20 余 Taro 1.0.0 的 beta 版本，经过近百个版本的迭代优化，我们亲身体会到 Taro 的 BUG 反馈越来越少，Taro 越来越健壮且完善，因此，我们有信心推出 1.0.0 正式版。

Taro 1.0.0 正式版在延续了之前版本优秀特性的同时，增加了更加丰富的特性与功能，并进行了多项小程序端/H5端的转换优化，同时带来了对 React Native 的转换支持。

全新的小程序组件化#

开源之初，由于种种原因，Taro 的微信小程序端组件化采用的是小程序 <template /> 标签来实现的，利用小程序 <template /> 标签的特性，将组件 JS 文件编译成 JS + WXML 模板，在父组件（页面）的模板中通过 <template /> 标签引用子组件的 WXML 模板来进行拼接，从而达到组件化的目的。

实践证明，Template 模板方案是一个失败的组件化方案，Taro 开源初期的 Bug 主要来源于此。因为这一方案将 JS 逻辑与模板拆分开了，需要手工来保证 JS 与模板中数据一致，这样在循环组件渲染、组件多重嵌套的情况下，要保证组件正确渲染与 props 正确传递的难度非常大，实现的成本也非常高。而且，囿于小程序 <template /> 标签的缺陷，一些功能（例如自定义组件包含子元素，等）无法实现。

所以，在经过艰辛的探索与实践之后，我们采用了小程序原生组件化来作为 Taro 的小程序端组件化方案，并且通过一些处理，绕开了小程序组件化的诸多限制，为 Taro 的稳定性打下了坚实基础，并带来了以下好处：

小程序端组件化更加健壮
尽可能减少由于框架带来的性能问题
依托官方组件化，方便以后解锁更多可能

全面支持小程序生态#

为了更好地帮助开发者使用 Taro 开发小程序，在 1.0.0 版本中，我们加强了对小程序生态的支持，主要提现在以下几个方面。

支持引用小程序端第三方组件库#

受益于小程序组件化重构，我们在 Taro 中支持了直接引用小程序端第三方组件库，让 Taro 可以融入到小程序生态中，为开发者提供更多便利。

目前实测已经支持了如下知名第三方组件库

echarts-for-weixin，ECharts 的微信小程序版本
iview-weapp，iview 的微信小程序版本
vant-weapp，轻量、可靠的小程序 UI 组件库
wxParse，微信小程序富文本解析自定义组件，支持HTML及markdown解析

当然，Taro 不仅仅只支持上述组件库，只要是按原生小程序规范编写的组件库都能在 Taro 中正常使用。

支持 Taro 代码与原生小程序代码混写#

与此同时，Taro 支持原生小程序代码与 Taro 代码混写，因此，可以使用 Taro 愉快地将旧的小程序项目慢慢地改造成 Taro 项目了。

支持小程序端分包加载以及插件引用#

我们在 Taro 中也加入对原生小程序分包加载功能的支持，配置的方式与原生小程序基本一致，只需要在 app.js 入口文件中加入 subPackage 字段即可。

import Taro, { Component } from '@tarojs/taro'
class App extends Component {
  config = {
    pages: [
      'pages/index',
      'pages/logs'
    ],
    subPackages: [
      {
        root: 'moduleA',
        pages: [
          'pages/rabbit',
          'pages/squirrel'
        ]
      }
    ]
  }
}

同时，Taro 也支持了使用小程序的插件功能，可以在 Taro 中直接引用第三方的插件

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/Components'
class PageA extends Component {
  config = {
    usingComponents: {
      'hello-component': 'plugin://myPlugin/hello-component'
    }
  }

  render () {
    return (
      <View>
        <hello-component></hello-component>
      </View>
    )
  }
}

小程序 setState 性能优化#

在最初的开源版本中，小程序端 setState 仅仅是对小程序 setData 做了一次异步封装，最终调用 setData 更新的时候还是传入了完整数据。

但众所周知，小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境，在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。在调用 setData 之后，会将数据使用 JSON.stringify 进行序列化，再拼接成脚本，然后再传给视图层渲染，这样的话，当数据量非常大的时候，小程序就会变得异常卡顿，性能很差。

Taro 在框架级别帮助开发者进行了优化，在 setData 之前进行了一次数据 Diff，找到数据的最小更新路径，然后再使用此路径来进行更新。例如

// 初始 state
this.state = {
  a: [0],
  b: {
    x: {
      y: 1
    }
  }
}

// 调用 this.setState

this.setState({
  a: [1, 2],
  b: {
    x: {
      y: 10
    }
  }
})

在优化之前，会直接将 this.setState 的数据传给 setData，即

this.$scope.setData({
  a: [1, 2],
  b: {
    x: {
      y: 10
    }
  }
})

而在优化之后的数据更新则变成了

this.$scope.setData({
  'a[0]': 1,
  'a[1]': 2,
  'b.x.y': 10
})

这样的优化对于小程序来说意义非常重大，可以避免因为数据更新导致的性能问题。

更加丰富的 JSX 语法支持#

前面已经提到 Taro 使用 React 语法规范来开发多端应用，这样就必然是采用 JSX 来作为模板，所以 Taro 需要将 JSX 编译成各个端支持的模板，其中以小程序端最为复杂，Taro 需要将 JSX 编译成小程序的 WXML 模板。

在开源的过程中，Taro 支持的 JSX 写法一直在不断完善，力求让开发体验更加接近于 React，主要包括以下语法支持：

支持 Ref，提供了更加方便的组件和元素定位方式
支持 this.props.children 写法，方便进行自定义组件传入子元素
在循环体内执行函数和表达式
定义 JSX 作为变量使用
支持复杂的 if-else 语句
在 JSX 属性中使用复杂表达式
在 style 属性中使用对象
只有使用到的变量才会作为 state 加入到小程序 data，从而精简小程序数据

目前，除了 Taro 官方 ESLint 插件 eslint-plugin-taro 中限制的语法之外，其他 JSX 语法基本都支持，而在原生组件化的帮助下，未来将会把 ESLint 的限制也逐条取消。

React Native 端转换支持#

在 Taro 1.0.0 中，我们将正式推出 React Native 端的转换支持，可以将现有 Taro 项目转换成 RN 版本，但需要注意对样式的处理，因为 RN 支持的样式非常有限，它是属于 CSS 的子集，具体请移步 RN 端转换注意事项。

Taro 的 RN 端基于 Expo 来进行编译构建 RN 程序，开发方式和编译命令与其他端类似，代码目录结构与现有 Taro 项目也基本一致

RN 编译预览模式

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

执行完命令之后，Taro 将会开始编译文件，最终获得 RN 端的编译指引，并且启动你的应用了

React Native 端完整开发流程请移步 React Native 开发流程介绍。

更加健全的 TypeScript 支持#

随着前端项目的复杂度和规模的增加，近年来越来越多的项目开始使用 TypeScript 进行开发。Taro 也注意到了这一趋势，在开源之初就提供了对 TypeScript 的支持。在社区的帮助下，Taro 对 TypeScript 的支持也更加健全和完善：

@tarojs/cli 可以直接创建 TypeScript 项目
@tarojs/components 包含了所有组件的类型定义
@tarojs/taro 的所有 API 也都包含了类型定义
@tarojs/redux 和 taro-ui 也都全部内置了类型定义
构建系统的编译器从 Babel 切换到原生 TypeScript 编译器，支持所有 TypeScript 语法

H5 端转换优化#

同时，Taro 在 H5 端的转换中，也进行诸多转换优化，修复了之前版本 H5 下诸多 Bug，让 H5 端路由系统更加健壮，同时开放了 Webpack 配置，可以让开发者自由地进行相关配置。

最后，附上 Taro 完整的迭代历程。

重生之路#

正如上文提到，Taro 1.0.0 带来许多新的优秀特性，而同时，在社区内的 Bug 反馈已经愈来愈少，这也是开源期间不断努力打磨的结果。

从 6.7 到行文截止，Taro 一共经历了 1800 余次提交，平均每天近 20 次，最多的一天达 30 次。每一次提交都是进步，每一次提交都让 Taro 更加强大。经过这么多次迭代之后，已经让 Taro 获得重生，尤其是小程序组件化重构完成之后，Taro 从旧版架构的泥潭中一跃而出，成为更加健壮的开发框架。

在我们自己不断反思、优化的同时，也积极融入开源社区，依托社区的力量去建设 Taro。

GitHub ISSUES 是检验一个开源项目靠谱程度的标准之一，到目前为止，一共收到了 500 余个 ISSUES，已关闭近 400 个，关闭率在 80% 左右，未关闭的也大部分是一些功能的迭代需求。在 Taro 开发团队内部更是要求每一个 ISSUE 的响应时间不能超过 24 小时。正是因为这些 ISSUES ，让我们不断意识到 Taro 的不足，让我们知道如何去进行迭代。

同时，我们也一直鼓励社区的开发者积极提 PR，一个优秀的开源项目需要依靠整个社区的力量才能完善起来，到目前为止，一共收到了 120 余个 PR，已几近全部合入，这些 PR 为 Taro 注入了许多新鲜血液，让 Taro 更加健壮，我们也期望能有更多的开发者可以加入进来，一起来让 Taro 更加美好。

在 GitHub 上交流之余，我们也为开发者们开通了官方微信群供大家一起讨论 Taro 与技术，目前已有超过 1700 位开发者在关注、使用 Taro ，期待更多开发者的加入。

开发者生态完善#

在开源之初，Taro 一直处于封闭的状态，没有适配的 UI 库，也无法使用第三方组件库，而这些对开发效率的桎梏非常严重，社区内对此反馈较多。

所以，在 1.0.0-beta 版本开发期间，Taro 团队开发了多端 UI 库打包功能，提供了 taro build --ui 命令来将按照一定规则组织的代码打包成可以在 Taro 中使用的多端 UI 库。

并且，基于这一功能，我们推出了首个可以跨多端使用的多端 UI 库 Taro UI，目前已经支持了微信小程序与 H5 端，不久之后将完成 React Native 端的适配，可以同步提供给 React Native 端使用。

目前，多端 UI 库打包功能还处于内测阶段，在 Taro 1.0.0 发布之后，这一功能将同步发布，这样更多开发者就可以为 Taro 开发更丰富的多端组件库和 UI 库了。

未来规划#

Taro 将会继续保持迭代，目前已经规划了如下重要功能。

便捷测试#

在编译时与运行时提供代码诊断的功能，分析代码优劣，判定代码写法是否规范，以便帮助开发者规避一些由于写法带来的问题。

同时将提供一套测试方案，方便开发者书写并运行组件测试用例，提升代码质量。

多端同步调试#

目前 Taro 只能一次调试一个端，这对于开发多端应用来说效率略低，所以，计划提供微信小程序/ H5 / React Native 端同时调试的功能，可以一键启动多端同时编译，从而获得多端同步预览。

微信小程序/H5 代码转 Taro 代码#

目前已支持 Taro 代码到小程序代码、 H5 代码的转换，在未来，将提供逆向转换功能，帮助开发者将原本就存在的小程序/H5 项目直接转换成 Taro 项目，从而让原本只能运行在一端的项目获得多端运行的能力，降低开发者的重构成本。

与 React 新特性保持同步#

Taro 是遵循 React 语法规范的，但是 React 一直在迭代在变化，Taro 作为 React 的追随者也将会保持与 React 新特性同步，让 Taro 最大程度接近 React 开发体验。

快应用端支持#

目前 Taro 已经完成了快应用端组件库与 API 的适配，快应用端的文件转换与模板转换也正在开发中，不久的将来就会发布支持快应用端转换的版本。

支付宝小程序与百度智能小程序支持#

已预研支付宝小程序与百度智能小程序转换的可行性，即将进入开发。

多端可视化拖拽搭建#

目前 Taro 是依靠开发者手工编写代码来获得多端应用的，Taro 未来计划提供一个多端可视化拖拽搭建的功能，可以通过拖拽组件的方式来生成多端应用。

同时，Taro 将联合各大公司小程序开发团队，推出丰富的行业模板，为各行业应用可视化搭建提供完整的解决方案。

使用案例#

在开源期间，随着 Taro 的逐步完善，越来越多的开发者加入到 Taro 的使用、开发中，产生了更多更优秀的使用案例。

特别鸣谢#

Taro 的发展离不开广大开源爱好者的帮助，在此特别鸣谢广大 Taro 的使用者以及 Taro 主要贡献者（排名不分先后）。