微信小程序-（四）WXML模板语法-事件绑定

本文最后更新于：March 27, 2022 pm

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

目录

数据绑定

基本原则

类似Vue。

  • 在data中定义数据。

  • 在WXML中使用数据。

  1. 定义数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可。

1
2
3
4
5
6
7
8
9
10
11
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    infoMsg: '提示信息', //字符串
    msgList:[] //数组
  }
})
  1. 使用数据

把 data 中的数据绑定到页面中，使用 Mustache 语法（双大括号）将变量包起来即可。（类似Vue）

1
<view>{{infoMsg}}</view>

其中双大括号中可以使用三目运算符。

动态绑定属性

这里和Vue中就不同了，这里可以直接使用。

1
<image src="{{imgSrc}}" mode="heightFix"></image>
1
2
3
4
5
6
7
8
9
10
11
12
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    infoMsg: '提示信息', //字符串
    msgList:[], //数组
    imgSrc: '/images/tothefor.png',
  }
})

随机生成数

1
2
3
4
5
6
7
8
9
10
11
12
// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ranN: Math.random() * 10, //生成10以内的数
    ranN: Math.random().toFixed(2), //生成一个带两位小数的随机数
    ranN: Math.random().toFixed(2)*10
  }
})

事件绑定

小程序中常用事件

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

事件对象的属性列表

当事件回调触发的时候，会受到一个事件对象 event，它的详细属性有：

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

target 和 currentTarget 的区别

  • target：是触发该事件的源头组件。即是触发什么导致发生的事件。
  • currentTarget：是当前事件所绑定的组件。

示例：

1
2
3
<view bindtap="outer">
  <button>按钮</button>
</view>

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

  • e.target：指向的是触发事件的源头组件（即按钮组件）。
  • e.currentTarget：指向的是当前正在触发事件的那个组件（即当前的view组件）。

bindtap使用语法格式

在小程序中，不存在鼠标点击事件（onclick），而是通过 tap 事件来相应用户的触摸行为。

  1. 为组件绑定 tap 触摸事件
1
2
<!--pages/list/list.wxml-->
<button type="primary" bindtap="btnOn">按钮</button>
  1. 在页面对应的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event（简写为e）来接受。
1
2
3
4
5
6
// pages/list/list.js
Page({
  btnOn(e){
    console.log(e);
  }
})

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

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值。

1
2
3
<!--pages/list/list.wxml-->
<view>{{cliN}}</view>
<button type="primary" bindtap="btnOn">按钮</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// pages/list/list.js
Page({
  btnOn(e){
    this.setData({
      cliN: this.data.cliN+1
    })
  },

  /**
   * 页面的初始数据
   */
  data: {
    cliN: 0
  }
})

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

可以为组件提供 data-* 自定义属性传参，其中星号（*）代表的是参数的名字，例如：

1
<button type="primary" bindtap="btnOn" data-inf="{{3}}">按钮</button>

最后：

  • inf 会被解析为参数的名字
  • 数值 3 会被解析为参数的值。值也可以设置为 data 中的数据。

获取参数

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

1
2
3
4
5
6
// pages/list/list.js
Page({
  btnOn(e){
    console.log(e.target.dataset.inf); //3
  }
})

bindinput使用语法格式

通过 input 事件来响应文本框的输入事件。

  1. 绑定输入事件
1
<input bindinput="btnInp"></input>
  1. 定义处理函数
1
2
3
4
5
6
// pages/list/list.js
Page({
  btnInp(e){
    console.log(e.detail.value);
  }
})

实现文本框与data中的数据同步

1
<input value="{{infoMsg}}" bindinput="btnInp"></input> <!-- infoMsg为data中的数据 -->
1
2
3
4
5
6
7
8
9
10
// pages/list/list.js
Page({

  btnInp(e){
    console.log(e.detail.value);
    this.setData({
      infoMsg: e.detail.value
    })
  }
})