如何通过分析小程序开发者工具源码来理解其原理实现？

本文共计2757个文字，预计阅读时间需要12分钟。

目录+如何查看小程序开发者工具源码+小程序架构设计+1. 小程序渲染是在同一个线程吗？双线程机制+2. 小程序是web渲染吗？界面渲染机制+3. 小程序是用web的HTML标签渲染吗？Exparser组件

目录

• 如何查看小程序开发者工具源码
• 小程序架构设计
• 1、小程序渲染是在同一个线程吗？双线程机制
• 2、小程序是web渲染吗？界面渲染机制
• 3、小程序是用web的html标签渲染吗？Exparser组件框架
• 4、小程序可以操作dom吗？数据驱动
• 5、小程序基础库作用到底是什么？

如何查看小程序开发者工具源码

下面我们通过微信小程序开发者工具的源码来说说小程序的底层实现原理。以开发者工具版本号State v1.02.1904090的源码来窥探小程序的实现思路。如何查看微信源码，对于mac用户而言，查看微信小程序开发者工具的包内容，然后进入Contents/Resources/app.nw/js/core/index.js，注释掉如下代码就可以查看开发者工具渲染后的代码。

// 打开 inspect 窗口 if (nw.App.argv.indexOf('inspect') !== -1) { tools.openInspectWin() }

然后重启小程序开发者工具，就出现如下左侧页面，点击其中一个页面就能看到view层的dom结构，如下图右侧。