It’s been a while since the Taro V3.4 beta was released. In that time, we’ve improved support for Preact and Vue3, added some interesting features, made significant improvements to H5, and recently released the official VERSION of V3.4.

Last month we also launched the v3.5.0 Canary version, which supports the development of Hong Meng applications. Welcome to pay attention to ~

Preact support

Small applications are often hampered by the size of their packages, and large applications are often slimmed down to fit the size of their packages. In this context, React’s nearly 100K size is a bit extravagant. Taro V3.4 therefore implements Preact support, requiring only a small amount of configuration to switch from React to Preact, effectively reducing package size.

Preact Preact is a compact React framework that provides the same API as React, compatible with the React ecosystem, and is only about 5K in size.

Please refer to the Taro V3.4 Launch Beta – Support development using Preact.

Better support for Vue 3.2

1. Applets lifecycle hooks that support the Composition API version

The document address

Vue 3.2 officially introduced the Script Setup syntax, which was difficult to use with Taro’s Options-style applets lifecycle hooks. Taro V3.4 therefore provides a version of the Composition API with applets lifecycle hooks that make it easy for developers to organize and reuse code logic with setup syntax.

Example:

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

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

2. Support<style> v-bindgrammar

Vue 3.2’s

Thanks @b2nil for implementing the MutationObserver API for Taro DOM using the worker-DOM, so that we can use the V-bind syntax.

Taro DOM exposes the MutationObserver API for Vue3 only. Students using React or Vue2 need not worry about increasing the code size.

3. Expose the VueLoader configuration

The document address

Sometimes developers need to modify the VueLoader configuration, such as a small program that use native components need to configure the compilerOptions. IsCustomElement. Previously, developers could only modify VueLoader through WebpackChain, but Taro V3.4 has exposed VueLoader configuration to make it easier for developers to modify.

Third, H5

1. Customize the multi-route configuration

Taro-h5 does not support the operation of multiple routes accessing the same page instance in the past. Even with a custom route configuration, the same page cannot be accessed from multiple routes.

Therefore, taro-H5 provides customized multi-route configuration parameters for developers to configure based on requirements.

The document address

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      customRoutes: {
        // "page path ":" custom route"
        '/pages/index/index': '/index'.'/pages/detail/index': ['/detail'] // You can configure multiple custom routes for a page using arrays}}}}Copy the code

2. Route animation by@ShaoGongBra

Taro-h5 supports animation of routes. Developers can control the animation effect of pages by configuring app.config.js, and can also adjust the animation by overwriting CSS styles. Of course, some scenarios, such as the page need to use position: fixed; The animation can be disabled because translate3D affects the actual effect.

The document address

export default {
  // ...
  animation: {
    // Animation toggle time in milliseconds
    duration: 300.// Animation toggle time in milliseconds
    delay: 50
  }
  // ...
}
Copy the code

3. dynamic-import-node

Taro-h5 packaging will split pages and components into separate files to be loaded on demand, but this will result in unused pages and components still being packaged, resulting in large compilation volume, which can be quite troublesome in some special scenarios (such as PWA, where the package size needs to be strictly limited).

So we provide a way to remove lazy loading via the Babel plugin:

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

Add defineAppConfig and definePageConfig compilation macros

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

defineAppConfig

Developers can wrap App configuration objects using defineAppConfig to get type hints and auto-completion for global configuration, such as:

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

definePageConfig

Wrapping the Page configuration object with definePageConfig also gives you type hints and auto-completion for the Page configuration, such as:

// page.config.ts
export default definePageConfig({
  navigationBarTitleText: 'home'
})
Copy the code

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

As in React:

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

export default function Index () {}
Copy the code

In the Vue:

<script>
definePageConfig({
  navigationBarTitleText: 'home'
})

export default {}
</script>
Copy the code

Other important features and optimization

performance

  • repaireventSourceThe resulting memory leak problem is relatedcommit.
  • repairCustomWrapperThank you for the problem of invalidation after nesting@CS-TaoThe contribution.
  • Runtime volume optimization, approximately 30K less space than Taro V3.3.

features

  • Support wechat small program developer tools hot overload function, document address.
  • Support alipay small program 2.0 construction.
  • H5 supports configuration of container ID and document address of rendering page
  • The H5 end routing rule is adjusted, and the Query parameter is no longer added topageId, at the same timeTabBarThe page does not recreate duplicate nodes.
  • H5 side supportentryPagePathParameter, by@liuchuzhang
  • H5 side supportCoverView & CoverImageComponent, by@jiaozitang
  • H5 side supportNodesRef.context & NodesRef.nodemethods
  • H5 supports the passuseResizeMethods to monitorresizeThe event

repair

  • Fixed prerender failure.
  • Fix multiple pages using the same component because the component is definedidA problem that causes event triggering to fail.
  • Fixed H5 side multi-page scroll event trigger error occasionally.
  • Fixed Shaking capability failure of H5 API in 3.x.

Six, product Changes

  • Older projects to upgrade to Taro V3.4 need to install the corresponding framework adaptors, see the upgrade guide for details.
  • Baidu small program useonInitInstead ofonLoadLife cycle to optimize first start time.
  • H5 adjusted the errMsg parameter returned by showModal to align with the applet interface. If this difference was adapted in the project, it could be removed after the upgrade. # 11040

Upgrade guide

1. Update Taro CLI tov3.4.0:

npm i -g @tarojs/cli
Copy the code

2. Update project dependencies

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

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

3. [Breaking Changes] Install the framework adaptation plug-in

Taro V3.4 split the adaptation logic of each front-end framework into corresponding plug-ins, therefore, the adaptation plugins of the corresponding framework need to be installed when upgrading old projects:

  • Install React@tarojs/plugin-framework-react
  • If Vue2 is used, install it@tarojs/plugin-framework-vue2
  • If Vue3 is used, install it@tarojs/plugin-framework-vue3

The last

Taro v3.6 will focus on optimizing applet performance, compiling system upgrades (e.g. Webpack5), and optimizing H5 capabilities (e.g. outputting SSR solutions, optimizing routing systems, etc.).

Taro and the OpenHarmony team have set up a cross-platform UI interest group to collaborate with the community to make adaptation efforts. The first phase of development has now been completed and Taro V3.5-Canary has been released.

Related consultation:

  • Hongmeng && OpenHarmony Adaptation Team
  • Adapter progress

Hongmeng & OpenHarmony Communication Group:

Finally, I would like to extend my heartfelt thanks to all the students who participated in the collaboration of Taro Open Source and welcome more students to join us!