Author: Small film front end team — Gudun Road Daniel Wu

Preface:

  1. The core-wxvpkg file code of wechat developer tool released in 2021 has been confused. The version used in this article is 1.02.1904090

  2. Historical version download method:

    1. Developers.weixin.qq.com/miniprogram… Check the historical version in wechat developer tools, and click the update instructions to get it

Basic knowledge:

Applets page composition:

  • .js page logic
  • .WXML page structure (can be understood as HTML), a set of tag language designed by the framework, combined with basic components, event system, can build the structure of the page.
  • .WXSS is a set of style languages (known as CSS) that describe the component styles of WXML.
  • Json page configuration follows the principle of convention over configuration.

Applets framework

The official structure diagram is as follows:

  • Logic Layer (App Service)

    • Logical layer usageJavaScriptEngines provide developers for appletsJavaScriptThe running environment of the code and the unique functions of wechat applets.
    • The logical layer processes the data and sends it to the view layer and receives event feedback from the view layer.

  • View layer

    • The view layer, written in WXML and WXSS, is presented by components.
    • Data from the logical layer is reflected into the view, and events from the view layer are sent to the logical layer.
    • Conclusion: The view layer uses WebView rendering, the logic layer uses JSCore operation, the view layer and the logic layer communicate through JSBridage of the system layer, the logic layer notifies the view layer of data changes, triggers the page update of the view layer, the view layer notifies the triggered event to the logic layer for business processing

Verify in wechat developer tools

Wechat development tools to show the explanation, small program logic layer javascript code is running in nw.js, view layer is rendered by Chromium Webview

Taking the micro channel small program component Demo project as an example, we can see that the page of small program is determined by four parts:.js/.json/.wxml/.wxss.

If you look at the red box, the rendering results and the original code in the applet, you can see that the markup language of WXML is different from that of traditional HTML, so you can see that the view layer in the applet framework, the view layer is essentially rendered in a Webview, so rendering in a Webview, It must correspond to tags and associated styles to determine the composition of the page.

So how do we debug through wechat developer tools? Take a look at what rendered tabs look like.

We select Debug in tools => Debug wechat developer tools

Select the content area, we find that the content is rendered by the webView tag, and there is an AppService WebView, so we venture to guess that the PageFrame WebView is the corresponding view layer in the frame. Appservice webView corresponds to the logical layer, the first Webview also has a route attribute, which is to control the page jump, how to achieve it? Keep going further.

At this point, we have found the webView corresponding to the view layer and the logical layer, so we want to know what is inside? Let’s take a look at the label

I can’t see anything, so what if WE just change the webView to iframe?

Unfortunately, the screen went blank.

Now, how else can we look at this?

Through official documentation, we see small program developer tools developed using Nw.js

So let’s look at the nw.js official document, for the introduction of the Webview tag, the content is as follows

See the red box part of the content, I believe you have ideas again

So, following the API in the documentation, first, look at all the WebView tags in the debugger

document.getElementsByTagName('webview')
Copy the code

We can see that there are 4 tags with webView names. If we select the first WebView, we can see that the corresponding webView is the render layer webView.

We then execute showDevTools, the WEBView API provided by nw.js

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

Open a new debug page, this below the structure at a glance, you can see the body is a pile of tags, this is not difficult to understand developer.mozilla.org/zh-CN/docs/… Refer to the introduction of Web Components in MDN

Two excellent open source projects on Web Components, Polymer and Stencil

The above is the whole content of this eye-to-eye layer parsing, reference:

  • WXML translator implementation process analysis
  • From the micro channel small program developer tool source code to see the implementation principle

, recruiting

Xiaoying front End team, a young, active and creative team, belongs to Xiaoying Technology Development Center, based in picturesque Hangzhou. In addition to daily business docking, the team also carried out technical exploration and practice in the fields of interactive technology, image rendering, cross-end technology, engineering platform, performance experience, data analysis and visualization, promoted and implemented a series of internal technical products, and kept curious and continued to explore front-end technology. If you want to speak your mind boldly and confidently; If you want a chance to make your ideas work; If your idea of landing is supported by a team; If you are willing to work with a group of positive friends to continue to iterate on yourself, continue to improve technical ability; If you believe in the power of belief; Then join us! Quick stamp link > > > quvideo. Jobs. Feishu. Cn/s/eV8jfyf