微信小程序开发与运营
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

2.2 小程序的开发框架

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

小程序MINA框架示意如图2-3所示。

图2-3 小程序MINA框架示意

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言WXML(WeiXin Markup Language)和用于描述WXML组件样式的WXSS(WeiXin Style Sheets)组成,它们的关系就像HTML和CSS的关系。逻辑层(App Service)是MINA框架的服务中心,由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。MINA框架中的逻辑层使用JavaScript来编写交互逻辑、网络请求、数据处理,但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。

MINA框架为页面组件提供了bindtap、bindtouchstart等与事件监听相关的属性,并与逻辑层中的事件处理函数绑定在一起,实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定,当逻辑层中的数据变更时,小程序会主动触发对应页面组件的重新数据绑定。

微信小程序不仅在底层架构的运行机制上做了大量的优化,还在重要功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于系统层(Native)的组件承载。所以,小程序MINA框架有着接近原生App的运行速度,对Android端和iOS端能呈现得高度一致,并为开发者准备了完备的开发和调试工具。

2.2.1 视图层

MINA框架的视图层由WXML与WXSS编写,由组件来进行展示。对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合:. wxml文件用于描述页面的结构;.wxss文件用于描述页面的样式。

微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接收视图层的事件反馈。视图层以给定的样式展现数据并反馈时间给逻辑层,而数据展现是以组件来进行的。组件是视图的基本组成单元。

2.2.2 逻辑层

逻辑层用于处理事务逻辑。对于微信小程序而言,逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。

微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上,微信团队做了适当修改,以便提高开发小程序的效率。主要修改包括:

(1)增加app()和Page()方法,进行程序和页面的注册。

(2)提供丰富的API,如扫一扫、支付等微信特有的能力。

(3)每个页面有独立的作用域,并提供模块化能力。

逻辑层就是通过各个页面的.js脚本文件来实现的。由于小程序并非运行在浏览器中,所以JavaScript在Web中的一些功能在小程序中无法使用,如document、window等。

开发者开发编写的所有代码最终会被打包成独立的JavaScript文件,并在小程序启动的时候运行,直到小程序被销毁。

小程序系统默认提供的app. js文件内容如图2-4所示。

图2-4 app. js文件内容

2.2.3 数据层

数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用。

1.页面临时数据或缓存

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

setData()函数的参数接收一个对象,以(key, value)的形式表示将key在this. data中对应的值改变成value。

2.文件存储(本地存储)

使用数据API接口,如下:

■ wx. getStorage获取本地数据缓存。

■ wx. setStorage设置本地数据缓存。

■ wx. clearStorage清理本地数据缓存。

3.网络存储与调用

上传或下载文件API接口,如下:

■ wx. request发起网络请求。

■ wx. uploadFile上传文件。

■ wx. downloadFile下载文件。

调用URL的API接口,如下:

■ wx. navigateTo新窗口打开页面。

■ wx. redirectTo原窗口打开页面。