Taro officially released version 3.4: full support for Preact & Vue 3.2

It has been a while since the release of Taro v3.4 beta version. During this period, we have improved the support for Preact and Vue3, added some interesting features, and made significant optimization and adjustment to H5, and released it recently. The official release of v3.4.

Last month, we also launched the v3.5.0 canary version that supports the development of Hongmeng apps. All students are welcome to pay attention~

1. Support the use of Preact

When developing small program applications, we are often constrained by the size of the package, and large-scale applications often carry out slimming actions to reduce the size of the package. In this context, React's size of nearly 100k is a bit too extravagant. Therefore, Taro v3.4 implements support for Preact, and requires only a small amount of configuration to switch from React to Preact, effectively reducing the package size.

Preact is an ultra-small React-like framework that provides almost the same API as React and is compatible with the React ecosystem, while the volume is only about 5k.

For the adaptation ideas and specific usage, please refer to "Taro v3.4 Beta Version - Support for Development with Preact"

Second, better support for Vue 3.2

1. The applet lifecycle hook that supports the Composition API version

Document address

Vue 3.2 officially launched the script setup syntax. In the past, Taro's Options-style applet life cycle hook was difficult to use with the script setup syntax. Therefore, Taro v3.4 provides the composition API version of the applet life cycle hook, which is convenient for developers to organize and reuse code logic with the setup syntax.

example:

<script setup>
import { useDidShow } from '@tarojs/taro'

useDidShow(() => console.log('onShow'))
</script>

2. Support <style> v-bind syntax

Vue 3.2's <style> v-bind syntax allows us to data-bind styles. Its implementation uses the MutationObserver API of DOM, but Taro DOM did not simulate this API before, so an error will be reported when <style> v-bind

Thanks to @b2nil classmate, refer to worker-dom MutationObserver API for Taro DOM, so that we can use <style> v-bind syntax.

Taro DOM only exposes the MutationObserver API for Vue3, students who use React or Vue2 do not need to worry about increasing the code size.

3. Expose the configuration of

Document address

Developers sometimes need to modify the configuration of VueLoader, for example, compilerOptions.isCustomElement needs to be configured when using applet native components. In the past, developers could only WebpackChain . Taro v3.4 exposes the configuration of VueLoader, allowing developers to modify it more easily.

3. H5

1. Custom multi-routing configuration

Taro-H5 did not support the operation of accessing the same page instance through multiple routes in the past, and even through custom routing configuration, the same page could not be accessed in multiple routes.

Therefore, Taro-H5 provides parameters for custom multi-routing configuration for developers to configure according to their needs.

Document address

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      customRoutes: {
        // "页面路径": "自定义路由"
        '/pages/index/index': '/index',
        '/pages/detail/index': ['/detail'] // 可以通过数组为页面配置多个自定义路由
      }
    }
  }
}

2. Routing animation by @ShaoGongBra

Taro-H5 supports routing animation. Developers can app.config.js , or adjust the animation by overriding CSS styles. Of course, in some scenarios, such as pages that need to use position: fixed; , the animation can be disabled because translate3d

Document address

export default {
  // ...
  animation: {
    // 动画切换时间，单位毫秒
    duration: 300,
    // 动画切换时间，单位毫秒
    delay: 50
  }
  // ...
}

3. dynamic-import-node

When Taro-H5 is packaged, it will split pages and components into separate files to load on demand, but doing so will result in unused pages and components will still be packaged, resulting in a larger compilation volume. In some special scenarios (such as When PWA needs to strictly limit the size of the package), it will be troubled a lot.

So we provide a way to remove lazy loading through the babel plugin:

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      hot: false,
      'dynamic-import-node': true
    }]
  ]
}

4. Add defineAppConfig and definePageConfig compilation macros

Thanks again to @b2nil for adding this feature to Taro. Document address: defineAppConfig , definePageConfig

defineAppConfig

Developers can use defineAppConfig wrap the App configuration object to get the globally configured type hints and autocomplete , such as:

// app.config.ts
export default defineAppConfig({
  pages: ['pages/index/index'],
  window: {
    navigationBarTitleText: 'WeChat'
  }
})

definePageConfig

Use definePageConfig wrap the Page configuration object, and you can also get the type hints and page configuration to automatically complete , such as:

// page.config.ts
export default definePageConfig({
  navigationBarTitleText: '首页'
})

In addition, developers can define the page configuration directly in the page logic file using definePageConfig without providing the page configuration file.

As in React:

// page.tsx
definePageConfig({
  navigationBarTitleText: '首页'
})

export default function Index () {}

In Vue:

<script>
definePageConfig({
  navigationBarTitleText: '首页'
})

export default {}
</script>

5. Other important features and optimizations

Performance

• Fix the problem of memory leak caused by eventSource commit .
• Repair CustomWrapper nesting failure problems after use, thanks @ CS-Tao contribution.
• The runtime volume is optimized, which reduces the space 30k

Features

• hot-reload function of the WeChat applet developer tool, the document address is .
• Support Alipay applet 2.0 to build .
• The H5 side supports configuring the container id of the rendered page, document address
• The H5 side routing rules are adjusted, the Query parameter is no longer added to pageId , and the TabBar page will not recreate duplicate nodes.
• H5 side supports entryPagePath parameter, by @liuchuzhang
• H5 side supports CoverView & CoverImage components, by @jiaozitang
• H5 side supports NodesRef.context & NodesRef.node methods
• The H5 side supports monitoring the resize event useResize

fixes

• Fix pre-rendering failure.
• Fixed the problem that when multiple pages use the same component, the event triggering fails id
• Fixed the occasional trigger error of multi-page scroll events on the H5 side.
• Fix the Shaking ability of H5 API invalid in 3.x.

Six. Breaking Changes

• To upgrade the old project to Taro v3.4, you need to install the corresponding framework adaptation plug-in upgrade guide for details.
• Baidu applet uses onInit instead of onLoad life cycle to optimize the first startup time.
• The errMsg parameter returned by showModal has been adjusted on the H5 side to align with the applet interface. If the project has been adapted for this difference, it can be removed after the upgrade. #11040

Upgrade Guide

1. Update Taro CLI to v3.4.0 :

npm i -g @tarojs/cli

2. Update project dependencies

If the installation fails or fails to open the project, you can delete the node_modules , yarn.lock , package-lock.json and reinstall the dependencies and try again.

Modify the version of Taro related dependencies in the package.json 3.4.0 , and then reinstall the dependencies.

3. [Breaking Changes] Install the corresponding framework adapter plugin

Because Taro v3.4 splits the adaptation logic of each front-end framework into corresponding plug-ins, it is necessary to install the adaptation plug-ins of the corresponding frameworks when upgrading old projects:

• To use React, please install @tarojs/plugin-framework-react
• To use Vue2, please install @tarojs/plugin-framework-vue2
• To use Vue3, please install @tarojs/plugin-framework-vue3

last

Next, Taro v3.6 will focus on performance optimization of small programs, compilation system upgrades (such as upgrading Webpack5), and optimizing H5 capabilities (such as outputting SSR solutions, optimizing routing systems, etc.).

Another main Taro iteration is obscurity application OpenHarmony && adaptation, Taro and OpenHarmony team set up cross-platform UI Interest Group , the joint community work together to expand the adapter. The first phase of development work has now been completed, and Taro v3.5-canary version has been released.

Related inquiries:

• && OpenHarmony Adaptation Team
• Adaptation progress

Hongmeng & OpenHarmony exchange group:

Finally, I sincerely thank all the students who participated in the Taro open source co-construction, and more students are welcome to participate!

Welcome to the blog of Bump Lab: aotu.io

Or pay attention to the AOTULabs official account (AOTULabs), and push articles from time to time.