微信小程序开发框架 (MINA) 详解
小程序开发框架的目标是通过尽可能简单, 高效的方式让开发者可以在微信中开发具有原生 App 体验的服务.
微信团队为小程序提供的框架命名为 MINA.MINA 框架通过封装微信客户端提供的文件系统, 网络通信, 任务管理, 数据安全等基础功能, 对上层提供一整套 JavaScript API, 让开发者方便的使用微信客户端提供的各种基础功能与能力, 快速构建应用.
MINA 框架
微信小程序的框架示意图如下所示:
MINA 框架主要分为两大部分:
第一部分页面视图层, 开发者使用 WXML 文件来搭建页面的基本视图结构 (WXML 是类似于 html 标签的语言和一系列基础组件), 使用 WXSS 文件来控制页面的表现样式.<喎"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+tdq2/rK/t9ZBcHBTZXJ2aWNl06bTw8LfvK2y46OsysdNSU5Bv/K83LXEt/7O8dbQ0MSjrM2ouf3OotDFv827p7bLxvS2r9Lssr3P37PMtaW2wLzT1NjUy9DQo6zSs8Pm5NbIvsv50Oi1xMr9vt2hotKzw+a9u7ultKbA7cLfvK22vNTaxuTW0Mq1z9aho01JTkG/8rzc1tC1xEFwcFNlcnZpY2XKudPDSmF2YVNjcmlwdMC0seDQtL27u6XC37ytoaLN+MLnx+vH86Giyv2+3bSmwO2jrLWrsrvE3Mq508NKYXZhU2NyaXB01tC1xERPTbLZ1/eho9Chs8zQ8tbQtcS497j20rPD5r/J0tTNqLn9QXBwU2VydmljZcq1z9bK/b7dudzA7aGizfjC582o0MWhosn6w/zW3MbaudzA7brN0rPD5sK308mhozwvcD4KPHA+TUlOQb/yvNzOqtKzw+bX6bz+zOG5qcHL0rvPtcHQysK8/rzgzP3P4LnYtcTK9NDUo6ixyMjnYmluZHRhcKGiYmluZHRvdWNoc3RhcnS1yKOpo6zAtNPrQXBwU2VydmljZdbQtcTKwrz+tKbA7bqvyv2w87ao1NrSu8bwo6zAtMq1z9bSs8Pmz/JBcHBTZXJ2aWNlsuPNrLK908O7p727u6XK/b7doaNNSU5Bv/K83M2syrHM4bmpwcu63Lbgt723qL2rQXBwU2VydmljZdbQtcTK/b7d0+vSs8PmvfjQ0LWlz/Kw87aoo6jXotLiyv2+3bXEsPO2qLe9z/LKx7Wlz/K1xKOpo6y1sUFwcFNlcnZpY2XW0LXEyv2+3bHkuPzKsaOsu+HW97avtKW3orbU06bSs8Pm1+m8/rXE1tjQwuTWyL6hozwvcD4KPHA+PHN0cm9uZz6/8rzctcS6y9DEysfSu7j2z+zTpsq9tcTK/b7dsPO2qM+1zbOjrMv8xNzIw8r9vt3T68rTzby63LzytaW1xLGjs9bNrLK9PC9zdHJvbmc+oaPWu9Do0qrU2sLfvK2y49DeuMTK/b7do6zK0828suO+zbvh1/bP4NOmtcS4/NDCoaPKvsD9yOfPwqO6PC9wPgoKPHByZSBjbGFzcz0="brush:java;"> 欢迎使用{{appname}} <button bindtap="changeAppname"> 更换名称 //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 端做出了高度一致的呈现, 还有近乎完备的开发, 调试工具.
目录结构
典型的小程序目录结构非常简洁, 一般一个项目包含两个目录 (pages 和 utils) 三个文件(App.JS,App.JSON,App.wxss).pages 目录下包括程序所需的各个页面, 一个页面对应一个目录, 包含 2 至 4 个文件(.JS,.wxml,.JSON 及. wxss).utils 目录则包含一些公共的 JS 代码文件. 当然, 我们还可以添加其他的公共目录, 如用来存放本地图片资源的 images 目录.
逻辑层
小程序的逻辑层就是所有. JS 脚本文件的集合. 小程序在逻辑层处理数据并发送至视图层, 同时接受视图层发回的事件请求.
MINA 框架的逻辑层是由 JavaScript 编写, 在此基础上, 微信团队做出了一些优化, 以便更高效的开发小程序, 这些优化包括:
1, 增加 App 方法用来注册程序, 增加 page 方法用来注册页面;
2, 提供丰富的 API 接口;
3, 页面的作用域相对独立, 并拥有了模块化的能力;
简单概括, 逻辑层就是各个页面的. JS 脚本文件.
需要注意的是, 小程序的逻辑层由 JS 编写, 但并不是在浏览器中运行的, 所以 JavaScript 在 web 中的一些能力都不能使用, 比如 dom,Windows 等, 这也是我们开发过程中要克服的阻碍.
视图层
对于微信小程序而言, 视图层就是所有的. wxml(WeiXin Markup language)文件与. wxss(WeiXin Style Sheet)文件的集合:.wxml 用于描述页面结构而. wxss 用于描述页面样式.
视图层以给定的样式来展现数据并反馈事件给逻辑层, 而数据展现是以组件来进行的. 组件 (Component) 是视图的基本组成单元.
数据层
数据层包括临时数据或缓存, 文件存储, 网络存储与调用.
1, 页面临时数据或缓存
在页面 page()中, 我们要使用 setData 函数来将数据从逻辑层发送到视图层, 同时改变对应的 this.data 的值. this 在小程序中一般指调用页面, 广泛情况下指的是包含它的函数作为方法被调用时所属的对象. 直接修改 this.data 是无效的, 无法改变页面的状态, 还会造成数据的不一致. 单次设置的数据有一个大小限制, 不能超过 1024KB, 避免一次性设置过多的数据.
setData()函数的参数接受一个对象. 以 key,value 的形式表示, 将 this.data 中的 key 对应的值改变为 value.key 可以非常灵活, 包括以数据路径的形式表示, 如 array[0].title, 并且无需在 this.data 中预定义.
2, 文件存储(本地存储)
使用微信提供的现成数据 API 接口, 如:
wx.getStorage: 获取本地数据缓存
wx.setStorage: 设置本地数据缓存
wx.clearStorage: 清理本地数据缓存
3, 网络存储与调用
上传或下载文件的 API 接口, 如:
wx.request: 发起网络请求
wx.uploadFile: 上传文件
wx.downloadFile: 下载文件
调用 URL 的 API 接口如下:
wx.navigateTo: 保留当前页面, 跳转到应用内的某个页面. 但是不能跳到 tabbar 页面. 可返回原页面.
wx.redirectTo: 关闭当前页面, 跳转到应用内的某个页面. 但是不允许跳转到 tabbar 页面. 不可返回原页面.
以上就是微信小程序框架的相关描述, 微信团队一直在不断的优化框架能力, 及时的关注官方提供的小程序开发者文档, 了解小程序的最新能力及优化点.
来源: https://www.2cto.com/kf/201905/809007.html