Small program principle analysis (a)

Two-thread model

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 idea of a two-tier architecture for applets can be traced back to PWA, but has been abandoned.

Applets framework Compared to PWA, applets developers can focus more on business logic without having to worry about caching static resources. Caching and updating mechanisms for applets are left to the applets framework to automate, and developers can influence this process through apis when appropriate. The rendering layer of the applet consists of a stack of webViews, which is closer to the user experience of a native mobile app than PWA. At the same time, the developers of small programs can more easily deal with the change of page state when jumping from page to page.

Similar to Hybrid technology such as wechat JSSDK, the interface of wechat small program is mainly rendered by mature Web technology, supplemented by a large number of interfaces to provide rich client side 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. In addition, we have defined a set of built-in components for interface rendering to unify the experience and provide some basic and common capabilities to further lower the learning barrier for developers. It is worth mentioning that some of the more complex components of the built-in components are rendered in the same layer as the client’s native implementation to provide better performance.

Why do they do that?

For the sake of control and security, wechat mini program prevents developers from using some open interfaces provided by browsers, such as jumping to pages, manipulating DOM, and dynamically executing scripts. Separating the logical layer from the view layer, only data communication between the view layer and the logical layer can prevent developers from arbitrarily operating the interface, and better ensure user data security.

Wechat applet view layer is WebView, logic layer is JS engine. The three-end script execution environment and the environment used to render non-native components are different:

Let’s take a look at the differences in code execution between a single WebView instance and a small program with two threaded multiple instances.

In single WebView mode, Page view and App logic share the same JSContext, so that all pages can share global data and methods, and achieve global state management. In multi-WebView mode, each WebView has an independent JSContext. Although data can be transmitted through window communication, data and methods cannot be shared, and the global state management is relatively complex. Isolating a generic WebView or JS Engine as the application’s JSContext solves these problems, but introduces other issues: how views and logic communicate, and how data updates are asynchronously updated in applets.

A diagram of the life cycle of a two-threaded interaction:

The development tools

Wechat developer tool is built based on Nw.js, which is mainly composed of toolbar, simulator, editor and debugger. Through wechat developer tools => Debug => Debug wechat developer tools can open small program IDE DevTools panel. A DevTools review shows that the emulator presents the page through a WebView. Wechat applets are designed with dual threads, so there are two WebViews in view layer and logic layer.

Debug logic layer

In wechat developer tools, the DevTools debugger on Workbench is connected to the simulator logic layer by default, so the Console panel in DevTools injects JS scripts. The actual execution environment of JS scripts is the JS Context of the logic layer. You can do this directly in the debugger. Compile and run your applet project, then open the console, type Document and press Enter, and you will see the applet logic layer WebView as shown below:

Debug View layer

Simulator view layer WebView on the relative logic layer trouble, need to inject JS in IDE DevTools to open the view layer WebView DevTools.

IDE DevTools Console Panel input:

$$(' WebView ')[0]. ShowDevTools (true)Copy the code

You can then debug the WebView in DevTools at the view layer.

Reverse techniques

Get the base library

How can we get the files loaded by the view and logical webViews?

• Get the code for the Save AS function based on the Sources panel

• Based on developer tools built-in commandsopenVendor()Find the.wxVPkg package to get the code

Use the help() method in the developer tools to view some directives and methods.

OpenVendor command can open wechat developer tools in the small program framework directory. We can enter the openVendor command on the IDE console of wechat small program and open the resource directory of wechat small program development tool:

We can see WCC, WCSC, small program versions of the base library package. WXVPKG. .wxvpkg files can be unpacked using weike-app-unpack, which contains WAService. Js and wawebView.js codes.

• Use apktool to decompile wechat client

We can find the wxA_library folder, which is very similar to the structure of the.wxvpkg package unlocked in wechat development tools above, which is the basic library of small programs.

Decompiled code

• Unpack using the Weike-app-unpack module

python2 unwxapkg.py [filename]
Copy the code

Untangled directory structure:

The.wxvpkg package in the client has a few more files than the package in the IDE Syndrome pvendor folder.

• Beautify your code with JS-Beautify

find . -type f -name '*.js' -exec js-beautify -r -s 2 -p -f '{}' ;
Copy the code

• Beautify your code with JSNice