初识小程序-MINA框架

MINA框架

小程序提供的开发框架为MINA框架，它类似于淘宝Weex、Vue框架。MINA框架经过大量底层的优化设计，有着接近原生App的运行速度，对Android端和iOS端做到了高度一致的呈现，具有完备的开发和调试工具。

MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力，快速构建一个应用。

小程序MINA框架示意图:

MINA.png

通过框架图我们可以看到两大部分：
■在页面视图层，wxml是MINA提供的一套类似于HTML标签的语言以及一系列基础组件。开发者使用wxml文件来搭建页面的基本视图结构，使用wxss文件来控制页面的展现样式。
■AppService应用逻辑层是MINA的服务中心，由微信客户端启用异步线程单独加载运行。页面渲染所需的数据、页面交互处理逻辑都在AppService中实现。MINA框架中的AppService使用JavaScript来编写交互逻辑、网络请求、数据处理，但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过AppService实现数据管理、网络通信、应用生命周期管理和页面路由。

MINA框架为页面组件提供了bindtap、bindtouchstart等事件监听相关的属性，来与AppService中的事件处理函数绑定在一起，实现页面向AppService层同步用户交互数据。MINA框架同时提供了很多方法将AppService中的数据与页面进行单向绑定，当AppService中的数据变更时，会主动触发对应页面组件的重新渲染。MINA使用Virtual-DOM技术，加快了页面的渲染效率。

框架的核心是一个响应的数据绑定系统，它让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

结构层

逻辑层

微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

视图层

框架的视图层由WXML（WeiXin Markup language）与WXSS（WeiXin Style Sheet）编写，由组件来进行展示。于微信小程序而言，视图层就是所有．wxml文件与．wxss文件的集合。

数据层

数据层包括临时数据或缓存、文件存储、网络存储与调用。

1．页面临时数据或缓存

在Page()中，我们要使用setData函数来将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

2．文件存储（本地存储）

使用数据API接口，如下所示：
■wx.getStorage：获取本地数据缓存。
■wx.setStorage：设置本地数据缓存。
■wx.clearStorage：清理本地数据缓存。

3．网络存储或调用

上传或下载文件API接口，如下：
■wx.request：发起网络请求。
■wx.uploadFile：上传文件。
■wx.downloadFile：下载文件。

4.cookie

小程序中是没有cookie的，为了兼容目前大部分Web App的登录管理时使用cookie的，小程序在请求发送时，客户端可以动态地给请求设置Header发送报文的cookie。实现代码类似于如下代码：

 wx.request({
   header: { cookie:‘xxx'}, 
   url:"xxx", data:{},
   success:function(res){},
   fail:function(res){}
 });

注意:

1).cookie本身不能在客户端进行读写。
2).storage对每个小程序的大小是5M，支持同步和异步。