前言：

随着微信小程序的日益发展和繁荣，相信很多前端开发者都写不出很多微信小程序应用。那么，除了应用开发之外，你是否也对小程序框架本身的一些实现原理感到好奇呢？今天我们就来探讨一下小程序的诞生和架构原理。

1、微信小程序的诞生

小程序是期望的产物。 H5页面的推广方式有很多，但同时H5也有自己的缺点，无法获取底层APP的很多功能。随着微信推出微信公众号，并提供一系列用于Web开发的JS-SDK，Web开发者越来越频繁地使用微信的原生能力。加载体验比较差。微信作为一个平台，有责任优化用户体验。那么平台是如何优化这种用户体验的呢？作为平台，如何保证平台不被滥用？小程序就是在这样的期望下诞生的。一方面，小程序是基于开发的，其目的是降低开发成本、实现异步加载、允许开发者在线更新版本、修复bug。前面提到，使用很容易导致加载体验不佳。小程序采用双线程的方式，将页面渲染和逻辑代码加载分离，减少页面卡顿的可能性。同时，小程序提供基础能力和原生组件，让用户获得原生应用的体验。另一方面，微信平台通过平台发布、审核、下架等封禁能力实现对小程序的管控，保护平台，防止平台被滥用。

2. 小程序的架构原理

前面提到，采用双线程的方式，分别加载页面渲染和逻辑代码。那么小程序是如何实现的呢？下面我们一起来探讨一下小程序的架构设计。

小程序采用双线程管理模式。首先贴出微信小程序的架构图。

.png

微信小程序的框架由两部分组成，即视图渲染View层和代码逻辑层。视图渲染层用于渲染页面结构，代码逻辑层用于运行JS脚本。视图层和逻辑代码层使用双线程进行管理。视图层在线程上运行。在线程中，wxml会转换成html，wxss会转换成css，最后显示到我们的视图中。代码逻辑层运行在另一个线程中，即JS执行引擎线程（不同的环境，实现的引擎不同。在IOS中，使用V8引擎或在中使用x5 JS解析器。在开发工具中，使用nwjs内核，我们统称为）。中，提供了运行环境。小程序在这个线程中的执行主要执行小程序的逻辑代码。视图层和代码逻辑层是两个独立的执行线程，两个线程之间的通信都经过我们。

上面我们从整体上介绍了小程序的整个结构，下面我们根据不同的部分来简单分析一下。

视图渲染视图层

视图层在线程中运行。我们首先可以从开发者工具调试->调试->调试开发者工具进入调试代码时发现这一点。如下图：

(1).png

(2).png

从上图可以清楚地看到，小程序运行时，整个视图都转换成了我们熟悉的html+css格式。我们通常开发的视图展示都是托管在其中的。

我们可以通过下面这行代码打开对应的视图层代码。

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

打开如下：

(3).png

可以发现，携带的内容实际上是一个html，它的标签是类似web的组件形式。小程序通过小程序的基础库来识别这些标签，进行识别和分析。

我们知道，我们通常开发微信小程序视图层代码都是通过编写WXML和WXSS来实现的。那么小程序是如何将WXML和WXSS转换成hmtl和css的呢？这也是通过小程序的基础库来完成的。我们可以通过开发者工具->调试->打开调试目录->公共库目录来打开我们的基础库目录。如下，2.04。和2.16.0。是基础库的不同版本，其他的是一些其他相关文件。

(4).png

有两个运行脚本，wcc 和 wcsc。

基础库文件解压后得到以下文件。

(5).png