Taro多端开发框架核心原理与实践指南

Question

导读

随着业务不断扩张以及大小程序平台的崛起，针对每个平台都去写一套代码是不现实的，且原生的小程序开发模式存在诸多弊端。为了让小程序开发更简单、高效，采用Taro作为首选框架。本文将分享Taro的实践经验，主要内容围绕什么是Taro、Taro如何正确使用以及Taro背后的一些设计思想来展开，让读者能够对Taro有较为完整的认识。Taro 3.0已经逐渐成熟，实践项目已进行升级，因此本文代码示例以Taro 3.0作为基础。

什么是Taro

Taro 是一个多端统一的开发框架。使用 Taro 可以支持 React 的开发方式，编写一次代码就能够运行在各种小程序、H5 甚至 React Native 等多端应用上。

Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信、京东、百度、支付宝、字节跳动、QQ 小程序、H5、React Native 等应用。现如今市面上端的形态多种多样，当业务要求同时在不同的端都要求有所表现时，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

Taro的主要特点包括：

快：可以快速开发小程序，解决小程序开发的各种痛点。
多：可以实现多终端适配，一套代码适配小程序、H5、RN等多终端。

为什么用Taro

随着应用规模逐渐庞大，复杂度也随之越来越高，原生小程序开发的痛点逐渐暴露出来：

代码组织复杂：写一个页面的文件结构繁多（四个之多）。
规范不统一：组件、方法命名规范不统一，各种书写方式、语法结构不一致。
孱弱的字符串模板：逻辑表现力不强，不支持eslint。
依赖管理混乱：缺少npm包依赖管理。
不完全的ES Next：仅支持部分ES Next语法，比较新的ES2020、ES2021+都不支持。
落后的开发方式：前端工程体系不完善，webpack打包、css预处理等缺失。

可选技术方案

对于以上微信小程序开发模式的痛点，业界给出了一些可选方案，如mpvue、WePY、Chameleon及Taro。以下是简要对比分析：

mpvue：美团研发的框架，多端适配效果不好，维护停滞。
WePY：腾讯研发的组件化框架，但是无法适配多端。
Chameleon：在多端适配方面表现突出，缺点是不支持京东小程序，无法转换原生小程序。
Taro：遵循React/Vue语法规范，引入现代化的开发流程，让研发更专注核心代码，提供健全的代码检查方式。

Taro支持平台最全面，独具转换能力，性能方面优于其它框架，总结特点如下：

可以实现微信小程序原生代码转换到微信平台、百度平台等。
Taro框架是唯一一款实现京东小程序适配的框架。
支持React/Vue语法，更好地支持组件化和TypeScript。
行业影响力大，社区活跃，京东内部优秀团队研发的框架，支持有保障。
更加完善的UI组件库，支持多端同步调试，能够适配更多终端。

设计思想

Taro主要采用React开发方式，使用React编写多端应用。其核心思想包括：

代码转换：使代码可以在不同平台上运行。
运行时适配：使代码在不同平台上有相同表现。

以微信小程序为例，Taro代码通过编译转换为小程序代码。例如，Taro中的JSX会被转换为小程序的WXML。Taro的编译原理是对输入的源代码进行语法分析，构建语法树，随后对语法树进行转换操作再解析生成目标代码的过程。

开发时遵循React语法标准，结合编译原理的思想，对代码文件进行一系列转换操作，最终获得可以在小程序运行的代码。而React最开始就是为了解决Web开发而生的，所以对代码稍加改动，也可以直接生成在Web端运行的代码，同属React语法体系下的React Native也能够很便捷地提供支持。同理其他平台，如快应用、百度小程序等，将源码进行编译转换操作，也能获得该平台下的对应语法代码。

小程序和Web端上组件标准与API标准有很大差异，这些差异仅仅通过代码编译手段是无法抹平的。针对这样的情况，Taro采用了定制一套运行时标准来抹平不同平台之间的差异。这一套标准主要以三个部分组成，包括标准运行时框架、标准基础组件库、标准端能力API。

多端适配基础标准

基础框架：以React的生命周期、组件API为基础，小程序的特性作为补充。
标准组件库：以微信小程序组件为标准，各端模拟实现。
标准API：扩展的小程序标准Api，各端模拟实现。

快速上手

初始化项目

环境准备：node环境，运行npm命令。

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

# 使用 npx 初始化项目
$ npx @tarojs/cli init myTaroApp

开始使用Taro编写页面。

// pages/index/index
import React from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends React.Component {
 state = {
   msg: 'Hello World！'
 }

 render () {
   return (
     {this.state.msg}
   )
 }
}

运行项目

# 启动指定平台代码，可以同时运行于多平台
# 仅限全局安装
$ taro build —-type {weapp/h5/swan/tt/jd/rn} —-watch

多平台启动命令示例：

开发调试命令：npm run dev:jd、npm run dev:swan、npm run dev:weapp
打包发布命令：npm run build:jd、npm run build:swan、npm run build:weapp

如果同时看三端效果，分别运行以上命令即可。

微信原生小程序转换Taro小程序

# 只运行一次即可
$ npx @tarojs/cli convert

Taro项目的组成

Taro项目的基本目录结构包括：

dist：编译结果目录。
config：配置目录，包含开发、默认和生产配置。
src：源码目录，包含组件、页面、工具等。
package.json：项目包信息。

更完整的结构可能包括子包、Redux状态管理等。完整文档请访问Taro官方文档。

多端适配

多终端配置文件编写：每个平台有独立的配置文件，如微信的project.config.json、百度的project.swan.json等。

多终端入口文件：每个平台有不同的页面配置信息，通过不同的入口文件适配，如app.jd.ts、app.swan.ts等。

差异化配置：不同平台加载对应的配置文件，处理地图类型、渠道信息、请求头等差异。

代码差异化处理：在JS和CSS中使用条件编译，针对不同平台执行特定代码。

多端适配案例：

样式解析：Taro统一使用px，通过框架处理转换成对应平台的单位。注意1px边框问题，可使用PX单位。
模块导入和导出：使用ES6的import，避免require。内联本地图片资源可使用require。
组件开发细节：注意key取值、dataset问题等。

百度小程序开发注意事项：包括状态更新、样式偏差、组件bug等，需具体处理。
京东小程序开发注意事项：包括样式覆盖、分包支持、API限制等。

多端同步调试：在配置中设置输出目录，通过多个终端同时执行不同平台的编译命令进行同步调试。

生态与规划

物流风格的Taro UI组件库—Tarot已适配Taro 3.0，提供内部组件库供共建。此外，有定制化Taro模板工程，自带组件库、工具和示例。小程序MiniDebug工具是一款多端小程序调试工具，提高开发测试效率。京东商城已实现小程序可视化拖拽平台。

结语

Taro V3.0.0目前支持React、Nerv、Vue三类框架，在未来Taro将开放拓展能力，使得开发者可以通过Taro拓展更多的框架支持。目前Taro框架完善、社区活跃，即使没有多端需求，仅用Taro开发H5也是个不错的选择，未来可以0成本接入小程序平台。