uniapp入门:常用事件绑定与数据同步

     1.常见事件与事件绑定
         1.1点击事件bindtap
         1.2 文本输入事件bindinput
         1.3 切换事件bindtouchend
     2.数据同步
         2.1事件回调
         2.2逻辑层中page对象中的中数据如何进行改变
         2.3页面触发事件如何传参到page中数据
         2.4 文本框中内容如何传递到page中

     开始今天的内容之前首先想一个问题：什么叫事件？官方说法:事件是视图层到逻辑层的通讯方式.通俗易懂的说法:每个操作都可以算作一个事件,比如说点击按钮时点击事件、输入文本信息时就是输入事件等等。

1.常见事件与事件绑定

1.1点击事件bindtap

     手指触摸之后马上离开触发的事件,相当于html中click事件.下面以一个简单示例进行说明:
    index.js中定义点击函数:clickFunction:

Page({
  clickFunction: function() {
    console.log("点击事件生效")
  }
  })
1
2
3
4
5

    index.wxml创建按钮标签,使用bindtap属性绑定自定义点击事件函数clickFunction:

<button type="primary" bindtap="clickFunction">按钮</button>
1

    页面点击按钮之后观察控制台输出指定内容说明事件绑定成功:

1.2 文本输入事件bindinput

     文本框中输入内容之后触发的事件。以一个简单的示例进行讲解:
     index.js中创建inputFcuntion函数,绑定输入事件生效之后输出指定文字内容:

Page({
  // 输入事件
  inputFcuntion: function(){
    console.log("输入内容之后控制台信息打印");
  }
  })
1
2
3
4
5
6

     index.wxml中添加input标签,属性中使用bindinput绑定自定义的输入事件函数:

<view>文本输入区域:</view>
<input type="text" bindinput="inputFcuntion"></input>
1
2

     文本中输入内容之后观察控制台有内容输出说明输入事件绑定成功:

1.3 切换事件bindtouchend

     状态改变时触发。定义一个多选框,支持选择男和女,进行切换时能实现控制台内容删除.
    index.js中定义事件切换函数:

Page({
  // 切换事件
  changeFcuntion: function(){
    console.log("切换选项之后打印输出内容");
  }
  })
1
2
3
4
5
6

    index.wxml中创建多选框,支持男女切换:

<checkbox-group>
<checkbox bindtouchend="changeFcuntion">男</checkbox>
<checkbox bindtouchend="changeFcuntion">女</checkbox>
</checkbox-group>
1
2
3
4

    点击切换后观察控制台内容输出:

2.数据同步

    如何实现在视图层与逻辑层进行数据传递，下面通过几个问题以及简单案例来说明实现过程。

2.1事件回调

    当事件回调的时候,js文件所代表的逻辑层会收到一个事件对象event,相关的属性如下,其中最常用的是target和detail属性.

2.2逻辑层中page对象中的中数据如何进行改变

    page中data可以看做是page对象的一个属性,从当前page对象页面获取data中每个定义数据方法:

this.data.data属性名
1

    当前page对象页面设置data中每个定义数据值的方法:

 this.setData({
      data中属性名: this.data.data中属性名+处理逻辑(加减乘除或字符串拼接)
    })
1
2
3

    下面用案例来说明一下如何根据事件来实现page对象中数据变化:
    page对象中定义初始化点击次数:clickNmu,页面上每点击一次按钮,该次数实现加一并打印到控制台.
    index.js中初始化clickNmu并从点击事件中设置clickNmu值:

Page({
  data:{
    // 点击次数
    clickNmu: 0
  },
  // 点击事件
  clickFunction: function(event) {
    this.setData({
      clickNmu: this.data.clickNmu+1
    })
    console.log(this.data.clickNmu);
  }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13

    index.wxml中按钮添加点击事件:

<button type="primary" bindtap="clickFunction">按钮</button>
1

    点击按钮之后控制台点击次数进行加一并打印输出:

2.3页面触发事件如何传参到page中数据

    uniapp中页面函数中不支持传递参数,如果需要传递参数需要按照如下格式定义参数名以及参数值:

data-属性名="{{属性值}}"
1

page对象中获取页面自定义参数值的方式:

事件回调对象event.target.dataset.属性名
1

通过案例说下如何进行使用:
    2.2中的page对象中初始点击次数默认设置为0,每次点击页面按钮需要将点击次数加5.通过页面传参实现。
    index.wxml中设置点击事件传递参数名initClickNum以及参数值5:

<button type="primary" bindtap="clickFunction" data-initClickNum="{{5}}">按钮</button>
1

    index.js中page对象中重置点击次数:当前点击次数+页面点击事件新增点击次数5:

Page({
  data:{
    // 点击次数
    clickNmu: 0
  },
  // 点击事件
  clickFunction: function(event) {
    this.setData({
      clickNmu: this.data.clickNmu + event.target.dataset.initclicknum
    }),
    console.log(this.data.clickNmu)
  }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13

    每次点击之后观察控制台输出内容(每次加5):

    注意每次加5需要使用差值表达式进行包裹,否则会解析成字符串5,到逻辑层相加就会成为字符串拼接.另外对于page对象中获取自定义属性名会进行去驼峰处理,页面中定义的属性名是initClickNum,实际逻辑层解析出来的是initclicknum.

2.4 文本框中内容如何传递到page中

    以input文本框输入为例将以下如何将文本框输入的内容同步到page对象指定数据中.
    index.js中初始化定义消息属性:msg,文本输入事件中将输入的内容进行拼接,获取文本框中输入内容方式:

事件回调event.detail.value
1

具体逻辑如下:

Page({
  data:{
    // 文本信息
    msg: 'page对象中的msg信息,拼接页面输入的信息:'
  },
  // 输入事件
  inputFcuntion: function(envet){
    console.log(envet);
    console.log(envet.detail.value);
    console.log(this.data.msg);
    this.setData({
      msg: this.data.msg + envet.detail.value
    })
    console.log(this.data.msg);
  }
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    index.wxml中给文本框设置value属性:

<input type="text" bindinput="inputFcuntion" value="你好"></input>
1

    文本框中输入内容之后观察控制台打印信息:

    补充一个遇到的问题:在实现第一个点击事件时,点击按钮控制台输出如下警告信息:Component “pages/index/index“ does not have a method “ 方法名“ to handle event “tap".这个警告的原因有很多，说下我当时的处理方式:将项目中index.ts文件去除即可.当前项目创建默认生成index.ts,index.js都是手动创建的,出现上面的警告应该是解析文件有误导致的。.ts文件是typescript语言，.js是javascript语言，目前逻辑层都是使用.js文件进行逻辑控制！