初探微信小程序渲染层原理-一一网

渲染层基本内容

webview + iframe

将wxml和wxss转换后的html通过webview 和iframe内嵌到小程序中

通过微信开发者工具=>调试=>调试微信开发者工具打开

如果需要打开iframe，可以输入该代码在console中打开

document.querySelectorAll('webView')[0].showDevTools(true,null)
复制代码

body里的wx-view是通过vdom使用exparser自定义的组件模型

wxml=>html wxss=>css

wxml和wxss分别会通过wcc.exe和wcsc.exe转换为html和css

openVendor()

console中调用该函数，会打开基础库文件夹，文件夹中有wcc.exe,wcsc.exe两个执行文件

wcc.exe

wcc.exe -b index.wxml >> wxml.js //编译wxml文件，得到即可拿到wxml转换后的js文件
复制代码

$gwx 是WXML编译后得到的函数,通过$gwx传入page路径，即可拿到该路径对应的渲染函数
页面结构生成渲染函数接受页面数据，得到描述页面结构的JSON,其中children[’10’]就是传入的参数{age:10}
但需注意，调用渲染函数，只会在WeixinJSBridge 渲染层和逻辑层都准备后才会执行

$gwx('index.wxml')({age:10})
复制代码

通过Exparser将vdom转换为真实dom并渲染到html中

Exparser是微信小程序的组件组织框架，内置在小程序基础库中，为小程序的各种组件提供基础的支持。小程序内的所有组件，包括内置组件和自定义组件，都由Exparser组织管理。

Exparser可以看小程序自定义组件中的实现

wcsc.exe

wcsc.exe -js index.wxss >> wxss.js
复制代码

获取到转换后的js文件,预处理rpx，并调用setCssToHead将最终的css代码添加到头部

在运行时，根据当前的屏幕宽度，计算出1rpx对应多少像素单位，然后将样式信息数组转换成最终的样式添加到页面中。
由于样式在微信客户端存在兼容性问题，为了方便开发者，微信开发者工具提供了上传代码时样式自动补全的功能，利用PostCSS 对WXSS文件进行预处理，自动添加样式前缀。

渲染函数的调用时机

开发者工具底层搭建的HTTP本地服务器在收到这个请求的时候，就会编译WXML文件和WXSS文件，然后将编译结果作为HTTP请求的返回包。当确定加载页面的路径之后，如index页面，开发工具会动态注入如下一段脚本：

// 改变当前webview 的路径，确保之后的图片网络请求能得到正确的相对路径
history.pushState('', '', 'pageframe/index')

// 创建自定义事件，将页面结构生成函数派发出去，由小程序渲染层基础库处理
document.dispatchEvent(new CustomEvent("generateFuncReady", {
   detail: {
     generateFunc: $gwx('index.wxml')
   }
}))


 //小程序渲染层基础库监听
 generateFuncReady = function() {
    setTimeout(function() {
          !function() {
            var e = arguments;
            r(function() {
              //通过WeixinJSBridge进行通信，需要逻辑层以及渲染层都准备好了才会执行渲染函数
              WeixinJSBridge.publish.apply(WeixinJSBridge, o(e))
            })
        }("GenerateFuncReady", {})
    }, 20)
  }
  document.addEventListener("generateFuncReady", generateFuncReady)
复制代码