小程序运行环境讲解(一): 微信开发者工具中运行环境分析

小影前端团队
1,590 阅读4分钟

作者：小影前端团队——古墩路吴彦祖

前言：

  1. 2021发布的微信开发者工具core.wxvpkg 文件代码已加混淆，该文章中所使用的版本是1.02.1904090

  2. 历史版本下载方式：

    1. developers.weixin.qq.com/miniprogram… 微信开发者工具中查看历史版本，点击更新说明即可获取

基础知识：

小程序页面的构成：

  • .js 页面逻辑
  • .wxml 页面结构(可以理解为html)，框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
  • .wxss 是一套样式语言(可以理解为css)，用于描述 WXML 的组件样式。
  • .json 页面配置按照『约定优于配置』的原则。

小程序框架

官方架构示意图如下：

  • 逻辑层（App Service）

    • 逻辑层使用 JavaScript引擎为小程序提供开发者 JavaScript代码的运行环境以及微信小程序的特有功能。
    • 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

  • 视图层（View）

    • 视图层由 WXML 与 WXSS 编写，由组件来进行展示。
    • 将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
    • 总结：视图层使用WebView渲染，逻辑层使用JSCore运行， 视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理

在微信开发者工具中验证

微信开发工具来展示说明，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的

以微信小程序组件demo工程为例，我们可以看到，小程序的页面就是由.js/.json/.wxml/.wxss 四部分决定的。

看红框部分的内容，在小程序中渲染的结果及原始的代码，可以看到wxml的标签语言和传统的html还是不一样的，那么我们从小程序框架中的视图层了解到，视图层本质上也是在Webview中渲染的，那么在webview中渲染，肯定对应的还是标签及相关的样式，来决定页面的构成。

那么我们如何通过微信开发者工具进行调试呢？看下渲染的标签到底是长啥样的。

我们在工具中选择调试 => 调试微信开发者工具

选中内容区域，我们发现这块内容是由webview的标签渲染的，并且还有一个appservice的webview，那么我们大胆猜测，其中pageframe的webview就是框架中对应的视图层，appservice的webview的对应的就是逻辑层，第一个webview还有一个route属性，说明是控制页面跳转的，具体是如何实现的呢？继续往下深入。

到了这里，我们已经找到了视图层和逻辑层对应的webview了，那么，我们想知道里面到底是个啥呢？我们把标签点开看下

啥也看不到，那我们把webview直接改成iframe呢？

很遗憾，直接白屏了。

到了这里，我们还有什么方法查看呢？

通过官方文档，我们看到小程序开发者工具使用NW.js开发的

那么我们再查看nw.js官方文档中，对于webview标签的介绍，内容如下

看到红框部分的内容，相信大家又有思路了

那么，我们按照文档上的api操作下，首先，查看调试工具中的所有webview标签

document.getElementsByTagName('webview')

可以看到出现了4个标签名称是webview的，我们选择第一个webview 可以看到对应的就是渲染层的webview。

我们再执行nw.js提供的webview的api showDevTools

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

打开了一个新的调试页面，这下里面的结构一目了然了，可以看到body下就是一堆的的标签，这个不难理解 developer.mozilla.org/zh-CN/docs/… 参考MDN中对web components的介绍就了解了

分享两个关于web components的优秀开源项目polymer和stencil

以上是本次对视图层解析的全部内容，参考文献：

招贤纳士

小影前端团队，是一个年轻、活动且富有创造力的团队，隶属于小影科技开发中心，Base 在风景如画的杭州。团队在日常的业务对接之外，还在互动技术、图像渲染、跨端技术、工程化平台、性能体验、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，并一直保持好奇，持续探索前端技术。 如果你想大胆自信的表达你的想法；如果你想有个机会实现自己的想法；如果你希望落地的想法有一个团队来支撑；如果你愿意跟一群积极向上的小伙伴干一些持续迭代自己，持续提升技术能力的事；如果你相信相信的力量；那就加入我们吧！快戳链接>>>quvideo.jobs.feishu.cn/s/eV8jfyf

avatar
文章
阅读
粉丝