Author: Yu Che

After two months of development and hundreds of submissions, we have carefully but firmly launched Taro Next as a Beta. Since the Beta launch, many developers in the community have adopted Taro Next. With their help and praise and good feedback from our internal project use, we were able to release the RELEASE Candidate (RC) release with confidence one month after the Beta release.

In the stable Beta, Taro has also added more features:

H5 compilation support

H5 compilation support is one of the most important reasons for us to upgrade. This means that small applications written by developers can now run directly on the Web. Adding H5 support is as simple as installing @tarojs/ webpack-Runner in the project root directory and running taro Build — type H5 — Watch:

$NPM i-d@tarojs /webpack-runner@next $taro build -typeH5 - watchCopy the code

Like the applets, Taro Next’s H5 end is a complete rewrite from previous versions of Taro: the base Components are now all built using Web Components, and the routing system is completely decoupled from the front-end framework, so Taro is cross-framework on the H5 end as well. React, Vue, or Nerv can run on various applets and H5 at the same time.

React/Vue

As early as the launch of Taro 1.2, we have provided the function of converting wechat applet to Taro. The converted wechat applet will become a multi-terminal application. The functionality is now fully compatible with Taro Next’s new architecture, and the converted code provides React and Vue options. As before, just execute the command taro convert in the wechat applet project root directory:

$ taro convert
Copy the code

Select the frame you want to convert:

Render HTML Strings

A third-party library like Wxparse is commonly used to render HTML strings in applets, but wXparse has a complex API, weak extensibility, inaccurate internal implementation, and, most importantly, is no longer maintained. Taro Next’s HTML string rendering provides the following features over WXParse:

  • The React API is consistent with the Web and can be used directlydangerouslySetInnerHTMLOr Vuev-htmlThe call.
  • You can control label styles directly through CSS
  • Bind events to rendered HTML tags
  • Hook functions are provided in HTML parsing and rendering to meet the needs of personalized rendering

You can visit document Render HTML for more information.

CSS-in-JS

Styled Components There is a well-known CSS-in-JS solution in the React community: Styled – Components. Unfortunately, styled- Components use the

  • Similar tostyled-componentsThe API
  • Full TypeScript support
  • Zero run time

Among them, zero runtime is particularly important for small programs requiring packaging volume.

You can visit the documentation using CSS-in-JS to learn more.

VirtualList

When we render a list with a very large amount of data, the framework tries to render the view in full based on the data, which can cause performance problems and render the view unresponsive for a period of time. To solve this problem, we can take another approach: instead of rendering the view generated by the full data, we can render only the view of the current visable viewport, and render the view of the non-visible region after the user scrolls to the visible region:
The difference between normal rendering and virtual lists
Intuitive effects in developer tools

A similar technology is called RecyclerView in Android development and VirtualizedList in React Native. We call it Virtual List. This component is now built in Taro. React/Vue or various applets and H5 can be used:

import VirtualList from '@tarojs/components/virtual-list'
Copy the code

You can visit the document long list rendering to learn more.

Plug-in function

Since 2.2, Taro has introduced a plug-in mechanism, which allows developers to write plug-ins to extend Taro’s features or customize them for their businesses.

This feature is also available in Taro Next, which provides a simple data mock plugin, @tarojs/plugin-mock. Interfaces and descriptions can be found in the official documentation -> Advanced Guide -> Plug-in features.

Move on to the official version

Following the Beta release, we have focused on Taro’s own open source governance and project governance, in addition to the ongoing implementation of the React Native compatibility feature. In order to ensure that major feature updates and architecture changes can be implemented smoothly, we have introduced Taro’s RFC process mechanism. This will make the evolution of Taro more transparent and open, and more community participation is bound to make Taro more perfect.

During this period, we also upgraded the document. Compared with the old version, the new document adjusted part of the contents to make the information more reasonable, easier to find, more complete content, and also make the reading experience more friendly.

The RC version, with almost no new features, will focus on debugging, and then we will release the full version. In other words:

If you’re more interested in small applications and H5 development, now is the perfect time to join Taro Next!

Thank you

Thank you skywalker512

  • Fix for Current Type definition, remove unusable useScope definition (#5764);

  • Added support for CSS Variables (#5796);

  • Fixed path issues on Windows (#5839);

  • Fixed animation definition error (#5901). Thank you big Fupengl

  • Fixed webPack configuration redundant parameters resulting in webpack,loader parameter verification failure; (# 5835);

  • [Fixed] React page uninstall lifecycle not being called (#5826)

  • [Fixed] Missing tt style file match

  • Fixed input maxLength spelling (#6005);

  • Fixed attribute numeric type 0 being valid (#6027);

  • Fixed issue where compiling native TT applet style files was not handled by loader (#6088). Thank you Wuchangming

  • Fixed dependency reference error (#5858) due to webpack resolve.modules setting absolute path

  • Fixed an issue (#5989) where Current. Router was getting incorrect data.

Thank you, CNcolder

  • Add linaria configuration and WebPack configuration (#5880);
  • HTML typo (# 5893);
  • Set rich-text property to optional;
  • Add route information path field (#5898);
  • All three function parameters in UI Interaction are optional (#6351). Thank you, Garfield550
  • Added CJS distribution to API, specification part package file included (#5991);
  • Fix the component animation property and the type (#6025) of the animation.export () method. Thanks to Fishead for adding framework checks (#5977); NextTick adaptor setData callback #5978 Thanks to HVSY, Cuikangyi, YESMECK, Psli.

Welcome to the bump Lab blog: AOtu.io

Or pay attention to the bump Laboratory public account (AOTULabs), push the article from time to time: