`

微信小程序学习之路《三》 数据绑定

 
阅读更多

微信小程序开发 - 数据绑定

 

小程序框架的核心是一个响应的数据绑定系统。整个系统分为两块视图层(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:从服务器获取数据,并且数据绑定组件(源代码+截图)微信小程序学习demo:从服务器获取数据,并且数据绑定组件(源代码+截图)微信小程序学习demo:从服务器获取数据,并且数据绑定组件(源代码+截图...

    微信小程序学习demo:笑话大全;使用聚合数据API

    最后,学习和理解这个小程序的源码可以帮助初学者掌握微信小程序的基本开发流程,包括API调用、数据绑定、页面路由、组件化编程等关键概念。同时,通过实际操作,还能锻炼开发者的问题解决能力,了解如何调试和优化...

    微信小程序点餐系统微信小程序开发实战

    项目实战中提供的"点餐demo"可能是已经完成部分功能的源代码,学习者可以通过阅读和修改这些代码,加深对微信小程序开发的理解。同时,也可以参考这个示例来构建自己的点餐系统。 六、小程序开发注意事项 1. 规范...

    微信小程序 教程之列表渲染

    微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认...

    微信小程序-模仿QQ小程序

    1. 数据绑定:微信小程序采用MVVM模式,即Model-View-ViewModel,通过数据绑定实现视图和模型的同步更新。在JS文件中修改数据,WXML和WXSS会自动响应变化。 2. 事件处理:WXML中的标签可以绑定各种事件,如点击、...

    微信小程序官方小程序示例源码

    "微信小程序官方小程序示例源码"是微信官方提供的一套示例代码,用于帮助开发者理解和学习微信小程序的开发过程。 在`miniprogram-demo-master`这个压缩包中,通常会包含多个小程序的示例项目,每个项目都对应一个...

    微信小程序代码-微信中的知乎--微信小程序demo.zip

    这个"微信小程序代码-微信中的知乎--微信小程序demo.zip"压缩包提供了一个模仿知乎界面的微信小程序示例,帮助开发者理解和学习如何构建类似的应用。 1. **小程序模板代码**:在开发微信小程序时,模板代码可以作为...

    微信小程序-微信小程序-新闻客户端

    综上所述,“微信小程序-微信小程序-新闻客户端”这个项目涵盖了微信小程序的多个核心知识点,包括开发环境、框架结构、数据绑定、页面路由、API调用、用户交互、原生组件、UI设计、性能优化以及发布流程。通过学习...

    微信小程序常用功能学习示例

    这个"微信小程序常用功能学习示例"是一个很好的学习资源,帮助开发者掌握微信小程序的基础开发技巧。 首先,我们要讨论的是**页面跳转**。在微信小程序中,页面间的跳转是通过`wx.navigateTo`、`wx.redirectTo`、`...

    微信小程序电影小程序源码.zip

    微信小程序电影小程序源码是一个适合用于毕业设计、期末大作业或课程设计的项目,它涵盖了微信小程序开发的基础知识和电影信息展示的相关技术。这个压缩包包含的文件名为“电影小程序”,意味着里面可能包括了实现一...

    微信小程序示例小相册

    学习并实践这个"微信小程序示例 - 小相册"项目,开发者不仅可以掌握微信小程序的基本开发流程,还能深入理解前端性能优化、用户体验设计以及移动应用的数据管理策略。通过实际动手操作,对微信小程序的开发能力会有...

    微信小程序 实例汇总 完整项目源代码

    3. **数据绑定**:微信小程序使用MVVM(Model-View-ViewModel)模式,通过双括号{{}}实现数据绑定,实时更新视图。数据模型的改变会自动反映到视图层。 4. **API调用**:微信小程序提供了丰富的API接口,如网络请求...

    微信小程序学习实例代码

    在这个“微信小程序学习实例代码”中,我们可以深入理解微信小程序的基本结构、组件使用以及数据绑定机制。 首先,`swiper`图片轮播组件是微信小程序中常用的展示元素,常用于首页广告展示或产品轮播。它能够自动或...

    【微信小程序-毕设期末大作业】模拟题库微信小程序源码.zip

    总结,【微信小程序-毕设期末大作业】模拟题库微信小程序源码是一个综合性的学习资源,涵盖了微信小程序的基础知识、页面构建、数据处理和功能实现等多个方面,对于想要学习或实践微信小程序开发的学员来说,是一个...

    微信小程序源码

    本资源包含100个微信小程序的源代码,对于学习微信小程序开发、了解其工作原理以及寻求灵感来说,这是一个宝贵的资料库。 首先,我们要明确微信小程序的开发环境。开发者通常需要使用微信开发者工具,该工具提供了...

    微信小程序项目之微信阅读小程序(源码+说明).zip

    通过分析这些源码,开发者可以学习到微信小程序的页面路由管理、数据绑定、事件处理、网络请求、状态管理以及组件化开发等核心知识点。例如,WXML 文件用于定义页面结构,通过绑定数据和事件,与 JS 文件中的逻辑...

    网站封装微信小程序源码

    8. **数据管理**:微信小程序使用了基于组件的数据绑定系统,通过`data`属性来管理组件的状态,以及`wx.setStorageSync`和`wx.getStorageSync`进行本地数据存储。 9. **微信开发者工具**:开发微信小程序需要使用...

    微信小程序例子——使用form表单获取输入框数据

    微信小程序使用MVVM(Model-View-ViewModel)架构,数据绑定是其核心特性之一。在表单组件中,我们通常会通过`bindinput`事件来实时监听用户输入,将输入数据绑定到对应的Page实例的data属性上。例如: ```html 请...

Global site tag (gtag.js) - Google Analytics