微信小程序：事件绑定

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

小程序中绑定事件，通过bind关键字来实现。如bindinput，bindtap(绑定点击事件)，bindchange等。

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches

事件的使用方式

1、在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

2、在相应的Page定义中写上相应的事件处理函数，参数是event。

Page({
  tapName: function(event) {
    console.log(event)
  }
})

可以看到log出来的信息大致如下：注意view标签的id属性值为e.currentTarget.id，自定义属性hi值为：e.currentTarget.dataset.hi,

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

事件分类:

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

touchstart:手指触摸动作开始

touchmove:手指触摸后移动

touchcancel:手指触摸动作被打断，如来电提醒，弹窗

touchend:手指触摸动作结束

tap:手指触摸后马上离开

longpress:手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

longtap:手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

transitionend:会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart:会在一个 WXSS animation 动画开始时触发

animationiteration:会在一个 WXSS animation 一次迭代结束时触发

animationend:会在一个 WXSS animation 动画完成时触发

touchforcechange:在支持 3D Touch 的 iPhone 设备，重按时会触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)

一、绑定输入事件bindinput

1、需要给input标签绑定input事件，这个事件bindinput在当值改变时就会触发。

2、编写input事件的执行逻辑。

3、通过事件源对象(e)来获取输入框中的值(e.detail.value)，然后赋值给num.

把输入框的值赋值给data当中使用setData方法。

获取输入框的值(e.detail.value)和自定义属性(e.currentTarget.dataset .xxx)都是从事件源对象（e）获取的。

获取data数据模型中的值是通过this.data.xx来获取的。注意：微信小程序中获取数据模型中的值和给数据模型中的属性赋值都与vue中的不一样。

二、绑定单击事件bindtap

绑定事件的时候不能直接进行传参，否则会将方法名连同参数一起当作方法名。只能通过自定义属性的方式传参。

自定义属性 operation,

获取输入框的值：e.detail.value;获取自定义属性的值：e.currentTarget.dataset.xxx;给data中的属性赋值：this.setData();获取data数据模型中的值：this.data.xxx;

绑定事件时不能带参数，不能带括号。事件传值通过自定义属性的方式。在事件触发时获取数据。

三、绑定手指触摸动作开始bindtouchstart和结束bindtouchend

touches:数组，触摸事件，当前停留在屏幕中的触摸点信息的数组；touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。表示当前停留在屏幕上的触摸点。

changedTouches:数组，触摸事件，当前变化的触摸点信息的数组；changedTouches 数据格式同 touches。表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

index.wxml中代码：

外层循环显示一级菜单，点击一级菜单时触发isOpen函数并传递id，且刚开始时，二级菜单时隐藏的状态；一开始时数据模型中的hidden属性为true，即一级菜单右侧显示的都是扩展的图标，

1、点击一级菜单时，先获取被点击菜单的id，获取数据模型中的menuList，遍历menuList，如果某个菜单的id等于当前被点击的菜单的id，则将给菜单item的hidden属性值取反，即由原来的隐藏改为显示，另外一级菜单右侧的扩展图标改为collapse图标

内层循环显示二级菜单，点击二级菜单时，触发menuClick函数并传递name.

1、点击二级菜单时先获取当前被点击菜单的name，如果当前被点击的菜单的name值为“企业信息管理，则通过wx.relaunch（）方法跳转到该页面”

<view class="leftMenu" bindtouchstart='touchStart' bindtouchend="touchEnd" animation="{{animation}}">
  <view class="item"  wx:for="{{menuList}}" wx:for-index="idx" wx:for-item="item" wx:key="idx">
      <view bindtap="isOpen" class="menu" data-id="{{item.id}}">
          <view>
              <image class="img" src="/static/menu.png" mode="aspectFill"/><text class="name">{{item.name}}</text>
          </view>
          <view>
             <image class="icon_img" src="{{item.hidden ? '/static/expand.png' : '/static/collapse.png'}}" mode="aspectFill"/>
          </view>
      </view>
      <view hidden="{{item.hidden}}">
          <block wx:for="{{item.children}}"  wx:for-index="index" wx:for-item="items" wx:key="index">
              <view class="submenu" bindtap="menuClick" data-name="{{items.name}}">
                  <view>
                      <text class="name">{{items.name}}</text>
                  </view>
              </view>
          </block>
      </view>
  </view>
</view>

index.js中的代码：

bindtouchstart事件给触摸点的定位赋值，bindtouchend将触摸点现在的定位和原来的定位进行比较，从而确定是左滑还是右滑，进而控制菜单是否显示。

1、小程序加载时即从后台获取了menuList，

2、首页（index）页面加载时（onLoad），先从storage中获取menuList，在循环遍历，

先通过父id为0且菜单名称不为首页来过滤得到所有的一级菜单，再将所有的一级菜单的children属性置空，给每个item都添加hidden属性，且值为true。

再对menuList中所有的item进行遍历，如果父id为当前item的id，则将菜单放入当前item的children数组中，再讲当前菜单放入menuList中。最后将menuList赋值个数据模型中的menuList，这样打开首页时，menuList就是已经过滤掉首页的menuList。

3、创建一个动画实例animation

4、将数据模型中的hidden属性置为false，这样，一开始时二级菜单为隐藏状态。

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    hidden:true,
    menuList:[]
  },
  touchStart:function(e){
    this.setData({
        "touch.x": e.changedTouches[0].clientX,
        "touch.y": e.changedTouches[0].clientY
    });
  },
  touchEnd:function(e){
      let x = e.changedTouches[0].clientX;
      let y = e.changedTouches[0].clientY;
    var turn = this.getTouchData(x,y,this.data.touch.x,this.data.touch.y);
    if(turn == 'left'){
        this.animation.translateX(-220).step();    //  在x轴平移-220px,即向左平移220px，调用实例的step（）方法来描述动画
        this.setData({ animation: this.animation.export() })  // 最后通过动画实例的 export 方法导出动画数据传递给组件的 animation
    }else if(turn == 'right'){
        this.animation.translateX(0).step();
        this.setData({ animation: this.animation.export() })
    }
  },
  getTouchData:function(endX, endY, startX, startY){
    let turn = "";
    if (endX - startX > 20 && Math.abs(endY - startY) < 30) {      //右滑
        turn = "right";
    } else if (endX - startX < -20 && Math.abs(endY - startY) < 30) {   //左滑
        turn = "left";
    }
      return turn;
  },
  isOpen:function(e){
    var id = e.currentTarget.dataset.id;   // 点击一级菜单时，先获取被点击菜单的id，
    var menuList = this.data.menuList;   // 获取数据模型中的menu，
    menuList.forEach((item,index) => {   // 遍历menuList，如果某个菜单的id等于当前被点击的菜单的id，则将给菜单item的hidden属性值取反，即由原来的隐藏改为显示。
        var id2 = item.id;
        if(id2 == id){
            item.hidden = !item.hidden;
        }else{
            item.hidden = true;
        }
    });
    this.setData({menuList:menuList});
  },
  menuClick:function(e){
      var name = e.currentTarget.dataset.name;  // 点击二级菜单时先获取当前被点击菜单的name
      if(name == '企业信息管理'){     // 如果当前被点击的菜单的name值为“企业信息管理，则跳转到该页面”
          wx.reLaunch({
            url: '/pages/demo/index/index'
          })
      }
  },
  getMenuList:function(list){
    var menuList = [];
    list.forEach((item,index) => {
        var id = item.id;
        var name = item.name;
        var parentId = item.parentId;
        if(parentId == 0 && name != '首页'){//过滤平台的首页
            //第一层级
            item.children = [];
            item.hidden = true;
            list.forEach((jtem,jndex) => {
                var parentId2 = jtem.parentId;
                if(parentId2 == id){  // 如果父id为当前item的id，则将菜单放入当前item的children数组中
                    //第二层级
                    item.children.push(jtem);
                }
            });
            menuList.push(item);
        }
    });
    this.setData({
      menuList: menuList
    })
  },    
  onLoad: function () {
    if(app.globalData.token){
        //代表从页面跳转过来
        var menuList = wx.getStorageSync('menuList');
        this.getMenuList(menuList);
        this.animation = wx.createAnimation();  // 创建一个动画实例animation
        this.setData({hidden: false});    // 将数据模型中的hidden属性置为false
    }else{
        //代表第一次加载
        wx.showLoading({
          title: '加载中'
        })
        // 由于 checkBind 是网络请求，可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        app.checkBindCallback = res => {
            wx.hideLoading();
            if(res.data.code == 1){
                var menuList = wx.getStorageSync('menuList');
                this.getMenuList(menuList);
                this.animation = wx.createAnimation();
                this.setData({hidden: false});
            }
        }
    }
  }
})