preface

Recent period of time in the study of the implementation of micro channel small program and small game compiler packaging and operating environment platform development. At present, it can basically support the function iteration of wechat basic library 2.8.2. So I want to share some problems and solutions in my cognitive process to better understand the advantages and disadvantages of small program design.

Before this, there were some open source references on the Internet based on wechat base library version 1.0. The core author is based on the project together of Brother Qiming, an open source giant (currently, I have the honor to work with Brother Qiming to understand the overall architecture of this small program, which has helped me a lot). As the operating environment together is based on the version 1.0 of wechat basic library, it is not maintained, and the time is 2016. Some features newly added in the subsequent updated version, such as the customized component NPM package and many APIS, are not supported by the development implementation. The most important thing is that wechat has changed the communication mode of the bottom layer in the subsequent architecture and adopted the way of Webstock and other changes.

Behind the text I will pass a few articles to describe the whole from tools to crack to the source code to parse and principle to the implementation process The beginning to look a lot of information on the Internet, also saw some people write analytic WeChat small application architecture, and learn to understand a lot, but if you want to simulate implemented such a thing there are still quite confused, So I want to realize the process through us to a little bit from the essence of the phenomenon to analyze the micro channel small program compilation and operation principle.

I had more confidence in myself in everything. I insisted more and learned more. I thought about the problems we met.

This article will start with a thorough analysis of the wechat developer tools to understand those basic files and content components (from the appearance of the essence).

  • Before this we can know some content through the official documentation of the entire applets framework system is divided into two parts: the logic layer (App Service) and the View layer (View);
  • Applets provide their own view layer description languages WXML and WXSS;
  • Based on JavaScript logic layer framework, and between the view layer and logic layer provides data transmission and event system they run in two threads;
  • The view layer uses WebView rendering, and the logic layer uses JSCore to run. The view layer and the logic layer communicate with each other through JSBridage of the system layer. The logic layer notifies the view layer of data changes and triggers page updates of the view layer.
  • The view layer notifies the logical layer of triggered events for business processing.

From the above description we can learn some important information logic layer (App Service) and View layer (View) and communication coordination between the two.

The javascript code of the logic layer of the small program is run in Nw.js, and the view layer is rendered by Chromium 60 Webview

They communicate through the Webstock protocol.

We will focus on the MAC environment

Let’s first open the official demo of wechat development tool as shown in the figure below:

From the figure above and some of our understanding we know that the micro channel applet file format is mainly composed of:

  • .js main page logic;
  • . WXML page structure, a set of tag language framework design, combined with basic components, event system, can build the structure of the page;
  • . WXSS is a style language that describes the component styles of WXML;
  • Json page configuration follows the principle of convention over configuration.

Next we first find the native wechat developer tools application package as shown in the figure

The main code we’ll examine later is in package.nw and core.wxvpkg.

These files will be used for instruction purposes later in the implementation.

  • The content in the js file is mainly used for page and logical layer rendering, as will be seen later;
  • Core. WXVPKG is the core file in this package. Decrypt this package to know a lot of logic.

Core. WXVPKG unzip code upload in unwxvpkg everyone interested can try first.

Let’s go back to the developer tools and open:

Wechat developer Tools — Debug — Debug wechat developer tools

After debugging, we can see the following interface:

From the above phenomenon, we can see that the structure of its two rendering layers and logical layers is contained in two WebViews. The first corresponding WebView is the rendering layer and each page has a corresponding address, but the logical layer appService has only one constant. Next we can look at the WebView If we change the webView tag of the View layer to iframe, we can see that wechat will not be displayed in the view layer and the page will be blank

If you change the WebView of AppService, wechat will also give you various alert popups. Anyway, it probably doesn’t want you to analyze its code

Click to confirm the elimination can not eliminate can only restart the compilation of a little disgusting ah actually don’t let us look aboveboard, then we can only make some sidesteps to destroy our first step or open: wechat developer tools – > debug – > debug wechat developer tools

Enter on the console


document.getElementsByTagName('webview')
Copy the code

You can see that there are four webViews, and we’re going to focus on the first webView because you can click on it and see that the first webView corresponds to the render layer webView

The last few can be ignored for now, we will explain in detail

We then execute the command to open the first webView:


document.getElementsByTagName('webview') [0].showDevTools(true.null)
Copy the code

You can see here

Now we can see the structure of wechat page rendering layer

(Here is a description of the contents of the files in this article. I will explain the source and purpose of each file in the following chapters. Because it involves too much content, I am afraid that it will be too long in one article. Wawebview.js WAService. Js and the use of the synchronization API and request in the page appService.js, etc., will be briefly described in this article without too much discussion, and will be updated gradually.

The webView above can find the corresponding page layer structure, so how to find the AppService?

In fact, the simplest we directly in the home console inside the document can be directly shown to see the logical layer code

(My approach is to write wechat alert and some files of the base library can see this structure)

Note that wechat has rewritten the window and document objects in the micro game, so it cannot be directly used as we normally operate the page

Next, let’s look at the basic library file of wechat applet

The way we do that is we go to the home console and type in openVendor()

We can see the popup file system, which is the local one you chose

Details == debug Base library == Select the base library version

  • The.wxvpkg file is the package for each base library version. We unpack this package and we can see its composition;
  • WCC executable for converting WXML to JS for view module;
  • WCSC executable program used to convert WXSS to CSS used by view module.

Wawebview. js and WAService. Js are the base library files in the.wxvpkg package.

Unzip. WXVPKG format package code address github

For WCC and WCSC source code it is not necessary to study it now, but we can use the script hijacking method to see what command operations it runs

Here is a way to hijack his run command

Find the location of wechat developer tools WCC and WCSC and create two new scripts with the same name, then rename the original file, and restart wechat developer tools must restart or it will not take effect

WCC WCSCA hijacking script code address github

Then we go to the home console again and type openVendor() to see the output file

  • From the above figure we can see that in the following figure we can see that some information is first loaded when the WCC executes -ds-d-xC… And -ds-d-cc… Structure of the command can see wechat for the first time all. WXML are executed
  • You can see that there is a number in the parameter that actually corresponds to several. WXML file forms only exist. Some formats such as WXML and custom components are not counted
  • -xc-cc actually corresponds to the following two logical layer and render layer inside the JS mode

  • I found that when we changed a little bit in.wxml, wechat would compile all the commands again and it would take a lot of time to execute these commands and that could be improved.
  • Another unfriendly thing the wechat developer tool feels is that javascript files larger than 500KB will not be converted and compressed for you in ES6, even if you set wechat, it will not be transferred to you, as can be seen from the resources in Source.

The command that WCC executes ultimately generates the javascript code in the $GWXC () method of the logic layer and the rendering layer, which you can test manually.

The main thing WXSS generates is eval() in the render layer

This article only briefly describes some of the key documents.

I’m going to go through the key documents later and describe exactly what he did and why he used it.

The next article will bring you the rendering layer and logical layer of the specific page file content structure analysis, as well as the application of Webstock communication architecture in wechat developer tools, you can first look at.

In fact, the coordination between them and the API on the public wx. object are implemented through webSocket protocol messages.

The author of this article: The author of the death of the wind public number: small wind north blogger reprinted after obtaining authorization. If you need to reprint please contact the blogger to obtain authorization.