It has been three months since the first alpha version of Taro 3.3 was released. In addition to improving the H5 isomorphism, we also introduced some new features to improve the development experience and fixed several important issues.

Supports the H5 label

One of the most important features of Taro 3.3 is support for development using H5 tags, allowing developers to reuse parts of the Web ecosystem in an applet environment.

For example, use React like this:

function Index () {
  return (
    <div>Hello World!</div>)}Copy the code

The relevant background and implementation ideas are explained in detail in the article Taro 3.3 Alpha Release.

usage

The plugin @tarojs/plugin-html needs to be installed first:

$ npm i @tarojs/plugin-html
Copy the code

Then configure and use:

// config/index.js
const config = {
  // ...
  plugins: [
    '@tarojs/plugin-html']}Copy the code

See the documentation for details on how to use plug-ins.

The sample project

In order to verify the availability and effect of isomorphism, we tested all components of CSS style library WEUI, React component library Antd Design Mobile and Vue2 component library VantUI. The results show that quite a few components can run directly in the applet environment.

Example project repository address:

  • Weui-compatible examples
  • Compatible with Antd Design Mobile examples
  • Compatible with VantUI examples

What’s news

While developing the @tarojs/plugin-html plugin, we found that we needed to add some methods to the DOM APIs that Taro simulated, such as getBoundingClientRect. But for developers who don’t use the plugin these apis are redundant and increase package size. So we refactored the @tarojs/ Runtime to make the DOM APIs pluggable, allowing developers to choose which DOM APIs only exist in the final build.

This refactoring of the runtime is also a precursor to Taro 3.4. React, Vue2, and Vue3 require different DOM APIs to run, but for now, assuming developers use React, there will still be DOM APIs that only Vue2 or Vue3 rely on. Taro 3.4 will separate support logic for Web development frameworks into plugins such as @tarojs/plugin-framework-react. The purpose of Taro 3.4 is to remove redundant code.

For example, suppose the developer doesn’t use an API to render HTML text (such as React dangerouslySetInnerHTML). Then can modify the Taro compiler configuration of the mini. Runtime. EnableInnerHTML option, to make the final package results out relevant code:

// config/index.js
config = {
  // ...
  mini: {
    runtime: {
      enableInnerHTML: false}}}Copy the code

Applets support DevTools using the framework

Since Taro 3.x was converted to the runtime framework, some students have complained that the AppData panel of the applet developer tool sees the Taro virtual DOM serialized instead of the data data of the page. To alleviate this problem and further improve the developer experience, Taro has adapted React DevTools and Vue DevTools. With a simple configuration, you can use the framework’s DevTools just as you would when developing Web applications.

React DevTools

Install and configure @tarojs/plugin-react-devtools. For details, see the documentation.

Effect:

Vue DevTools

Install and configure @tarojs/plugin-vue-devtools. For details, see the documentation.

Effect:

Fix baidu small program flex layout problem

For a long time in the past, Taro 3 did not support the use of Flex layout in Baidu mini program. The reason is that each Taro DOM node in the logical layer is rendered with a corresponding

Many thanks to PR at @symind for helping Taro get around this problem. Starting from Taro 3.2, some components can also use Flex layout in Baidu applets.

Related discussions and submissions can be viewed at #6015 #9529

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.3 first:

npm i -g @tarojs/cli
Copy the code

Then manually modify the versions of the Taro dependencies in package.json file and reinstall the dependencies. Or use the Taro Update Project to update 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.

The End

Taro 3.4

In the next minor release, we’ll consider splitting the support logic for each Web development framework into corresponding plug-ins. Taro will enable developers to support a new development framework for Taro extensions in the form of plug-ins. We will use this capability to support PReact and hope to further reduce the size of packages for users.

OpenHarmony

Recently, we have been exploring the adaptation of Hongmeng application && OpenHarmony. At present, there are a series of discussions and development plans, as well as Demo that can be run. For details, please see hongmeng && OpenHarmony adaptation team.

The RoadMap:

Developers are welcome to participate in the discussion and build ~

Fast application

In addition, community leader @BGFist is developing features to support fast apps for Taro. Developers are also welcome to participate in the discussion and construction, related PR.

gratitude

Time flies. One year ago, Taro 3 was officially launched, and Taro has gradually become an open source project loved and trusted by the community. In the future, we will continue to do our best to open source Taro. We also hope that more developers in the community will get involved, whether by raising Issues, Posting on forums, submitting PR, or helping to build the surrounding ecosystem. Let’s do Taro well and make it stronger.

Finally, I would like to thank all the students who contributed code for Taro’s journey from V3.2 to V3.3.

>>>>>>>> official communication group >>>>>>>> click to learn more