微信开发者工具source看不了代码_从微信小程序开发者工具源码看实现原理（一）- - 小程序架构设计...

使用微信小程序开发已经很长时间了，对小程序开发已经相当熟练了；但是作为一名对技术有追求的前端开发，仅仅熟练掌握小程序的开发感觉还是不够的，我们应该更进一步的去理解其背后实现的原理以及对应的考量，这可能会解释我们在开发过程中遇到的一些疑惑，比如为啥小程序不能操作dom、小程序是web技术渲染还是native技术渲染等等，另一方面对于我们个人成长也是有帮助的。

首先声明下，文章查看小程序开发者工具源码的方法仅限学习使用。

本文将从以下几个方面来说一下小程序的实现原理

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

下面我们通过微信小程序开发者工具的源码来说说小程序的底层实现原理。以开发者工具版本号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结构，如下图右侧。

|

小程序架构设计

小程序的架构设计与web技术还是有一定的差别，其吸取了web技术的一些优势，同时也摒弃web技术中体验等不好的地方。下面通过问题的形式来说说小程序架构中的一些设计点。

1、小程序渲染是在同一个线程吗？双线程机制

开发过小程序的都知道，小程序是双线程设计，即视图渲染与业务逻辑分别在运行在不同的线程中。这个设计主要是解决web技术中的一个痛点：

web页面开发渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应或者白屏，体验糟糕。

小程序为了更好体验，将页面的渲染线程和脚本线程分开设计在不同线程中执行，具体实现：

视图view层在webview中渲染，一个页面对应一个webview

业务逻辑Appservice层运行在同一个JSCore线程中，具体ios是JavaScriptCoreÿ