Micro channel small program principle

I. Overall flow chart

From the aspect of technical implementation, no matter small programs, RN or Weex, they all have something in common. For example, JS and Native communication mechanism, for example, JS directly calls the rendering of Native components, for example, on iOS platform, Both applets and RN use JavaScriptCore to execute JS. But small programs and RN designed and respond to different scenarios, we know that small program set mainly in the current physical scene users can sweep the box, run out, namely the interaction is very lightweight and does not involve special complex interactive logic, so consider in the design as simple as possible, the first is the underlying framework system is simple, Secondly, it is easy for developers to develop and users to use, so most UI components of small programs are still H5 rendering mode, rather than RN designed as Native UI components.

Second, applets architecture

The framework of wechat applet consists of two parts: View layer, AppService logic layer, View layer is used to render the page structure, AppService layer is used for logic processing, data request, interface call, they run in two threads.

The view layer is rendered using WebView and the logic layer is run using JSCore.

The view layer and the logical layer communicate through JSBridage of the system layer. The logical layer notifies the view layer of data changes, triggers page updates of the view layer, and the view layer notifies the triggered events to the logical layer for business processing.

Three little program framework

1. In order to solve the performance problems of some components, the small program itself adopts the Native way. In addition, it is accurate to say that the small program not only runs in Webview, but also needs to distinguish different parts.

2. The rendering layer and logic layer of the applet are managed by two threads respectively: the interface of the rendering layer is rendered by WebView; The logical layer uses JSCore to run JavaScript code. A small program has multiple interfaces, so the render layer has multiple WebViews. The communication between the two threads is transferred through the Native side of the applet, and the network request sent by the logical layer is also forwarded through the Native side. The communication model of the applet is shown in the following figure.

The interface of wechat small program is mainly rendered by mature Web technology, supplemented by a large number of interfaces to provide rich client native capabilities. At the same time, each small program page is rendered with a different WebView, which can provide better interactive experience, more close to the native experience, but also avoid the task of a single WebView is too heavy

• The logic layer is based on JSCore or V8 engine. Developers simply write the business logic.
• The rendering layer is based on a stack of webViews.

Four layers render

As the name implies, the rendering layer of Webviw and Native exist in the same layer at the same time, with complementary advantages. Small programs are mainly rendered by mature Web technology, supplemented by a large number of interfaces to provide rich client side Native capabilities, that is, Native components are directly rendered to the WebView hierarchy through certain technical means. At this point, the “native component layer” no longer exists. The native component is now directly mounted to the WebView node.

Android same layer rendering principle

Chromium is used as the WebView rendering layer in the Android side of the small program. Chromium supports WebPlugin mechanism, WebPlugin is a plug-in mechanism in the browser kernel, mainly used to parse and describe the embed tag. Android side of the same layer rendering is based on the Embed tag and Chromium kernel extension to achieve. The general process of “same-layer rendering” on Android is as follows:

• 1. Create a Embed DOM node on the WebView side and specify the component type;
• The Chromium kernel creates a WebPlugin instance and generates a RenderLayer.
• 3. The Android client initializes a corresponding native component;
• 4. The Android client draws the surface of the native component onto the SurfaceTexture bound to the RenderLayer created in Step 2.
• 5. Notify the Chromium kernel to render the RenderLayer;
• Chromium renders the Embed node and puts it on the screen.

This process is equivalent to adding an external plug-in to the WebView. This method can be used for rendering native components such as Map, video, Canvas, camera, etc. For input and textarea, The solution is to directly extend chromium components to support some capabilities that WebView itself does not have.

out-of-the-box

Small program like Web technology, he is a resource package that can be updated at any time (through certain technical means to package JS and related resources) in the cloud, through downloading to the local decompression, dynamic execution can render the interface.