微信小程序MINA框架——简明教程(九)

之前的章节中我们介绍了小程序开发框架的几个组成部分,下面我们在学习小程序开发框架底层的一个架构实现,以及小程序启动和运行机制。

一、MINA框架

小程序的开发框架,称为MINA框架,通过这个框架图,我们可以看到三个部分,首先是view视图层,其次是App service 逻辑层和Native系统层。如下图:

《微信小程序MINA框架——简明教程(九)》

二、view视图层

视图层中包含了小程序的多个页面,每个页面上有我们的一个wxml文件和wxss文件,这两个文件是来搭建我们页面视图的结构和展现样式。

三、App service 逻辑层

App service 逻辑层,顾名思义,逻辑层就是处理事务逻辑的地方,它是MINA框架整个数据交互的服务中心。

我们看到逻辑层它是有两个部分,一个是manager,它的主要功能就是负责我们逻辑处理部分的执行;另一部分是底层提供了一个叫做waService.js的文件,来封装我们各个API的接口,让各个平台的运行环境都能通过这个API,使用微信客户端的能力。整个小程序是只有一个App service。那么这个App service逻辑层,是由App service线程来加载运行的。

四、Native系统层

Native系统层里面接入了微信客户端的原生能力,小程序的视图层和逻辑层,它是一个双线程通信的。在视图层和逻辑层之间提供了数据传输和实践系统,那么视图层和逻辑层通过我们系统层的JSBridge 进行通信。逻辑层把我们的数据变化通知到视图层,然后触发视图层的页面更新。视图层能把触发的事件通知给逻辑层进行业务处理。

五、数据交互

视图层是如何将我们的数据变化实时的展示出来呢?首先我们要知道WXML它其实是一个具有元素属性和文本的节点树结构,在节点树结构中,每一个节点它都有一个上下文的关系,所以在渲染WXML的时候,小程序的运行环境会把WXML传统节点数转化成一个JS的对象,这位大家可以下去了解一下AST抽象语法树的概念。

在逻辑层发生数据变更的时候,我们就需要通过App service 提供的一个setData方法,把数据从逻辑层传递到视图层。

如果外部有容器,在渲染我们节点内容的时候,会把我们传过来的数据进行一个前后的对比差异,这个差异是通过算法来进行计算的,然后把我们差异应用在原来的节点树上,渲染出正确的UI界面。

上面就是小程序的一个MINA架构,了解框架的架构,会帮助我们对小程序的底层实现原理,有一个清楚的认识和了解。其实小程序做了很多优化的点,比如我们前面所讲的WXS,它和我们的视图层的WXML和WXSS是一起在UI线程中运行的。

那么我们平常在从服务器请求到了数据之后,通常会做一个转换,或者是做一个呃filter的处理,如果把我们的这些处理放到UI线程去做,会避免了我们跨线程通信的一个消耗。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注