小程序 Webview 及基础模块

Question

本章内容分解：

• 寻找渲染线程文件
• webview 容器设计
• 渲染层文件解析

进入调试微信开发者工具模式，可以发现默认页面会有 4 个 webview：视图层的 webview ， 业务逻辑层 webview ， 调试器的 webview 和 编辑区的 webview

上方 webview 层 src 路径为 pageframe/pages/index/index 是渲染层视图，渲染的就是我们进来时候开到的初始页面。 下方 webview 层 src 路径为 appservice/appservice?*** 是逻辑层视图。微信开发者工具模拟了在移动端的双线程结构。 每个 webview 可以理解为在移动端跑的一条线程

从上方我们自己寻找 webview 代码节点可以知道第一个就是 page/index/index 路径相对应的 webview。
通过 showdevTools 方法来打开调试此 webview 界面的调试器。命令如下：

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

打开此为 小程序渲染层， 从 head 区域开始分析，从上到下：

第一个 style 标签中包含了一些基础 style 标签。展开的部分截图如下：

第一个 style 标签处理了 webview 层的基础组件的样式初始化。这里没有 rpx ，这里就是单纯的 css ，css 选择器，css 的 px

再往下面这个区域，首先可以看到几个全局变量，从英文名称上就可以知道意思：

• webviewId: 从这个 id 又可以再次印证 webview 层不止一个。
• wxAppCode: 整个页面的 json wxss wxml 编译之后都存储在这里，下面有个 script 标签就是它，下面会讲到。
• Vd_version_info: 版本信息

后面的 js 文件如果想看的话，把鼠标放在路径上邮件 open in new tap 即可。

./dev/wxconfig.js 是小程序默认总配置项，包括用户自定义与系统默认的整合结果。在控制台输入__wxConfig 可以看出打印结果

./dev/devtoolsconfig.js 小程序开发者配置，包括 navigationBarHeight,标题栏的高度，状态栏高度，等等，控制台输入__devtoolsConfig 可以看到其对应的信息

./dev/deviceinfo.js 设备信息，包含尺寸/像素点 pixelRatio

./dev/jsdebug.js debug 工具。

./dev/WAWebview.js 渲染层底层基础库，底层基础库后面会重点讲到。

./dev/hls.js 优秀的视频流处理工具。

./dev/WARemoteDebug.js 底层基础库调试工具

WARemoteDebug Script 标签下面的 script 标签内容，展开后非常的长。这里呢也是渲染层的重中之重，这里呢就是后面要讲到的渲染层-编译 virtualDOM 章节以及渲染层-WXSS 动态适配章节。