How Taro 3.1’s Open Architecture Empowers Multi‑Platform Mini‑Program Development

Open Architecture

Taro 3.1 replaces the monolithic core with a plugin‑based open architecture. The six built‑in mini‑program platforms (WeChat, Alipay, Baidu, Toutiao, QQ, JD) are now packaged as plugins loaded by default, and developers can create additional platform plugins without modifying the core library.

Background

Plugin developers write a platform plugin independently of the Taro core.

Plugin users install and configure the plugin to compile code for the target platform.

Developers can inherit existing plugins to implement custom adaptation logic.

Changes in Taro 3.1

Sync with latest mini‑program features

The built‑in platforms are now plugins; the CLI loads them automatically. All latest components and APIs of each platform have been audited and updated.

New supported platforms

Enterprise WeChat: @tarojs/plugin-platform-weapp-qy DingTalk mini‑program: @tarojs/plugin-platform-alipay-dd Alipay IOT mini‑program: @tarojs/plugin-platform-alipay-iot Kwai mini‑program (experimental):

@tarojs/plugin-platform-kwai

Impact on Developers

The architectural changes are internal and do not affect existing development workflows.

Custom Platform Plugins

Beyond adding new compile targets, developers can inherit existing platform plugins to create custom ones, tailoring platform adaptation logic.

How to write a platform plugin: see the documentation.

Rapid Issue Fixes

When a new component or API appears in a mini‑program, developers can fork or extend a plugin to add support immediately, without waiting for an official Taro release.

/** plugin/apis.ts */
export function initNativeApi(taro) {
  // Mount extra API: Taro.xxx()
  taro.xxx = function () {};
}

/** plugin/runtime.ts */
import { mergeReconciler } from '@tarojs/shared';
import { initNativeApi } from './apis';
// Merge initNativeApi into the reconciler to modify Taro at runtime
mergeReconciler({ initNativeApi });

Platform plugin entry

/** plugin/program.ts */
import { Weapp } from '@tarojs/plugin-platform-weapp';
// Extend the WeChat platform
export default class Example extends Weapp {
  platform = 'example';
  // Path to the runtime implementation
  runtimePath = `@tarojs/plugin-platform-example/dist/runtime`;
}

/** plugin/index.ts */
import Example from './program';
import type { IPluginContext } from '@tarojs/service';
export default (ctx: IPluginContext) => {
  ctx.registerPlatform({
    name: 'example',
    useConfigName: 'mini',
    async fn({ config }) {
      const program = new Example(ctx, config);
      program.start();
    }
  });
};

Property Pruning

Mini‑program components require static attribute binding, which can lead to many unused bindings and increase bundle size. Developers can prune unnecessary attributes (e.g., hover-stop-propagation) from the generated template to reduce size.

Be cautious: over‑pruning may cause maintenance difficulties in larger projects.

Important Issue Fixes

Breaking Change: Vue app lifecycle was called twice. In v3.1 export the component config object directly instead of creating a new Vue instance.

Enhanced reverse conversion ( taro convert) with support for Behavior, custom tabbars, global usingComponents, and numerous bug fixes.

Added catchMove attribute to View to prevent touch‑move penetration.

Fixed HOC‑wrapped share lifecycle methods by automatically injecting enableShareAppMessage and enableShareTimeline when needed.

Resolved native custom component errors in Alipay mini‑programs by generating component definitions in the page’s axml file.

Optimized base.xml template size, achieving up to 85% reduction in extreme cases.

Reverse Conversion Example

Four popular open‑source WeChat mini‑programs were converted successfully using taro convert:

EastWorld/wechat-app-mall

tumobi/nideshop-mini-program

RebeccaHanjw/weapp-wechat-zhihu

jectychen/wechat-v2ex

Upgrade Guide

For v2.x users, follow the migration guide. For v3.x users, install the v3.1 CLI: npm i -g @tarojs/cli@next Update package.json to 3.1.0-beta.4, then reinstall dependencies (remove node_modules first).

Breaking Change Reminder

Vue developers must adjust their entry file as described above.

Future Plans

Taro 3 will soon support React Native; see the test announcement for details.

References

@tarojs/plugin-platform-weapp-qy – https://github.com/NervJS/taro-plugin-platform-weapp-qy

@tarojs/plugin-platform-alipay-dd – https://github.com/NervJS/taro-plugin-platform-alipay-dd

@tarojs/plugin-platform-alipay-iot – https://github.com/NervJS/taro-plugin-platform-alipay-iot

@tarojs/plugin-platform-kwai – https://github.com/NervJS/taro-plugin-platform-kwai

Documentation – https://taro-docs.jd.com/taro/docs/next/platform-plugin-how

EastWorld/wechat-app-mall – https://github.com/EastWorld/wechat-app-mall

tumobi/nideshop-mini-program – https://github.com/tumobi/nideshop-mini-program

RebeccaHanjw/weapp-wechat-zhihu – https://github.com/RebeccaHanjw/weapp-wechat-zhihu

jectychen/wechat-v2ex – https://github.com/jectychen/wechat-v2ex

Migration guide – https://taro-docs.jd.com/taro/docs/next/migration

React Native support announcement – https://taro-docs.jd.com/taro/blog/2020-12-02-taro-3-2-0-cannary-1