Author: Concave-Mann-JJ

GitHub address: github.com/nervjs/taro

File address: taro-docs.jd.com

Taro V3.1 released in beta

Since we officially launched Taro 3 in early July, six months have passed since then. In the meantime, we’ve been working on fixing the problem, and thinking about the next minor release.

In the face of an increasing number of small application platforms, Taro will choose to be isolated and support only some mainstream small programs, or become an infrastructure for all small application platform development and multi-terminal transformation. In V3.1, we give the answer: open architecture.

1. Open Architecture

background

In recent years, more and more mini program platforms have been launched in the industry. However, there are only six platforms (wechat, Alipay, Baidu, Toutiao, QQ and JINGdong mini programs) for Taro’s core maintenance. Therefore, students often ask whether they can support the Feature Request of such and such platform.

Based on the current architecture, the code for single-platform compatibility is distributed throughout the Taro core library, both compile and runtime. Supporting a new platform requires all of these changes, development complexity is high, and community participation is difficult.

So we came up with the idea of creating an open framework. The goal is to extend Taro’s terminal platform support through plug-ins:

  • Plug-in developers can write a terminal platform plug-in without modifying the Taro core library code.
  • Plug-in users simply install and configure the terminal platform plug-in to compile code to the specified platform.
  • Developers can inherit existing end-platform plug-ins and customize the platform adaptation logic.

Terminal platform plug-in architecture diagram

Taro is based on open architecture changes

1. The latest features of applets are synchronized

We packaged the six platforms with built-in support as plug-ins, and the CLI loaded them all by default. In the process of encapsulation, we retrieved the latest components and apis of each small program, updated and supported all of them, and aligned the latest capabilities of each small program.

2. Add platforms that support transformation

With the help of the open architecture, we have written several terminal platform plug-ins that can be used by developers after installation:

  • Enterprise wechat plug-in: @tarojs/ plugin-platform-eapp-qy
  • Plugins: @tarojs/ plugin-platform-Alipay -dd
  • Alipay IOT plug-ins: @tarojs/ plugin-platform-Alipay – IOT
  • Quick Hand small program plug-in (experience version) : @tarojs/plugin-platform-kwai

Impact on developers

The changes are part of Taro’s internal architecture reconstruction and will not affect developers’ use.

What else can I do for fun

In addition to extending the new compilation platform, we can also customize the adaptation logic of the platform by inheriting the existing terminal platform plug-in to write a custom terminal platform plug-in:

How to write terminal platform plug-in: Document address

1. Quickly fix the problem

Because there are so many applets and they are constantly iterating, Taro often fails to provide timely support for a new component or API of a particular applets. In this case, developers need to contact the Taro team first, and then wait for us to follow up the fix and release the new version before it can be used normally. On average, it takes one or two weeks to solve the problem.

Based on the open architecture, developers can quickly develop custom platform plug-ins by inheriting from one platform plug-in and complete support for these new components or apis without waiting for the Taro release.

Example of developing API for wechat applets:

  1. Runtime injection API:
/** plugin/apis.ts */
export function initNativeApi (taro) {
  // Mount additional APIS: taron.xxx ()
  taro.xxx = function () {}}/** plugin/runtime.ts */
import { mergeReconciler } from '@tarojs/shared'
import { initNativeApi } from './apis'

// Incorporate the initNativeApi into the Reconciler.
// This allows you to hack into the Taro runtime and modify the Taro objects to add apis
mergeReconciler({
  initNativeApi
})
Copy the code
  1. Terminal platform plug-in entry:
/** plugin/program.ts */
import { Weapp } from '@tarojs/plugin-platform-weapp'

// Inherit wechat applets
export default class Example extends Weapp {
  platform = 'example'
  // Path of the Runtime file in Step 1
  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()
    }
  })
}
Copy the code

2. Attribute reduction

Because attributes and events for an applet component must be written statically and cannot be added dynamically, Taro will bind all attributes and events for the component in advance in the template.

However, in many cases, not all the properties and events of the component are used in the actual project. Cycling these redundant properties and event bindings will also take up a large part of the volume. In addition, too many event bindings will reduce the performance of the small program to some extent.

Here is the pseudo-code for the View component template:

<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>
Copy the code

Taro needs to bind all properties and events of the View component in advance to meet the needs of different developers. Hover-stop-propagation (hover-stop-Propagation) is not used in the View component of a project by a developer, so it can be simplified and not compiled into the View component template.

It is important to note that the reduction of attributes can cause unnecessary problems and make maintenance difficult, especially when the project is large and many developers need to be carefully designed and used.

Ii. Repair of important problems

In addition to including open architecture adjustments, V3.1 also does not forget to consolidate the core. Here are some of the important v3.1 fixes, some of which were released in v3.0 patch and some of which were released in V3.1:

1. [Breaking Change] Fix App life cycle being called twice in Vue

Note that this fix contains Breaking Change. If you are upgrading your Vue project from V3.0 to V3.1, you need to make the following changes to the entry component:

// app.js

/ / v3.0
// The Taro runtime will call new Vue once,
// Multiple calls to the user's entry component will cause the lifecycle function to fire repeatedly
const App = new Vue({
  // ...
})

/ / v3.1
// The user only needs to export the configuration object of the entry component in the entry file, no need to call new Vue
const App = {
  // ...
}
Copy the code

2. Optimize reverse conversion

In V3.1 we extensively validated the Taro Convert feature, fixed a number of issues, and are now in a relatively high availability state.

Detailed documentation: taro-docs.jd.com/taro/docs/n… .

Major changes:

  • Support the use ofBehavior
  • Support for using custom Tabbars
  • Support global ConfigurationusingComponents
  • repaircatchEvents do not prevent bubbling problems
  • Fixed an issue where mounting additional properties to app objects was not supported
  • Fixed an issue where the key value of the loop was not compiled correctly
  • Fixed an issue where fonts referenced in styles were not processed at compile time

Reverse conversion example

We tried to convert four of GitHub’s most popular open source wechat applets using Taro Convert, and they all performed well:

EastWorld/ Wechat -app-mall – wechat small program mall

Tumobi/Nideshop – Mini – Program – open source wechat small program mall developed based on Node.js + MySQL

RebeccaHanjw/ appellate

jectychen/wechat-v2ex – V2EX

3. Support to prevent small programs from sliding through

One of the most reported issues after V3.0 was that calling e.topPropagation () in the TouchMove event callback did not prevent slide propagation.

This is because Taro 3’s event bubbling mechanism is implemented separately in the applet logic layer, and all events are bound rather than caught. Therefore, a call to e.topPropagation () in the touchMove event callback will only prevent the event callback of the upper-layer component from being triggered, without the ability of catchTouchMove to prevent slide penetration.

In V3.1, we added the catchMove attribute to the View component. As long as the value of the catchMove attribute is true, we will use the CatchTouchMove instead of bindTouchMove for event binding, thus gaining the ability to prevent sliding through.

Usage:

<View class='parent'>
  <View class='modal' catchMove>When you swipe.modal, you do not swipe.parent</View>
</View>
Copy the code

4. Fixed an issue where the sharing lifecycle method did not trigger after using HOC

If we use HOC to wrap pages in the React framework of V3.0, such as @connect in React-Redux, then we set up some share lifecycles: OnShareAppMessage and onShareTimeline will not be triggered. In this case, you need to set enableShareAppMessage: true and enableShareTimeline: true in the configuration file.

V3.1 checks whether onShareAppMessage and onShareTimeline are invoked during compilation and automatically adds the corresponding configuration to the page configuration file. In most scenarios, users do not need to manually set the configuration.

Note that if the sharing life cycle is encapsulated in base classes or custom Hooks, you still need to manually add the corresponding configurations.

5. Fix the error reported by alipay mini program using native custom components

In V3.0, alipay applet will report “element does not exist” error when using native custom component.

This is because alipay applet stipulates that the customized components referenced to the page need to be defined in the corresponding AXML file of the page. Taro defines custom components in the global template file base.axml.

Therefore, 3.1 identifies pages that use native custom components and defines templates for these pages in the corresponding AXML.

6. Optimize the size of the base.xml template

When V3.0 was just released, many students reported that the size of the applet was too large. One of the reasons was that the template base. XML in the compilation product was too large.

Since v3.0.9, we have refactored the template generation logic: it is possible to nest references to its own components, and templates are generated 16 times by default, such as views. Components that reference themselves are not nested, and templates are generated only once, such as maps.

Take wechat mini program as an example, the volume optimization rate reaches over 85% in the most extreme cases:

Upgrade Guide

Those who are upgrading from v2.x should follow the migration guide first.

To upgrade from v3.x, you need to install the CLI tool of V3.1:

npm i -g @tarojs/cli@next
Copy the code

Json file, and then reinstall the dependencies (it is recommended to delete the node_modules folder first). The upgrade is complete.

Breaking

V3.1 comes with a Breaking Change that students developing with Vue need to modify as instructed.

4. Future planning

React Native support for Taro 3 is coming soon. Welcome to visit Taro 3.2.0.

5. Appreciate your community

Open source is not easy, you need to adhere to. The Taro team would like to extend our heartfelt thanks to all the friends who have participated in the construction of the open source project, whether they have submitted code for Taro, built the surrounding ecology, provided feedback, or even just discussed and joked with us over dinner.

We sincerely invite you to communicate with the official Taro team about your use. With your company, Taro will be more exciting! Address of the questionnaire

Finally, special thanks to all of you who contributed code from Taro to v3.0 to V3.1, in no particular order:

  • @wuchangming
  • @SyMind
  • @zhuxianguo
  • @Songkeys
  • @vdfor
  • @Spencer17x
  • @wingsico
  • @w91
  • @fjc0k
  • @Leechael
  • @southorange1228
  • @alexlees
  • @cncolder
  • @rottenpen
  • @gcxfd
  • @twocucao
  • @pengtikui
  • @kala888
  • @LengYXin
  • @iugo
  • @xuchengzone
  • @csolin
  • @xiaoyao96
  • @zhaoguoweiLLHC
  • @baranwang
  • @fred8617
  • @huanz
  • @Cslove
  • @002huiguo
  • @jazzqi
  • @Jetsly
  • @yuezk
  • @lukezhange001
  • @k55k32
  • @Soul-Stone
  • @hisanshao
  • @gjc9620
  • @younthu
  • @digiaries
  • @ZeroTo0ne
  • @GoodbyeNJN