在前面一篇文章中我们介绍了小程序开发框架的几个组成部分，今天就让我们了解一下小程序开发框架的底层架构是如何实现的。




基于微信小程序的社交系统的系统架构图 小程序系统架构方案图_数据


小程序的开发框架成为MINA框架，通过上面的框架图我们可以看到三个部分。首先是View(视图层)、App Service(逻辑层)以及Native(系统层)；我们可以看到视图层中包含有小程序的多个页面，每个页面有wxml文件和wxss文件，用来搭建页面的结构和展现样式；逻辑层顾名思义就是处理事务逻辑的地方，是MINA整个数据交互的服务中心，由Manager和API两部分组成，Manager主要负责的是逻辑处理部分的执行，并且各个平台都能通过API获取微信的原生能力。这个小程序是只有一个App Service，并且整个生命周期是长驻内存的。

最后一部分是Native(系统层)接入了微信客户端的原生能力，小程序的视图层和逻辑层是双线程通信的，在视图层和逻辑层之间提供了数据传输和事件系统，视图层和逻辑层通过JSBridge进行通信，逻辑层把数据变化通知到视图层，然后触发视图层的页面更新，视图层把触发的事件通知到逻辑层进行业务处理。那么视图层又是如何实时地展示数据变化的呢？wxml其实是具有元素属性和文本的节点树结构，在节点树中每一个节点都有一个上下文的关系，所以在渲染wxml时小程序的运行环境会把wxml的节点树转化成一个JS对象。当App Service中的数据发送变更时会通过setData方法把数据从逻辑层传到视图层，并且Web View容器会对传过来的数据做一个前后差异对比并进行应用。

了解MINA架构会帮助我们对小程序的底层架构原理有一个清楚的了解和认识，希望这篇文章能对你有所帮助。