微信小程序开发 - 数据绑定
小程序框架的核心是一个响应的数据绑定系统。整个系统分为两块视图层(View)和逻辑层(App Service)
框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的动态更新,即数据绑定是逻辑层到视图层的通讯方式。然而由用户操作引起的数据更新则需要通过事件将数据传到逻辑层,也就是说事件是视图层到逻辑层的通讯方式。
本文讲述的是数据绑定,事件处理请参照:微信小程序学习之路《五》 事件处理。
那么这种绑定机制是怎么样的呢?
与传统的双向数据绑定方式不同,小程序采用状态模式-单项数据流的方式绑定数据。状态模式定义一个对象,视图线程通过监听该对象的状态变化,触发应用做出相应的数据变化。
简单的讲,对象状态化,只要对象状态发送变化,就通知页面更新视图元素。 三个步奏: 1. 识别哪个UI元素被绑定了相应的对象; 2. 监视对象状态的变化; 3. 将所有变化传播到绑定的视图。 |
下面说一下常用的数据绑定形式?
简单绑定
数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:内容、组件属性、控制属性、关键字。
内容
<view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } })
组件属性
<view id="item-{{id}}"> </view> Page({ data: { id: 0 } })
控制属性
<view wx:if="{{condition}}"> </view> Page({ data: { condition: true } })
关键字
true:boolean 类型的 true,代表真值。 false: boolean 类型的 false,代表假值。 <checkbox checked="{{false}}"> </checkbox> 特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。
运算
可以在 {{}}
内进行简单的运算,支持的有如下几种方式:三元运算、算术运算、逻辑判断、字符串运算、数据路径运算
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算术运算
<view> {{a + b}} + {{c}} + d </view> Page({ data: { a: 1, b: 2, c: 3 } })
逻辑判断
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view> Page({ data:{ name: 'MINA' } })
数据路径运算
<view>{{object.key}} {{array[0]}}</view> Page({ data: { object: { key: 'Hello ' }, array: ['MINA'] } })
组合
也可以在 Mustache 内直接进行组合,构成新的对象或者数组。
数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view> Page({ data: { zero: 0 } }) 最终成数组:[0, 1, 2, 3, 4]
对象
<template is="objectCombine" data="{{for: a, bar: b}}"></template> Page({ data: { a: 1, b: 2 } }) 最终组成对象:{for: 1, bar: 2}
也可以用扩展运算符 ...
来将一个对象展开
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } }) 最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。
如果对象的 key 和 value 相同,也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template> Page({ data: { foo: 'my-foo', bar: 'my-bar' } }) 最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。
上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,如:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template> Page({ data: { obj1: { a: 1, b: 2 }, obj2: { b: 3, c: 4 }, a: 5 } }) 最终组合成的对象是 {a: 5, b: 3, c: 6}。
相关推荐
微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习(源代码+截图)微信小程序练习demo:数据绑定条件渲染练习...
微信小程序学习demo:从服务器获取数据,并且数据绑定组件(源代码+截图)微信小程序学习demo:从服务器获取数据,并且数据绑定组件(源代码+截图)微信小程序学习demo:从服务器获取数据,并且数据绑定组件(源代码+截图...
微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认...
项目实战中提供的"点餐demo"可能是已经完成部分功能的源代码,学习者可以通过阅读和修改这些代码,加深对微信小程序开发的理解。同时,也可以参考这个示例来构建自己的点餐系统。 六、小程序开发注意事项 1. 规范...
1. 数据绑定:微信小程序采用MVVM模式,即Model-View-ViewModel,通过数据绑定实现视图和模型的同步更新。在JS文件中修改数据,WXML和WXSS会自动响应变化。 2. 事件处理:WXML中的标签可以绑定各种事件,如点击、...
"微信小程序官方小程序示例源码"是微信官方提供的一套示例代码,用于帮助开发者理解和学习微信小程序的开发过程。 在`miniprogram-demo-master`这个压缩包中,通常会包含多个小程序的示例项目,每个项目都对应一个...
这个"微信小程序代码-微信中的知乎--微信小程序demo.zip"压缩包提供了一个模仿知乎界面的微信小程序示例,帮助开发者理解和学习如何构建类似的应用。 1. **小程序模板代码**:在开发微信小程序时,模板代码可以作为...
综上所述,“微信小程序-微信小程序-新闻客户端”这个项目涵盖了微信小程序的多个核心知识点,包括开发环境、框架结构、数据绑定、页面路由、API调用、用户交互、原生组件、UI设计、性能优化以及发布流程。通过学习...
这个"微信小程序常用功能学习示例"是一个很好的学习资源,帮助开发者掌握微信小程序的基础开发技巧。 首先,我们要讨论的是**页面跳转**。在微信小程序中,页面间的跳转是通过`wx.navigateTo`、`wx.redirectTo`、`...
微信小程序电影小程序源码是一个适合用于毕业设计、期末大作业或课程设计的项目,它涵盖了微信小程序开发的基础知识和电影信息展示的相关技术。这个压缩包包含的文件名为“电影小程序”,意味着里面可能包括了实现一...
学习并实践这个"微信小程序示例 - 小相册"项目,开发者不仅可以掌握微信小程序的基本开发流程,还能深入理解前端性能优化、用户体验设计以及移动应用的数据管理策略。通过实际动手操作,对微信小程序的开发能力会有...
3. **数据绑定**:微信小程序使用MVVM(Model-View-ViewModel)模式,通过双括号{{}}实现数据绑定,实时更新视图。数据模型的改变会自动反映到视图层。 4. **API调用**:微信小程序提供了丰富的API接口,如网络请求...
在这个“微信小程序学习实例代码”中,我们可以深入理解微信小程序的基本结构、组件使用以及数据绑定机制。 首先,`swiper`图片轮播组件是微信小程序中常用的展示元素,常用于首页广告展示或产品轮播。它能够自动或...
总结,【微信小程序-毕设期末大作业】模拟题库微信小程序源码是一个综合性的学习资源,涵盖了微信小程序的基础知识、页面构建、数据处理和功能实现等多个方面,对于想要学习或实践微信小程序开发的学员来说,是一个...
本资源包含100个微信小程序的源代码,对于学习微信小程序开发、了解其工作原理以及寻求灵感来说,这是一个宝贵的资料库。 首先,我们要明确微信小程序的开发环境。开发者通常需要使用微信开发者工具,该工具提供了...
通过分析这些源码,开发者可以学习到微信小程序的页面路由管理、数据绑定、事件处理、网络请求、状态管理以及组件化开发等核心知识点。例如,WXML 文件用于定义页面结构,通过绑定数据和事件,与 JS 文件中的逻辑...
微信小程序使用MVVM(Model-View-ViewModel)架构,数据绑定是其核心特性之一。在表单组件中,我们通常会通过`bindinput`事件来实时监听用户输入,将输入数据绑定到对应的Page实例的data属性上。例如: ```html 请...
8. **数据管理**:微信小程序使用了基于组件的数据绑定系统,通过`data`属性来管理组件的状态,以及`wx.setStorageSync`和`wx.getStorageSync`进行本地数据存储。 9. **微信开发者工具**:开发微信小程序需要使用...
7. **数据绑定与状态管理**:微信小程序采用双向数据绑定,使得视图和数据模型保持同步。掌握数据管理策略,如Page对象的数据属性、setData方法,以及非父子组件间通信的事件总线,对于构建复杂应用至关重要。 8. *...