微信小程序 数据绑定详解及实例


Posted in Javascript onOctober 25, 2016

微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定。

>>>数据视图绑定

做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性。

以下数据和对象等同。

传统的视图和数据绑定

微信小程序 数据绑定详解及实例

 那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流。

状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用程序作出相应的变化。

微信小程序 数据绑定详解及实例

 简单的讲,对象状态化,只要对象状态发送变化,就通知页面更新视图元素。

三个步奏:

1. 识别哪个UI元素被绑定了相应的对象。
2. 监视对象状态的变化。
3. 将所有变化传播到绑定的视图上。

注意数据流向是单向的,即视图变化不会影响对象状态。

<view> {{ message }} </view>

Page({

 data: {

  message: 'Hello MINA!'

 }

})

就这么简单完成视图跟数据的绑定。

仅仅通过数据更新视图是不够的,用户操作引起视图更新,数据怎么同步呢?

这里要区分的是,用户触发事件不仅要考虑当前UI元素更新,还会通过当前元素更新其他视图。

所以视图上的数据都必须用过事件传递给对象,只有用户操作视图,才能获取到数据,并更新对象状态。
如下图:

微信小程序 数据绑定详解及实例

 什么是『事件』:

事件是视图层到逻辑层的通讯方式。

想知道为什么的童鞋可以了解数据单双向流,这里不介绍了。

再来看视图与视图之间是如何影响?

微信小程序 数据绑定详解及实例

流程说明:

1. 视图A由于用户操作,触发事件A
2. 事件A处理函数中,更新对象A和对象B的状态
3. 由于对象A和B状态变化,通知视图A和B更新

我们以用户登录为例,用户点击(事件A)登录按钮后,把按钮变成禁用不可点(视图A),同时弹出等待框(视图B).
部分代码如下:

<view>
 
  <loading hidden="{{loadingHidden}}">正在登录...</loading>
 
  <button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">数据请求</button>
 
</view>
Page({
 
 data:{
 
  disabled: false,
 
  loadingHidden: true
 
 },
 
 //按钮事件
 
 loginBtn: function(event){
 
  //禁用按钮
 
  this.setData({disabled: true});
 
  //弹出正在登录框
 
  this.setData({loadingHidden: false});
 
 }
 
})

总结:

现在流行数据单双向绑定,小程序使用了单向数据流,如果采用传统的jQuery方式操作数据和视图,开发效率低,开发者不买账。如果采用双向数据流,程序执行效率偏低,而且是逻辑层对象状态不可控。

总体来说,小程序数据视图单向绑定开发模式,让开发者专注于事件处理上,改变对象状态,实现视图更新。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
关于angularJs指令的Scope(作用域)介绍
Oct 25 #Javascript
javascript 中的事件委托详解
Oct 25 #Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 #Javascript
分分钟玩转Vue.js组件
Oct 25 #Javascript
谈谈target=_new和_blank的不同之处
Oct 25 #Javascript
js实现上传图片预览方法
Oct 25 #Javascript
微信小程序(应用号)开发新闻客户端实例
Oct 24 #Javascript
You might like
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
Python3 入门教程 简单但比较不错
2009/11/29 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
学校就业推荐信范文
2014/05/19 职场文书
学校党员对照检查材料
2014/08/28 职场文书
工作后的感想
2015/08/07 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技