【微信小程序】一文学懂小程序的数据绑定和事件绑定

简介: 【微信小程序】一文学懂小程序的数据绑定和事件绑定

1.数据绑定


数据绑定的基本原则:

  1. 在 data 中定义数据
  2. 在 WXML 中使用数据


在页面对应的 .js 文件中,把数据定义到 data 对象中,然后把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。

<view>{{数据名称}}<view>


使用案例:

首先在data中定义数据,然后在wxml中通过Mustache语法把数据渲染到页面上。

data: {
    info:'helloworld',
  }
<view>{{info}}</view>

1.1.png


Mustache 语法的应用:

  • 动态绑定内容
  • 动态 绑定属性
  • 运算(三元运算、算术运算等)


1.1动态绑定内容


在 data 中定义数据:

1.2.png


在wxml中使用数据:

.1.3.png

1.2动态绑定事件


页面数据如下:

1.4.png


页面结构如下:

1.5.png

1.3三元运算


页面数据:

1.6.png


页面结构:

1.7.png

1.4算术运算


页面数据如下:

1.8.png


页面结构如下:

1.9.png

2.事件绑定


2.1什么是事件


事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

1.10.png

2.2小程序中常用的事件


类型

绑定方式

事件描述

tap

bindtap 或 bind:tap

手指触摸后马上离开,类似于 HTML 中的 click 事件

input

bindinput 或 bind:input

文本框的输入事件

change

bindchange 或 bind:change

状态改变时触发


2.3事件对象的属性列表


当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:

1.11.png

2.4 target 和 currentTarget 的区别


target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:

1.12.png


点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。此时,对于外层的 view 来说:

  • e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
  • e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件


2.5 bindtap 的语法格式


在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:

1.13.png


在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收:

1.14.png

2.6 在事件处理函数中为 data 中的数据赋值


通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

1.15.png

2.7 事件传参


小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:

1.16.png


因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。

1.17.png


可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:

最终:

  • info 会被解析为参数的名字
  • 数值 2 会被解析为参数的值


在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:

210.18.png

2.8 bindinput 的语法格式


在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:

通过 bindinput,可以为文本框绑定输入事件:

1.19.png.


在页面的 .js 文件中定义事件处理函数:

1.20.png

2.9 实现文本框和 data 之间的数据同步


实现步骤:

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定 input 事件处理函数


定义数据:

2.1.png

渲染结构

2.2.png


美化样式:

2.3.png


绑定 input 事件处理函数

2.4.png

目录
相关文章
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
50 1
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
79 6
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
568 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
40 1
|
2月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
33 0
|
2月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
498 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
582 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
114 7