小程序MINA框架,及优点
MINA框架:
小程序使用的是MINA框架,目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。
MINA的核心是一个响应的数据绑定系统。
整个系统分为两块:视图层(view,描述语言wxml和wxss)和逻辑层(App Serice,基于 JavaScript)。这可以让数据与视图非常简单的保持同步。当做数据修改时,只需要在逻辑层改数据,视图层就会做响应的更新。开发者只需要将页面路由、方法、生命周期函数注册进框架,其他的一切复杂的操作都将由框架处理。
小程序优点:
• 方便使用:无需下载,打开即用,用完即走。不占用手机内存,省流量,省安装时间
• 开发简单:开发的本质是MVVM风格的Javascript框架上开发的,有前端经验的程序员可以无缝衔接,无经验的“小白”也可以快速入门。
• 跨平台运行:不用再分别开发IOS和Andriod版本,只需要发布微信小程序平台,所有平台都可以使用。开发成本低
• 快速分发与迭代:无需关心各种发布渠道,也无须担心旧版本升级的兼容问题。
打开速度比H5快,体验接近原生APP
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
微信团队为小程序提供的框架命名为MINA。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供一整套JavaScript API,让开发者方便的使用微信客户端提供的各种基础功能与能力,快速构建应用。
MINA框架
微信小程序的框架示意图如下所示:
MINA框架主要分为两大部分:
第一部分页面视图层,开发者使用WXML文件来搭建页面的基本视图结构(WXML是类似于HTML标签的语言和一系列基础组件),使用WXSS文件来控制页面的表现样式。
第二部分AppService应用逻辑层,是MINA框架的服务中心,通过微信客户端启动异步线程单独加载运行,页面渲染所需的数据、页面交互处理逻辑都在其中实现。MINA框架中的AppService使用JavaScript来编写交互逻辑、网络请求、数据处理,但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过AppService实现数据管理、网络通信、生命周期管理和页面路由。
MINA框架为页面组件提供了一系列事件监听相关的属性(比如bindtap、bindtouchstart等),来与AppService中的事件处理函数绑定在一起,来实现页面向AppService层同步用户交互数据。MINA框架同时提供了很多方法将AppService中的数据与页面进行单向绑定(注意数据的绑定方向是单向的),当AppService中的数据变更时,会主动触发对应页面组件的重新渲染。
框架的核心是一个响应式的数据绑定系统,它能让数据与视图很简单的保持同步。只需要在逻辑层修改数据,视图层就会做相应的更新。示例如下:
<!--页面视图层代码--> <view> <text>欢迎使用{{appname}}</text> <button bindtap="changeAppname">更换名称 </button> </view> //AppService应用逻辑层代码 //初始数据 page({ data:{ appname:'易投票' }, changeAppname:function(e){ this.setData({ appname:'我的小程序' }) } })
图1:初始名称
图2:点击按钮“更换名称”以后
示例中数据是如何更新的呢?首先,开发者通过框架将AppService应用逻辑层数据中的appname与页面视图层名为appname的变更进行了绑定,页面在刚打开的时候会显示“欢迎使用 易投票。然后,当点击按钮“更换名称”之后,视图层会发送changeAppname的tap事件给逻辑层,逻辑层找到事件函数changeAppname。最后,逻辑层changeAppname函数执行了setData操作,将对象appname的值改变为“我的小程序”,因为该对象已经在视图层绑定,所以视图层会显示为图2的名称了。
小程序的MINA框架有着接近原生App的运行速度,在框架层面做了大量的优化,在重功能上(page或tab切换、多媒体、网络连接等)上使用接近于native的组件继承,对安卓和ios端做出了高度一致的呈现,还有近乎完备的开发、调试工具。
目录结构