Skip to main content
Version: 3.x

实现细节

本文会介绍 Taro 的部分实现细节，带动开发者了解 Taro 相关依赖包的具体功能，让开发者对更好地了解 Taro 这个项目。

note

不定期更新。

CLI​

@tarojs/cli 是 Taro CLI 工具，它基于 @tarojs/service 包的插件化内核实现。

CLI 里预先挂载了一系列的内置插件，每个命令、每个编译平台都是一个单独的 Taro 插件。

小程序​

编译时​

编译小程序时，CLI 会调用 @tarojs/mini-runner 包。mini-runner 主要做了这些事情：

  1. 负责根据开发者的编译配置调整 Webpack 配置。
  2. 注入自定义的 PostCSS 插件。（如 postcss-pxtransform）
  3. 注入自定义的 Webpack 插件。
  4. 注入自定义的 Webpack Loaders。（Loaders 位于 @tarojs/taro-loader 包中）
  5. 调用 Webpack 开启编译。
  6. 修改 Webpack 的编译产物，调整最终的编译结果。

运行时​

为了让 React、Vue 等框架直接运行在小程序端，我们需要在小程序的逻辑层模拟浏览器环境，包括实现 DOM、BOM API 等。

@tarojs/runtime 是 Taro 的运行时适配器核心，它实现了精简的 DOM、BOM API、事件系统、Web 框架和小程序框架的桥接层等。

因为 ReactDOM 体积较大，且包含很多兼容性代码。因此 Taro 借助 react-reconciler 实现了一个自定义渲染器用于代替 ReactDOM。渲染器位于 @tarojs/react 包中。

这时 Web 框架就可以使用 Taro 模拟的 API 渲染出一颗 Taro DOM 树，但是这一切都运行在小程序的逻辑层。而小程序的 xml 模板需要提前写死，Taro 如何使用一个静态的模板文件去渲染这颗动态的 Taro DOM 树呢？

Taro 选择了利用小程序 <template> 可以引用其它 <template> 的特性，把 Taro DOM 树的每个 DOM 节点对应地渲染为一个个 <template>。这时只需要把 Taro DOM 树的序列化数据进行 setData，就能触发 <template> 的相互引用，从而渲染出最终的 UI。

项目的 dist/base.xml 文件就是这些 <template> 的集合。

端平台插件​

Taro 内部默认支持 6 大小程序平台，自 Taro v3.1 版本之后，对各小程序平台的支持都以 Taro 插件的形式进行：

  • @tarojs/plugin-platform-weapp 微信小程序插件
  • @tarojs/plugin-platform-alipay 支付宝小程序插件
  • @tarojs/plugin-platform-swan 百度小程序插件
  • @tarojs/plugin-platform-tt 字节跳动小程序插件
  • @tarojs/plugin-platform-qq qq 小程序插件
  • @tarojs/plugin-platform-jd 京东小程序插件

端平台插件针对特定的平台，会分别为编译时和运行时注入逻辑，详情请见 《端平台插件概述》。

H5​

编译时​

编译 H5 时，CLI 会调用 @tarojs/webpack-runner 包。webpack-runner 主要做了这些事情：

  1. 负责根据开发者的编译配置调整 Webpack 配置。
  2. 注入自定义的 PostCSS 插件。（如 postcss-pxtransform、postcss-plugin-constparse）
  3. 注入自定义的 Webpack 插件。
  4. 注入自定义的 Webpack Loaders。（Loaders 位于 @tarojs/taro-loader 包中）
  5. 调用 Webpack 开启编译。
  6. 修改 Webpack 的编译产物，调整最终的编译结果。

组件库​

Taro 在 H5 端实现了遵循微信小程序规范的基础组件库。

默认会使用 @tarojs/components 提供的 Web Components 组件库。

开发者使用 React 开发时，也可以选用兼容性组件库，这时 @tarojs/components-react 将会代替 @tarojs/components。

API​

开发者从 @tarojs/taro 中引用 Taro 对象并使用它提供的 API。

在 H5 环境，@tarojs/taro 会从 @tarojs/api 取与平台无关的 API，从 @tarojs/taro-h5 中取遵循小程序规范实现的 API，最终集合成一个 Taro 对象暴露给开发者。

开发者一般会以 Taro.xxx 这种形式调用 API。babel-plugin-transform-taroapi 插件会把这种写法转换为 import { xxx } from '@tarojs/taro'; 再进行调用，这样才能保证 Tree Shaking 生效。

路由​

@tarojs/router 实现了遵循小程序规范的路由库。

Typings​

Taro 的 Typings 文件位于 @tarojs/taro/types 中。

因为各小程序的 API 更新较快，Typings 十分需要社区协助维护。

反向转换​

反向转换，即原生微信小程序转换为 Taro 的功能，目前支持转换为 React。

反向转换分为编译时和运行时两大模块，分别位于 @tarojs/taroize 和 @tarojs/with-weapp。

相关阅读​