本文将详细讲解微信小程序开发框架MINA的示例分析。小编觉得还是比较实用的,所以分享给大家,作为参考。希望您读完本文后有所收获。
小程序MINA框架及其优势
MINA框架:
小程序采用MINA框架,旨在让开发者能够简单高效地开发出微信原生App体验的服务。
MINA 的核心是一个反应式数据绑定系统。
整个系统分为两部分:视图层(view,描述语言wxml和wxss)和逻辑层(App,基于)。这使得保持数据与视图同步变得非常容易。修改数据时,只需要改变逻辑层的数据,视图层就会相应更新。开发者只需要将页面路由、方法、生命周期函数注册到框架中,其他所有复杂的操作都将由框架处理。
小程序的优点:
• 使用方便:无需下载,打开即可使用,用完即走。不占用手机内存,节省流量和安装时间
• 开发简单:开发的本质是基于MVVM风格的框架。有前端经验的程序员可以无缝对接,没有经验的“新手”也可以快速上手。
• 跨平台运行:无需单独开发IOS和版本。您只需发布微信小程序平台,所有平台都可以使用。开发成本低
• 快速分发和迭代:无需担心各种发布渠道或旧版本升级的兼容性问题。
打开速度比H5更快,体验接近原生APP
小程序开发框架的目标是让开发者以最简单、最高效的方式在微信中开发具有原生APP体验的服务。
微信团队为小程序提供的框架名为MINA。 MINA框架封装了微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,并向上层提供了一套完整的API,让开发者可以方便地使用提供的各种基础功能和能力通过微信客户端,快速构建应用。
米娜框架
微信小程序的框架图如下:
MINA框架主要分为两部分:
第一部分,页面视图层,开发人员使用WXML文件构建页面的基本视图结构(WXML是一种类似于HTML标签的语言和一系列基本组件),并使用WXSS文件来控制页面的呈现风格页面。
第二部分,应用逻辑层,是MINA框架的服务中心。异步线程通过微信客户端启动,独立加载运行。页面渲染所需的数据以及页面交互处理逻辑都在其中实现。 MINA框架可以用来编写交互逻辑、网络请求、数据处理,但不能使用DOM操作。小程序中的每个页面都可以实现数据管理、网络通信、生命周期管理和页面路由。
MINA框架为页面组件提供了一系列事件监听相关的属性(如等),与页面组件中的事件处理函数绑定,用于将用户交互数据同步到页面层。 MINA框架还提供了很多方法将数据单向绑定到页面(注意数据的绑定方向是单向的)。当数据发生变化时,会主动触发相应页面组件的重新渲染。
该框架的核心是一个反应式数据绑定系统,它允许数据轻松地与视图同步。你只需要修改逻辑层的数据,视图层就会相应更新。示例如下:
欢迎使用{{appname}} 更换名称 //AppService应用逻辑层代码 //初始数据 page({ data:{ appname:'易投票' }, changeAppname:function(e){ this.setData({ appname:'我的小程序' }) } })
图 1:初始名称
图2:点击“更改名称”按钮后
示例中的数据是如何更新的?首先,开发者通过框架将应用逻辑层数据绑定到页面视图层名称的变化。首次打开页面时,会显示“欢迎使用轻松投票”。然后,当点击“更改名称”按钮时,视图层会将tap事件发送给逻辑层,逻辑层找到事件函数。最后,逻辑层函数执行操作,并将对象的值更改为“我的小程序”,因为该对象已绑定到视图层。因此视图层将显示为图2的名称。
小程序的MINA框架,运行速度接近原生App。它在框架层面做了很多优化。它对重型功能(页面或选项卡切换、多媒体、网络连接等)使用类似的组件继承,并且兼容 和 iOS。该终端提供了高度一致的演示,以及近乎完整的开发和调试工具。
目录结构
典型的小程序目录结构非常简单。通常,一个项目包含两个目录(和)三个文件(app.js、app.json、app.wxss)。该目录包括程序所需的各种页面。一个页面对应一个目录,包含2~4个文件(.js、.wxml、.json、.wxss)。该目录包含一些公共js代码文件。当然,我们还可以添加其他公共目录,比如用来存放本地图片资源的目录。
逻辑层
小程序的逻辑层是所有.js脚本文件的集合。小程序在逻辑层处理数据并将其发送到视图层,同时接受视图层发回的事件请求。
MINA框架的逻辑层是由.在此基础上,微信团队做了一些优化,以更高效地开发小程序。这些优化包括:
1、添加app方法注册程序,添加page方法注册页面;
2.提供丰富的API接口;
3、页面范围相对独立,具备模块化能力;
简单总结一下,逻辑层就是每个页面的.js脚本文件。
需要注意的是,小程序的逻辑层是用js编写的,但是它并不运行在浏览器中,所以Web中的一些能力无法使用,比如dom等,这也是我们遇到的一个障碍开发过程中要克服的问题。 。
视图层
对于微信小程序来说,视图层是所有.wxml()文件和.wxss()文件的集合:.wxml用于描述页面结构,.wxss用于描述页面样式。
视图层以给定的样式展示数据,并将事件反馈给逻辑层,而数据的呈现则通过组件来完成。 ()是视图的基本单位。
数据层
数据层包括临时数据或缓存、文件存储、网络存储和调用。
1.页面临时数据或缓存
在页面page()中,我们需要使用一个函数将数据从逻辑层发送到视图层,同时改变this.data对应的值。一般指小程序中的调用页面,一般指作为方法调用时包含其的函数所属的对象。直接修改this.data是无效的,无法改变页面的状态,并且会导致数据不一致。一次设置的数据有大小限制,不能超过该限制,避免一次设置过多的数据。
() 函数的参数接受一个对象。以key的形式表达,将this.data中key对应的改为。 key可以非常灵活,包括以数据路径的形式表示,例如[0].,并且不需要在this.data中预定义。
2、文件存储(本地存储)
使用微信提供的现成的数据API接口,如:
wx.:获取本地数据缓存
wx.:设置本地数据缓存
wx.:清理本地数据缓存
3.网络存储与调用
用于上传或下载文件的API接口,例如:
wx.:发起网络请求
wx.:上传文件
wx.:下载文件
调用URL的API接口如下:
wx.:保留当前页面并跳转到应用程序内的某个页面。但无法跳转到该页面。您可以返回原始页面。
wx.:关闭当前页面并跳转到应用内的某个页面。但跳转到该页面是不允许的。无法返回原始页面。
这篇关于《微信小程序开发框架MINA实例分析》的文章就分享到这里。希望以上内容能够对大家有所帮助,让大家能够学到更多的知识。如果您觉得文章不错,请转发分享。走出去,让更多人看到。