跳到主要内容
版本:4.x

概述

端平台插件

v3.1.0 起,我们把对每个小程序平台的兼容逻辑抽取了出来,以 Taro 插件的形式注入 Taro 框架,从而支持对应平台的编译。

Web 端平台插件自 v3.6.0 开始支持

Taro 内置的端平台插件

插件编译平台
@tarojs/plugin-platform-weapp微信小程序
@tarojs/plugin-platform-alipay支付宝小程序
@tarojs/plugin-platform-swan百度小程序
@tarojs/plugin-platform-tt抖音小程序
@tarojs/plugin-platform-qqQQ 小程序
@tarojs/plugin-platform-jd京东小程序
@tarojs/plugin-platform-h5Web 端

其它端平台插件

插件编译平台
@tarojs/plugin-platform-weapp-qy企业微信小程序
@tarojs/plugin-platform-alipay-dd钉钉小程序
@tarojs/plugin-platform-alipay-iot支付宝 IOT 小程序
@tarojs/plugin-platform-lark飞书小程序

端平台插件使用方法

  1. 配置插件
// Taro 项目配置
module.exports = {
// ...
plugins: ['@tarojs/plugin-platform-alipay-iot'],
}
  1. 编译为支付宝 IOT 端小程序
taro build --type iot
taro build --type iot --watch

背景

开放式框架

近年来业界推出的小程序平台越来越多,但 Taro 核心维护的平台只有 6 个(微信、支付宝、百度、头条、QQ、京东小程序),因此常常有同学提出能不能支持某某平台的 Feature Request。

基于目前的架构,对于单一平台的兼容性代码分布于 Taro 核心库的各个角落,涉及编译时与运行时等部分。支持一个新的平台需要改动所有的这些地方,开发复杂度高,同时社区也难以参与贡献。

为此我们萌生了打造一个开放式框架的想法。目标是可以通过插件的形式扩展 Taro 的端平台支持能力:

  • 插件开发者无需修改 Taro 核心库代码,按照一定的规则即可编写出一个端平台插件。
  • 插件使用者只需安装、配置端平台插件,即可把代码编译到指定平台。

端平台扩展又可以分为横向扩展和纵向扩展两种方式:

  • 横向扩展

    扩展一个全新的编译平台,如美团小程序。

  • 纵向扩展

    继承现有的端平台插件,扩展出新的编译平台,如 QQ 小程序插件继承于微信小程序插件。

开放式编译平台架构图

还可以做什么有意思的事

除了扩展新的编译平台,我们还可以通过继承于现有的端平台插件,来编写自定义的端平台插件,为平台的编译过程注入自定义逻辑:

使用插件 @tarojs/plugin-inject 能为所有小程序平台快速新增 API、组件,调整组件属性等

快速修复问题

由于小程序平台众多,而且它们也在不断地迭代,往往会出现 Taro 对某个小程序新推出的组件或 API 支持不及时的问题。这时开发者首先需要联系 Taro 团队,再等待我们跟进修复、发布新版本后才能正常使用,平均需要等待一周或两周的时间才能得到解决。

而基于开放式的编译平台架构,开发者能够通过继承目标的端平台插件,迅速开发出自定义端平台插件,完成对这些新组件或 API 的支持,无需等待 Taro 发布版本。

属性精简

因为小程序组件的属性和事件都必须静态写死,不可以动态添加,所以 Taro 会把组件的所有属性和事件全部在模板里提前进行绑定。

但实际项目中很多情况下并不会使用到组件的所有属性和事件,循环这些冗余的属性和事件绑定也会占据很大一部分的体积,另外太多的事件绑定也会在一定程度上降低小程序的性能。

以下是 View 组件模板的伪代码:

<template name="tmpl_0_view">
<view
hover-class="..."
hover-stop-propagation="..."
hover-start-time="..."
hover-stay-time="..."
animation="..."
onTouchStart="..."
onTouchMove="..."
onTouchEnd="..."
onTouchCancel="..."
onLongTap="..."
onAnimationStart="..."
onAnimationIteration="..."
onAnimationEnd="..."
onTransitionEnd="..."
disable-scroll="..."
hidden="..."
onAppear="..."
onDisappear="..."
onFirstAppear="..."
style="..."
class="..."
onTap="..."
id="..."
>
...
</view>
</template>

Taro 需要把 View 组件的所有属性和事件提前进行绑定,才能满足不同开发者的使用需求。但可能对于某位开发者来说,整个项目的 View 组件都没有使用到 hover-stop-propagation 这个属性,那么则可以考虑把它精简掉,不编译到 View 模板当中。

属性精简的功能同样可以通过实现一个自定义端平台插件来实现。但是需要提醒的是,对属性的精简可能会引起不必要的问题、使项目的维护变得困难,特别当项目变大,开发者众多时,需要谨慎设计和使用。

欢迎共建

我们希望在开放式架构推出后,能激起社区各位开发者的创造力,一起为 Taro 生态创造新的端平台支持插件,或各种优秀的自定义端平台组件,期待您的参与和贡献!