微信小程序-----WXML模板语法之数据绑定与事件绑定

 目录

 前言

一、数据绑定

1.Mustache语法 

2.Mustache 语法的应用场景

（1）绑定内容

（2）绑定属性

（3）运算（三元运算、算术运算等)

二、事件绑定

1.事件

（1）什么是事件

（2）小程序中常用的事件

（3）事件对象的属性列表

（4）target 和 currentTarget 的区别

2.bindtap 的语法格式

（1）点击事件响应

（2）处理函数中为 data 中的数据赋值

（3）事件传参

3.bindinput 的语法格式

（1）输入事件响应

（2） 实现文本框和 data 之间的数据同步

---

 前言

        今天我们接着学习微信小程序的代码语法，今天的学习目标是掌握wxml模版语法中的数据绑定和事件绑定，这部分的内容是微信小程序代码语法的重点内容，我会很详细的去介绍这部分内容的语法，下面就开始本期的学习吧。

        本期内容是实现同一根目录下的wxml文件和js文件之间的通讯。

一、数据绑定

数据绑定方式分为以下两个步骤：

① 在 data 中定义数据

② 在 WXML 中使用数

1.Mustache语法 

这里我要重点去介绍一种新的语法 Mustache 语法，这种语法在wxml可以完美的处理数据绑定通讯问题。

Mustache 语法的格式

把data中的数据绑定到页面中渲染，使用 Mustache 语法 （双大括号）将变量包起来即可。语法格式为：

<view>{{要绑定的数据名称}}</view>

2.Mustache 语法的应用场景

（1）绑定内容

绑定内容就是要显示的内容以js文件中定义的变量形式去表达。

js文件代码内容：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    s:'我是IKUN'
  }
})

wxml代码内容：

<!-- 1. 绑定内容 -->
<view>{{ s }}</view>

（2）绑定属性

绑定属性一般是组件的属性内容去通过js文件中定义的变量形式去表达出来，下面示例是image组件的图片路径，去通过js文件中定义的路径字符串传入到image标签当中。

js文件代码内容：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgsrc:'/image/微信图片_20240113220335.png'
  }
})

wxml代码内容：

<!-- 2. 绑定属性 -->
<image src="{{ imgsrc }}" style="width: 100%;" mode="widthFix"/>

（3）运算（三元运算、算术运算等)

运算就是非常常见的方式了，通过js后端运算出的结果，以参数的形式传入到wxml当中，如下所示随机数的三元运算和一般运算。

js文件代码内容：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    num1:Math.random()*10,
    num2:Math.random().toFixed(2)
  }
})

wxml代码内容：

<!-- 3. 三元运算 -->
<view>{{num1>=5?"yes":"no"}}</view>
<!-- 4. 运算处理 -->
<view>{{num2*100}}</view>

执行结果：

二、事件绑定

1.事件

（1）什么是事件

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

（2）小程序中常用的事件

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

（3）事件对象的属性列表

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

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

（4）target 和 currentTarget 的区别

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

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

此时，对于外层的 view 来说：

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

2.bindtap 的语法格式

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

（1）点击事件响应

① 通过 bindtap ，可以为组件绑定 tap 触摸事件，wxml语法如下：

<button type="primary" bindtap="btnevent">点我</button>

bindtap="btnevent" 中的btnevent是一个函数，这个函数要在js文件中具体表示

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

  btnevent(e){
    //打印事件e内容
    console.log(e)
  }

界面显示结果：

这里我们点开控制台就可以去查看结果：

（2）处理函数中为 data 中的数据赋值

wxml代码：

<!--数据赋值  -->
<button type="primary" bind:tap="add1">点击+1</button>

通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值。同样的我们在js文件当中继续去定义一个add1函数以及在data中去声明一个变量count，代码如下

Page({

  /**
   * 页面的初始数据
   */
  data: {
    s:'我是IKUN',
    imgsrc:'/image/微信图片_20240113220335.png',
    num1:Math.random()*10,
    num2:Math.random().toFixed(2),
    count:0,
  },

  btnevent(e){
    //打印事件e内容
    console.log(e)
  },
  
  add1(){
    //点击之后打印OK
    console.log('ok'),
    this.setData({
      //进行+1处理
      count:this.data.count+1
    })
  },
})

 图形界面结果：

这里我们打开控制台就可以去查看count的结果了：

（3）事件传参

错位示范：

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

<button type="warn" bind:tap="tap(222)">!!!!</button>

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

正确写法：

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

<!-- 传递参数 -->
<button type="warn" bind:tap="tap" data-info="{{2}}">点击+2</button>

最终：

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

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    s:'我是IKUN',
    imgsrc:'/image/微信图片_20240113220335.png',
    num1:Math.random()*10,
    num2:Math.random().toFixed(2),
    count:0
  },

  btnevent(e){
    //打印事件e内容
    console.log(e)
  },
  
  add1(){
    //点击之后打印OK
    console.log('ok'),
    this.setData({
      //进行+1处理
      count:this.data.count+1
    })
  },

  tap(e){
    console.log(e),
    this.setData({
       //对上面count进行加上传入的参数值
      count:this.data.count+e.target.dataset.info
    })
  }

})

  图形界面结果：

 同样的我们打开控制台调试器AppData就可以去查看了，这里就不做演示。

3.bindinput 的语法格式

（1）输入事件响应

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

① 在wxml中通过 bindinput，可以为文本框绑定输入事件：

<!-- 输入事件 -->
<input type="text" bindinput="inputdata" name="" id=""/>

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

  //input事件
  inputdata(e){
    console.log(e.detail.value);
  }

这里我在wxss中再加上一个输入框美化样式 

input{
  border: 1px solid red;
  border-radius: 3px;
  margin: 5px;
  padding: 5px;
}

 结果图形化展示：

 打开控制台查看结果：

（2） 实现文本框和 data 之间的数据同步

这里我们可以使用input组件的value属性去设置初始化值，wxml代码如下所示：

<!-- 数据同步 -->
<input type="text" value="{{msg}}" bindinput="inputdata2" name="" id=""/>

然后我们在js文件定义msg变量的值，然后去设置一个同步函数inputdata2， js文件代码：

  inputdata2(e){
    this.setData({
      msg:e.detail.value
    });
  }

 同样的我们打开控制台调试器AppData就可以去查看了，这里就不做演示。

 最终整体结果wxml代码：

<!-- 数据绑定 -->
<!-- 1. 绑定内容 -->
<view>{{ s }}</view>

<!-- 2. 绑定属性 -->
<image src="{{ imgsrc }}" style="width: 100%;" mode="widthFix"/>
<!-- 3. 三元运算 -->
<view>{{num1>=5?"yes":"no"}}</view>
<!-- 4. 运算处理 -->
<view>{{num2*100}}</view>


<!-- 事件绑定 -->

<!-- 点击事件 -->
<button type="primary" bindtap="btnevent">点我</button>
<!--数据赋值  -->
<button type="primary" bind:tap="add1">点击+1</button>
<!-- 传递参数 -->
<button type="warn" bind:tap="tap" data-info="{{2}}">点击+2</button>

<!-- 输入事件 -->
<input type="text" bindinput="inputdata" name="" id=""/>
<!-- 数据同步 -->
<input type="text" value="{{msg}}" bindinput="inputdata2" name="" id=""/>

 最终整体结果的.js文件代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    s:'我是IKUN',
    imgsrc:'/image/微信图片_20240113220335.png',
    num1:Math.random()*10,
    num2:Math.random().toFixed(2),
    count:0,
    msg:"IKUN"
  },

  btnevent(e){
    //打印事件e内容
    console.log(e)
  },
  
  add1(){
    //点击之后打印OK
    console.log('ok'),
    this.setData({
      //进行+1处理
      count:this.data.count+1
    })
  },

  tap(e){
    console.log(e),
    this.setData({
      count:this.data.count+e.target.dataset.info
    })
  },

  //input事件
  inputdata(e){
    console.log(e.detail.value);
  },

  //事件同步
  inputdata2(e){
    this.setData({
      msg:e.detail.value
    });
  },
})

 图形化界面展示：

 想要获取更多的学习资源，可以点击以下链接查看。 黑马程序员web前端视频教程从入门到精通Web前端视频教程完整版_Web前端视频教程从入门到精通_黑马程序员 (itheima.com)

 以上就是本期的全部内容了，我们下次见！

分享一张壁纸：