Render layer basic content

webview + iframe

WXML and WXSS converted HTML is embedded in the applet through webView and IFrame

Through wechat developer tool => Debug => Debug wechat developer tool open

If you need to turn on iframe, you can enter this code to turn it on in the console

document.querySelectorAll('webView') [0].showDevTools(true.null)
Copy the code

The wX-View in the body is a custom component model using ExParser via VDOM

wxml=>html wxss=>css

WXML and WXSS are converted to HTML and CSS via wcc.exe and wCsc.exe respectively

openVendor()

If you call this function on console, you will open the base library folder, which contains two execution files, wcc.exe and wcsc.exe

wcc.exe

Wcc.exe -b index. WXML >> wxml.js // WXML file is converted into WXML fileCopy the code

  • $GWX = $GWX = $GWX = $GWX = $GWX = $GWX = $GWX

  • The page structure generation render function takes the page data and returns JSON describing the page structure, where children[’10’] is the parameter {age:10} passed in.

  • Note, however, that the call to render function will only be executed after WeixinJSBridge render layer and logic layer are prepared

$gwx('index.wxml') ({age:10})
Copy the code

​

The VDOM is converted into a real DOM and rendered into HTML using Exparser

Exparser is the component organization framework of wechat small program, which is built into the basic library of small program and provides basic support for various components of small program. All components within the applets, both built-in and custom, are managed by the Exparser organization.

Exparser looks at the implementation in the applets custom component

wcsc.exe

wcsc.exe -js index.wxss >> wxss.js
Copy the code

Get the transformed JS file, preprocess the RPX, and call setCssToHead to add the final CSS code to the header

At run time, the number of pixels per 1rpx is calculated based on the current screen width, and the array of style information is converted into the final style to add to the page. Due to the compatibility problems of styles in the wechat client, for the convenience of developers, wechat developer tools provide the function of automatic style completion when uploading codes, using PostCSS to preprocess WXSS files and automatically add style prefixes.

When to call the rendering function

Upon receiving the request, the HTTP local server at the bottom of the developer tool compiles the WXML file and WXSS file, and returns the compiled result as the HTTP request package. After determining the path to load a page, such as the Index page, the development tool dynamically injects the following script:

// Change the path of the current WebView to ensure that subsequent image network requests get the correct relative path
history.pushState(' '.' '.'pageframe/index')

// Create a custom event to distribute the page structure generating function, which is handled by the applet rendering layer base library
document.dispatchEvent(new CustomEvent("generateFuncReady", {
   detail: {
     generateFunc: $gwx('index.wxml')}}))// Applets render layer base library listener
 generateFuncReady = function() {
    setTimeout(function() {!function() {
            var e = arguments;
            r(function() {
              // To communicate via WeixinJSBridge, the render function is executed only when both the logic layer and the render layer are ready
              WeixinJSBridge.publish.apply(WeixinJSBridge, o(e))
            })
        }("GenerateFuncReady"}, {}),20)}document.addEventListener("generateFuncReady", generateFuncReady)
Copy the code