小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 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 class="apptitle">
<text class="app-avatar">欢迎使用{{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端做出了高度一致的呈现,还有近乎完备的开发、调试工具。

目录结构

典型的小程序目录结构非常简洁,一般一个项目包含两个目录(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、window等,这也是我们开发过程中要克服的阻碍。

视图层

对于微信小程序而言,视图层就是所有的.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 页面。不可返回原页面。

以上就是微信小程序框架的相关描述,微信团队一直在不断的优化框架能力,及时的关注官方提供的小程序开发者文档,了解小程序的最新能力及优化点。

【微信小程序】开发实战 之 「开发框架MINA构成」的更多相关文章

  1. 微信小程序开发(五)开发框架MINA

    微信团队为小程序提供的框架命名为MINA应用框架.MINA框架通过封装微信客户端提供的文件系统.网络通信.任务管理.数据安全等基础功能,对上层提供一整套JavaScript API,让开发者能够非常方 ...

  2. 微信小程序开发实战视频教程

    微信小程序开发实战视频教程发布  有全套的 pan.baidu.com/s/1o8GuJOY 密码:2dbo 腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间 ...

  3. [干货教程]仿网易云课堂微信小程序开发实战经验

    本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...

  4. 微信小程序开发实战视频教程发布

    昨日(9月23),腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这7个小视频教程,入门足够了.... 各位免费拿去,慢慢享用: 链接: http ...

  5. 微信开发(2)---微信小程序开发实战part1

    微信开发现在来说,简单可以概括为两部分,微信公众号和微信小程序. 微信公众号的技术已经非常成熟.分为服务号和订阅号.简单的.可以弄一个个人订阅号,在编辑模式下就可以实现推送图文.自动回复.自定义菜单的 ...

  6. 微信小程序开发实战-天气小程序

    园龄6年8个月了,还一篇文章都没写过,惭愧! 最近周末做了个天气预报小程序,在这里整理一下开发过程和注意点,给对小程序开发感兴趣的伙伴们提供点参考. 废话不多说,先上图最终效果: 下面进入正文: 第一 ...

  7. 微信小程序开发实战(云开发)--资产管理工具

    添加首页 menu页面 截图展示 menu.js源码 // pages/menu/menu.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听 ...

  8. 微信小程序开发实战(1):使用滚动视图

    本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动.滚动事件等,并通过例子代码来演示这些功能的使用方法.   1. 垂直滚动视图 scroll-view是容器组件 ...

  9. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

随机推荐

  1. 磁盘格式化mke2fs

    -b 设置每个块的大小,当前支持1024,2048,40963种字节 -i 给一个inode多少容量 -c 检查磁盘错误,仅执行一次-c时候,会进行快速读取测试:-c -c会测试读写,会很慢 -L 后 ...

  2. $("xxx").attr添加属性的时候不好用

    今天在工作中碰到了使用$(this).attr("selected","selected")为option属性添加默认值时发现时而好用 时而不好用,后经百度发现 ...

  3. Visual studio每次build自动增加版本号

    关键词:visual studio,rc file,VS_VERSION_INFO,FILEVERSION,PRODUCTVERSION 目标:希望每次在vs中编译项目时,生成的可执行程序版本号自动+ ...

  4. android 代码中及xml中设置透明

    在布局文件的属性中,比如要设置一个LineaerLayout的背景为灰色透明.首先查RGB颜色表灰色是:#9E9E9E,AA代表透明,(透明度从00到FF,00表示完全透明),所以,设置其属性:and ...

  5. COGS 1. 加法问题 (水体日常)

    这是一个经典的入门问题,通过此问题,你可以学会如何使用该评测系统. [问题描述] 现在有两个实数,分别是A和B.请你从文件中读取A和B,计算它们的和A+B,并把它输出到文件中.(保留到整数) [输入格 ...

  6. oracle的系统表

    -- DBA/ALL/USER/V_$/GV_$/SESSION/INDEX开头的绝大部分都是视图-- DBA_TABLES意为DBA拥有的或可以访问的所有的关系表.-- ALL_TABLES意为某一 ...

  7. Python基础3 函数 变量 递归 -DAY3

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 温故知新 1. 集合 主要作用: 去重 关系测 ...

  8. PHP20 PHP面向对象辅助

    学习要点 常用函数 命名空间 类的自动加载 常用函数 class_exists 作用:检查类是否已定义 语法格式: bool class_exists ( string $class_name [, ...

  9. python interview questions

    referce:python interview questions top 50 refercence:python interview questions top 15 summary Q: wh ...

  10. LayuI固定块关闭

    1.近期项目使用了layui的固定块,但是当到某个独立页面时,固定块还在,就显得突兀: 2.通过F12查看,发现代码: <ul class="layui-fixbar" st ...