微信小程序之触控事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id， dataset， touches。
事件分类
事件分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
WXML的冒泡事件列表：
| 类型 | 触发条件 |
|---|---|
| touchstart | 手指触摸动作开始 |
| touchmove | 手指触摸后移动 |
| touchcancel | 手指触摸动作被打断，如来电提醒，弹窗 |
| touchend | 手指触摸动作结束 |
| tap | 手指触摸后马上离开 |
| longtap | 手指触摸后，超过350ms再离开 |
注：除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件，如<form/>的submit事件，的input事件，
事件绑定
事件绑定的写法同组件的属性，以 key、value 的形式。
- key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
- value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
注：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
在编写代码中，使用频率高的事件方式是
- 单击——tap
- 长按——longtap
- 滑动——touchstart、touchmove、touchend、touchcancel
细心的读者可能会发现，点击事件中，还有一个很重要的事件——双击，小程序竟然没有实现，真是神奇。不过可以通过单击事件模拟双击时间实现。查阅资料发现，电脑或者手机的双击事件都是300ms内连续点击，所以本文也采用300ms以内连续点击视为双击事件。
<!--index.wxml-->
<view>
<button bindtap="binddoubletap">点击</button>
</view>
//index.js
Page({
data: {
//上一次点击的时间
lastTapTime:0
},
binddoubletap:function(e){
//获取点击当前时间
var curTime = e.timeStamp
//上一次点击的时间
var lastTime = this.data.lastTapTime
if(lastTime > 0){
//电脑双击事件间隔为300ms以内，这里也用300ms间隔吧
if(curTime - lastTime <300){
console.log("双击事件触发")
}else{
console.log("单击事件触发")
}
}else{
console.log("单击事件触发")
}
//保存本次点击的时间
this.setData({
lastTapTime: curTime
})
}
})
小程序学习笔记之数据绑定
微信小程序是通过状态模式-单向数据流来实现数据绑定。
状态模式定义一个对象，改对象可以通过管理其状态的变化，从而实现应用程序做出相应的变化。
简单的讲，对象状态化，只要对象状态发送变化，就通知页面更新视图元素。 通过以下三个步骤实现：
- 识别哪个UI元素被绑定了相应的对象。
- 监视对象状态的变化。
- 将所有变化传播到绑定的视图上。
注意数据流向是单向的，即视图变化不会影响对象状态。
index.wxml:
<view> </view>
index.js:
Page({
data: {
message: 'Hello MINA!'
}
})
通过以上代码，就可以完成简单的数据绑定。
以下将展示小程序提供的更加多元化的复杂的数据绑定方式。
index.wxml
<!--数据绑定--内容-->
<view></view>
<!--数据绑定--组件属性-->
<view id="item-">组件属性id-</view>
<!--数据绑定---控制属性-->
<view wx:if="">控制属性</view>
<!--数据绑定---三元运算-->
<view hidden="">Hidden--</view>
<!--数据绑定---算数运算-->
<view> + + d</view>
<!--数据绑定---逻辑判断-->
<view wx:if="">6</view>
<!--数据绑定---字符串运算-->
<view>Hello </view>
<!--数据绑定---数组组合-->
<view wx:for=""></view>
<!--数据绑定---对象-->
<!--最终组合成的对象是{for: 1, bar: 2}-->
<template is="objectCombine" data=""></template>
<!--数据绑定---扩展运算符 ... 来将一个对象展开-->
<!--最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}-->
<template is="objectCombine" data=""></template>
<!--数据绑定---对象的 key 和 value 相同-->
<!--最终组合成的对象是{foo: 'my-foo', bar:'my-bar'}-->
<template is="objectCombine" data=""></template>
index.js
Page({
data:{
//内容
message:'Hello MINA!',
//组件属性
id: 0,
//控制属性
condition: true,
//三元运算
flag:false,
//算数运算
a: 1,
b: 2,
c: 3,
//逻辑判断
length: 6,
//字符串运算
name: 'MINA',
//数组组合
zero: 0,
//对象
x: 0,
y: 1,
//对象展开
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
},
e: 5,
//对象key和value相同
foo: 'my-foo',
bar: 'my-bar'
},
})
仅仅通过绑定数据实现视图的展示是不够的，一旦用户操作或者数据更新引起数据变化，视图需要同步更新。
所以视图上的数据都必须用过事件传递给对象，只有用户操作视图，才能获取到数据，并更新对象状态。
调用this.setData（）方法实现视图的部分渲染。如下图：
视图-对象
- 视图A由于用户操作，触发事件A 。
- 事件A处理函数中，更新对象A和对象B的状态。
- 由于对象A和B状态变化，通知视图A和B更新。
index.wxml:
<view bindtap="changeText"> </view>
index.js:
Page({
data: {
message: 'Hello MINA!'
},
changeText: function(){
this.setData({
message:'changed data'
})
}
})
