“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

The basic library of small programs, what it contains, and what is the loading, updating mechanism.

The composition of the basic library of small programs

Base library component

As for the base library components, we have to mention the applet rendering mechanism we talked about earlier. See the React Virtual DOM.

In addition to dealing with VD rendering issues, the base library also includes built-in component and logic layer apis, which are generally responsible for handling data binding, component systems, event systems, communication systems and a series of framework logic.

The basic library of applets is written in JavaScript, which can be injected into the rendering layer and logic layer to run. In the rendering layer, various components can be used to build interface elements, and in the logic layer, various apis can be used to handle various logic.

At the same time, some supplementary capabilities of applets: custom components and plug-ins, also have corresponding base code, of course, need to be added to the base library.

So we can see that the basic library of applets is mainly:

  1. Provides VD rendering mechanism related basic code. (Exparser framework)
  2. Provides packaged built-in components.
  3. Provide logical layer apis.
  4. Base code that provides additional complementary capabilities (custom components, plug-ins, and so on).

Exparser framework

Exparser is the component organization framework of wechat small program, which is built into the basic library of small program and provides basic support for various components of small program. All components within the applets, both built-in and custom, are managed by the Exparser organization.

Exparser maintains the node tree information of the entire page, including node attributes, event bindings, etc. It is a simplified version of Shadow DOM implementation. The main features of Exparser include the following:

  1. ShadowDOM model: The model is highly similar to WebComponents’ ShadowDOM, but it does not rely on browser’s native support, nor does it have other dependent libraries; When implemented, additional apis were added specifically to support applets component programming.
  2. Runs in a pure JS environment: this means that the logical layer also has some component tree organization capability.
  3. High efficiency and light weight: High performance, especially in environments with a large number of component instances, and small code size.

Based on this framework, a set of components are built in to cover the basic functionality of applets, making it easy for developers to quickly build any interface. It also provides the ability to customize components, allowing developers to extend more components themselves for code reuse.

Built-in component

Small program based on Exparser framework, built a set of components, provides view container class, form class, navigation class, media class, open class and other dozens of components.

** The definition of a built-in component in the applets framework is that it is built into the applets framework using a component that cannot implement or does not implement a function well in the applets framework. ** Common include:

  • Open components: For example, the open-data component provides the display of group name, user information and other privacy information under the wechat system, and the open-type attribute in the Button component provides the ability to share, jump App and other sensitive operations
  • View container components: such as movable-view which is not well implemented because of the dual-threaded model (in the dual-threaded model, touch events are sent from the rendering layer to the logic layer, and there is a certain delay, which causes the view to follow the finger’s movement and the interaction becomes a bit sluggish)

API

The host environment provides a rich API that makes it easy to tune up the capabilities provided by wechat. Applets provide apis that can be divided into several categories by function: network, media, file, data cache, location, device, interface, interface node information and some special open interfaces.

Note that most API calls are asynchronous.

Custom Components

Custom components are components that developers can extend themselves. Developers can extract common node tree structure into custom components to realize code reuse.

In applets that use custom components, Exparser takes over all custom component registration and instantiation. Take Component as an example:

  1. When the applet starts, the constructor writes the properties, data, methods, and other definitions set by the developer to the Component registry of Exparser.
  2. When this component is referenced by other components, instances of custom components can be created based on this registration information.

The general flow of the Page constructor is similar, except that the arguments take a different form. Each page then has a corresponding component, called the “page root component.” When the page is initialized, Exparser creates an instance of the root component of the page, and other components respond by creating component instances (a recursive process).

The plug-in

A plug-in is a wrapper around a set of JS interfaces, custom components, or pages that can be embedded into an applet.

Plug-ins cannot run independently and must be embedded in other small programs to be used by users. Third-party applets cannot see the code of the plug-in when they use it. Therefore, plug-ins are suitable for encapsulating their own functions or services to be displayed and used by third-party applets.

Plug-in developers can write a plug-in and upload the code in the same way they develop applets. After the plug-in is published, other applets can be called. The applets platform will host the plug-in code, and when other applets are called, the uploaded plug-in code will be downloaded and run along with the applets.

Applets base library mechanism

Loading of the base library

When developing web pages, we often refer to many open source JS libraries. Before using the apis provided by these libraries, we need to introduce these libraries in front of the business code.

Similarly, we need to load the base library before launching the APP, and then load the business code. Since the rendering layer and logic layer of the applet are managed by two threads, and we generally speak of the base library, also usually include WebView base library (rendering layer), and AppService base library (logic layer).

Obviously, all small programs need to inject the same base library when the wechat client is opened. Therefore, the basic library of the small program will not be packaged in a small program code package, it will be built into the wechat client in advance.

The basic library is built into the wechat client, which has two advantages:

  1. Reduce the code package size of business applets.
  2. Bugs in the base library can be fixed individually without modifications to the business applets code package.

Start of applets

Before the mini program starts, wechat will prepare a page level in advance to display the home page of the mini program. This includes initialization of the logic layer and rendering layer separately and injection of the common library.

When the mini program is started, wechat will display a fixed startup interface for the mini program, which contains the icon, name and loading prompt icon of the mini program. At this point, wechat will complete several tasks behind: download the small program code package, load the small program code package, initialize the home page of the small program.

Updates to the base library

Many capabilities of small programs need to be supported by wechat clients, such as Bluetooth, live broadcasting ability, wechat movement, etc. It can be said that the iteration of basic library of small programs cannot be separated from the release of wechat clients.

In order to avoid the unknown influence of the new version of the basic library on online small programs, wechat clients are released with a stable version of the basic library. When the wechat client is officially released, the small program will start to grayscale push the new version of the basic library to the wechat client. In this process, it is necessary to carefully monitor all kinds of abnormal phenomena and feedback from developers and users. Generally, the grayscale lasts for 12 hours, and when the grayscale is over, there will be a new version of the basic library on the user device. If there is a major Bug, this push will be rolled back.

reference

  • Small Program Development Guide – Update iteration of the Small Program Base Library
  • Small Program Development Guide – 6.2 Component Systems

conclusion

This section roughly combined with the start of the small program to tell the basic library. In fact, many can be found in the small program development guide, but the text is too much and some messy, look again may not be able to remember, but the second time and can not find.

Ha ha ha ha fun small procedures under the document, very detailed is a little easy to find.