First, writing background

Contact small program more than a year, the real experience is small program development threshold is relatively low indeed. However, the development mode of small programs has always been ridiculed by developers. For example, developers who are used to Vue and React development often ridicule small programs. A Page must be composed of multiple files, and the componentation support is not perfect or not very pleasant to develop components. In the previous small project is not too big feeling, from joining the praise, participate in the development of micro mall small program, is the real experience of the complexity of large small program project development.

Youzan started to develop small programs from the internal test of wechat small programs. In the era when custom components are not supported, it can only split modules or realize components in the form of import. In complex business pages, many modules may be imported, and the corresponding WXSS also needs the import style, in addition to the cumbersome operation, sometimes it is inevitable to miss.

As developers, we certainly want to make work easier, more enjoyable, and improve the way we develop. Therefore, I hope to have a better understanding of the small program framework of wechat and reduce unnecessary trial and error, so I have a debug tour of the small program framework. (Base Library 1.9.93)

Through three weeks of free time debugging, I also had some superficial understanding of the small program framework, and achieved the initial goal. To the small program start, instance, operation and so on have a real experience. This article documents the basic code structure of the applets framework, the startup process, and the program instantiation process.

The purpose of this article is to share what I have seen with readers who are interested in or developing applets, mainly to answer the question “what does the framework do with incoming objects, etc.”

A glimpse into the details of the applets framework from the startup process

Use the help() method in the developer tools to view some directives and methods. The openVendor method can be used to open wechat developer tools in the directory where the small program framework is located. These include directories named after the base library and other help files, such as two tools WCC, WCSC. WCC converts WXML to the corresponding JS function – $GWX (Path, global), and WCSC converts WXSS to CSS. The base library directory includes WAService. Js and waWebView.js files. The applets framework is named WAService. Js in the developer tools.

In the development of the tool command line with document.head you can see the startup process of the small program is roughly as follows:

1. Initialize global variables

Here are some global variables for which the applet startup is initialized:

Those that start with “__” and do not mention available variables in the documentation are not recommended. __wxAppCode__ is divided into two types of values in the developer tools, json and WXML. Ending with the json, the key value for developers to code in the corresponding json file content, the WXML end, its key value is by calling $GWX (‘. / pages/example/index. WXML ‘) will be an executable function, You can call this function to get a JSON tree that identifies the node relationships.

2. Load the framework (WAService. Js)

Use a tool to format WAService. Js and debug it. It can be found that the applets framework is roughly composed of: WeixinJSBridge, NativeBuffer, wxConsole, WeixinWorker, JavaScript compatibility (this is a guess), Reporter, wx, ExParser, __virtualDOM__, __appServiceEngine__ consists of several parts.

In addition to wx and WeixinJSBridge, exParser, __virtualDOM__, and __appServiceEngine__ as the core of the framework, __appServiceEngine__ provides the framework’s most basic interfaces such as App, Page, and Component. Exparser provides the low-level capabilities of the framework, such as instantiation of components, data change listening, view layer and logic layer interaction, etc. __virtualDOM__ is a link between __appServiceEngine__ and ExParser, for example, formatting an object passed in by the developer’s Page method and passing in the corresponding exParser method.

The framework exposes the following apis: Behavior, App, Page, Component, getApp, getCurrentPages, definePlugin, requirePlugin, wX.

3. Loading of business code

In applets, the developer’s JavaScript code is packaged as

define('xxx.js'.function(require, module, exports, window, document, frames, self, location, navigator, localStorage, history, Caches, screen, alert, confirm, prompt, fetch, XMLHttpRequest, WebSocket, webkit, WeixinJSCore, Reporter, print, WeixinJSBridge) {
  'use strict';

  // your code
})
Copy the code

The define here is the method defined in the framework, where two methods are provided: require and define to define and use business code. It works a bit like the AMD specification interface, defining a module with define and applying a module with require. But there are big differences. First, define restricts the other modules that a module can use, such as Window, document; In addition, require passes only require and module when using modules. That is to say, other modules in the parameter are undefined in the defined module, which is why some browser environment objects cannot be obtained in developer tools.

In applets, JavaScript code is also loaded in a slightly different way than in browsers. The loading order is to first load other JS files in the project (js files of non-registered programs and registered pages), then app.js of the registered programs, and then js files of custom components. The last is the JS code for the registration page. And the small program in app.js and registration page js code will be loaded immediately after the implementation of the require method in the module program. Other code needs to use the require method in the program to be executed.

The following details app.js, custom components, page JS code processing flow.

4. Load app.js and the registration program

After app.js is loaded, the applet registers the program with require(‘app.js’), which calls the app method, which is a reference to the __appServiceEngine__.App method.

Here is how the framework handles App method calls:

The App method instantiates an App instance based on the object passed in. The lifecycle functions onLaunch and onShow get options arguments in different ways. In cases where you need to implement requirements based on scenario values, perhaps using scenario values in onShow is more appropriate.

In the actual development process, it was found that the options evoked at the top of wechat were different from those evoked in the list of small programs. In this case, click the shared applets to enter, close the applets, and then enter the applets in different ways. The path attribute of options or shared path is evoked at the top, but it is directly returned to the home page by opening it in the list. Here the onShow in the App will get different options.

5. Load custom component code and register custom components

Custom components are loaded after app.js, and the applet will load all custom components in this process (custom components in the subcontract have not been tested), and automatically register after loading, and only after registration will load the code of the next custom component.

Here’s how the framework handles the Component method:

The figure shows how the framework handles objects passed into the Component method, but there are many further steps to Component instantiation that are not shown in the figure, as you can see in the attachment at the end of this article.

Custom components are becoming more sophisticated in applets and have more power than Page. As we will see later, in pages that use custom components, the Page instance is instantiated the same way as the custom component, that is, it has the same power as the custom component.

Load the page code and register the page

The process of loading the page code is the same as that of loading a custom component. The page is registered after loading, and then the next page is loaded.

Here is how the framework handles the Page method when registering a Page:

The Page method does different processing depending on whether a custom component is used. Page objects that use custom components are treated like custom components and instantiated using a different processing flow when the page is instantiated. Of course it’s no different for development.

As you can see from the figure, the incoming (lifecycle) code for the Page is not executed here. You can see the detailed process of Page instantiation in the following sections.

7. Wait for pages Ready and Page instantiation

Remember waiting for the page Ready at the end of the startup process described above? Strictly waiting for the browser to be Ready, the applet has some native components, but is essentially a Web application.

The onAppRoute event is triggered when a page is switched or opened in the applet. The applet framework registers the handler for the page switch through wx.onAppRoute, and when all the programs are in place, uses entryPagePath as the entry point to the page using appLaunch.

Here is the application flow for handling navigation:

As can be seen from the figure, the page is instantiated when entering the page. The following is the specific instantiation process:

Here is the final Page example:

You can see that there is an onRouteEnd API, which is not actually called. The component tag represents methods and properties that are available only when a custom component is used. As mentioned in section 5 above, pages that use custom components are parsed as custom components, and these properties and methods behave the same as custom components.

8. About setData

Applets framework is a data-driven framework, of course, it can not be less to explore how to achieve data binding, the following is the Page instance setData execution flow:

Where Component :setData represents the setData method that uses the Page instance of the custom component.

Third, write at the end

This is an incomplete exploration of the small program framework, which is the result of debugging in wechat development tools. While not very helpful for actual development, it gives you a clear idea of how the framework handles the JS code you are developing, and a clear sense of how some JS features are used. I’m sorry if you’re wondering what the applet framework does to the objects that are passed in.

Through this debug, NEW problems have been introduced to me, and I hope there will be more discussions:

  • Too many custom components It takes time to process custom components during startup
  • Too many files take time to read
  • Reasonable design subcontracting is very important

A note in the debug process applet framework incomplete analysis. Xmind, if the viewer is interested can download a look. Finally, of course, for the existing capabilities in the framework, we still hope wechat can open more stable interfaces, and inform developers in the document, so that development becomes simpler.

This article was originally posted on The Uptech blog.