微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录

简介: 本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。

1. 数据绑定

数据绑定的基本原则:在data中定义数据,在wxml中使用数据

1.1. 在data中定义数据

在data中定义数据,找到页面对应的.js文件,然后把数据定义到data中即可。

pages/list/list.js

// pages/list/list.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    // 字符串类型的数据、
    info:'init data',
    // 数组类型的数据
    msgList:[{
   msg:'hello'},{
   msg:'world'}],
    numberA:Math.random()*10,
    ImageSrc:'./kl.jpg'
  },
  //.....
})

1.2. 在wxml中渲染数据 (mustache语法)

mustache语法,插值表达式
将data中的数据绑定到页面中渲染,使用mustache语法即双大括号{ {}}将变量包起来即可。
{ {要绑定的数据名称}}

mustache语法可以动态的绑定内容和属性,例如:

<!-- 将当前页面的.js文件中的data中的info属性取出来 -->
<view>{
  {info}}</view>
<!-- 将当前页面中的.js文件中的data中的ImageSrc属性取出来-->
<image src="{
    {ImageSrc}}"></image>

mustache语法,还可以做一些基础的运算加减乘除,以及三元表达式

<view>{
  {3+2}}</view>
<view>{
  {3-2}}</view>
<view>{
  {3*2}}</view>
<view>{
  {3/2}}</view>
<view>{
  {3>2 ? '3大于2' : '3小于2'}}</view>
<view>{
  {numberA}}</view>
<view>{
  {numberA>5 ? '大于5' : '小于5'}}</view>

在这里插入图片描述

2. 事件绑定

2.1. 事件

事件即从渲染层到逻辑层的通信方式。通俗的说就是你在前台页面做了什么,需要触发哪些行为。

在这里插入图片描述

2.2. 常用的事件

类型 绑定方式 事件描述
tap bindtap 或 bind:tap 手指触摸后马上离开,类似HTML中的click事件
input bindinput 或 bind:input 文本框的输入事件
change bindchange 或 bind:change 状态改变时触发

2.3. 事件对象的属性列表

当事件回调触发时,会收到一个事件对象event

list.wxml

<view>
  <!-- 为button按钮绑定一个tap事件,且事件名叫btnTapHandler -->
  <button type="primary" bindtap="btnTapHandler"></button>
</view>

list.js

// pages/list/list.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
   //......
  },

  // 绑定的事件函数  且将event对象传入,并且在控制台打印输出
  btnTapHandler(e){
   
    console.log(e)
  },
})

控制台输出:

在这里插入图片描述

属性列表如下:

属性 类型 说明
tyre String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件,当前变化的触摸点信息的数组

2.4. target 和 currentTarget的区别

target 是触发该事件的源头组件,curretTarget是当前事件绑定的组件。
例如下面的例子:

list.wxml

<view style="background-color:lightgreen;" bindtap="outerHandler">
  <button type="primary">按钮</button>
  <text>文字</text>
</view>

list.js

// pages/list/list.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
   //......
  },

  // 绑定的事件函数  且将event对象传入,并且在控制台打印输出
  outerHandler(e){
   
    console.dir(e.target)
    console.dir(e.currentTarget)
  },
})

在这里插入图片描述

  1. 当我们尝试点击(触摸按钮时),会输出下面的内容
    在这里插入图片描述

  2. 我们触摸text组件时,会输出下面的内容
    在这里插入图片描述

  3. 触摸view组件时,输出下面的内容
    在这里插入图片描述

对比得出,e.target就是你触摸的组件,e.currentTarget就是你当前事件绑定的组件(view)
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。

3. 事件传参与数据绑定

事件传参与数据绑定几乎和vue差不多

3.1. 在事件处理函数中给data中的数据赋值

例如:点击一个按钮,将data中的某个数值加一,同时页面中的数据也通过插值表达式动态渲染出来并且实时变化。

list.wxml

<view>
  <text style="text-align: center;margin-left: 100px;">{
  {count}}</text>
  <button bindtap="countAdd" type="primary">点我+1</button>
</view>

list.js

// pages/list/list.js
Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
   count:0
  },

  countAdd(){
   
    this.setData({
   count:this.data.count+1})
  },
  //....
)}

在这里插入图片描述

3.2. 事件传参(通过自定义属性的方式)

在微信小程序绑定事件时,绑定的是事件名,所以无法通过绑定事件时传递参数,但是可以通过自定义属性来传递参数 data-* 的方式

错误的事件传参

<button bindtap="btnTapHandler(123)">点我传递参数</button>

上面的这种写法,会让微信小程序误以为 “btnTapHander(123)” 是一个函数名,从而去该页面所在的.js文件中查找是否存在 名为 “btnTapHander(123)” 的函数。

正确的事件传参:

<!-- data-* *是data中存在的数据名 {
   {123}} 将被解析为数字123,即参数的值 -->
<button bindtap="btnTapHandler" data-number="{
    {123}}">点我传递参数</button>

3.3. 获取事件传递的参数值

在事件处理函数中,通过event.target.dataset.参数名即可获取具体的参数值。

例如,获取上面的按钮传递过来名为number的参数值

btnTapHandler(e){
   
  // e 为事件对象
  // dataset 也是一个对象,包含了所有通过data-* 传递过来的参数
  console.log(e.target.dataset)
  // 获取自定义属性number的值
  console.log(e.target.dataset.number)
}

在这里插入图片描述

3.4. 文本框与data之间的数据同步

3.4.1. input输入框事件及获取即时的输入框数据

input 输入框 的事件可以通过bindinput来绑定,然后数据获取则通过函数回调event对象,再通过event.detail.value来获取输入框即时的数据。

事件绑定 (list.wxml)

<view>
  <!-- 注意事件名别和内置的函数名重名 -->
  <input bindinput="inputHandlerA"/>
</view>

数据获取 (list.js)

inputHandlerA(e){
   
  console.log(e.detail.value)
}

在这里插入图片描述

在这里插入图片描述

3.4.2. 文本框与data数据同步的小demo

例子:input输入框输入数据,页面同时刷新,输入框也刷新

  1. 定义数据 (list.js)
Page({
   
   data: {
   
     msg:'你好!'
  },
})
  1. 渲染结构 (list.wxml)
<view>
  <text>{
  {msg}}</text>
  <input value="{
    {msg}}" bindinput="inputHandlerA"/>
</view>
  1. 美化样式 (list.wxss)
/* pages/list/list.wxss */
input{
   
  border: 1px solid #eee;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}
text{
   
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}
  1. 绑定input事件处理函数 (list.js)
 inputHandlerA(e){
   
    this.setData({
   
      msg:e.detail.value
    })
  },

默认效果:
在这里插入图片描述

尝试输入或者删除重新输入的效果:
在这里插入图片描述

效果验证,数据同步即时刷新


相关文章
|
4月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
61 1
|
5月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
151 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
6月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
6月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
6月前
|
SQL DataWorks 关系型数据库
DataWorks操作报错合集之如何处理数据同步时(mysql->hive)报:Render instance failed
DataWorks是阿里云提供的一站式大数据开发与治理平台,支持数据集成、数据开发、数据服务、数据质量管理、数据安全管理等全流程数据处理。在使用DataWorks过程中,可能会遇到各种操作报错。以下是一些常见的报错情况及其可能的原因和解决方法。
109 0
|
4月前
|
监控 关系型数据库 MySQL
深入了解MySQL主从复制:构建高效稳定的数据同步架构
深入了解MySQL主从复制:构建高效稳定的数据同步架构
176 1
|
5月前
|
canal 消息中间件 关系型数据库
Canal作为一款高效、可靠的数据同步工具,凭借其基于MySQL binlog的增量同步机制,在数据同步领域展现了强大的应用价值
【9月更文挑战第1天】Canal作为一款高效、可靠的数据同步工具,凭借其基于MySQL binlog的增量同步机制,在数据同步领域展现了强大的应用价值
979 4
|
6月前
|
关系型数据库 MySQL 数据库
【MySQL】手把手教你MySQL数据同步
【MySQL】手把手教你MySQL数据同步
|
4月前
|
消息中间件 NoSQL 关系型数据库
一文彻底搞定Redis与MySQL的数据同步
【10月更文挑战第21天】本文介绍了 Redis 与 MySQL 数据同步的原因及实现方式。同步的主要目的是为了优化性能和保持数据一致性。实现方式包括基于数据库触发器、应用层双写和使用消息队列。每种方式都有其优缺点,需根据具体场景选择合适的方法。此外,文章还强调了数据同步时需要注意的数据一致性、性能优化和异常处理等问题。
1096 0