微信扫码登录

其他登录方式

绑定手机号

注册

我同意用户协议

忘记密码

用户协议

绑定手机号

近期有不法分子打着爱盈利的旗号,制作“爱盈利”名称的App,并伪造爱盈利证件,骗取用户信任,以抖音点赞赚钱或其他方式赚钱为名义,过程中以升级会员获得高佣金为名让用户充值。
爱盈利公司郑重声明:我司没有研发或运营过任何名为“爱盈利”的APP,我司做任务赚钱类产品从没有让任何普通用户充值升级会员。我公司产品均在本网站可查询,请将网站拉至底部,点击“关于我们”可查看爱盈利相关产品与服务。
温馨提示:当遇到此类问题请拨打官方电话或添加官方微信,以免财产损失。爱盈利官网地址:www.aiyingli.com。
  • 推广与合作
X

小程序丨手把手教你微信小程序实战开发(八):小程序事件讲解

来源: 4451
微信小程序实战系列教材:
1.微信小程序实战开发(一):微信小程序简介
2.微信小程序实战开发(二):小程序基本目录结构讲解
3.微信小程序实战开发(三):小程序视图容器(view container)
4.微信小程序实战开发(四):组件的基本使用讲解
5.微信小程序实战开发(五):数据绑定讲解
6.微信小程序实战开发(六):渲染标签的使用
7.微信小程序实战开发 (七):样式模板的使用

关于小程序事件微信官方的文档如下:【传送门】
我们今天主要从以下几个方法来介绍一下:微信小程序事件。
手把手教你微信小程序实战开发(八):小程序事件讲解
一、什么是事件?
  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如 id, dataset, touches。
我们简单来说,
1.一种用户的行为用户长按某一张图片,点击某个按钮,这就是用户的行为,也是事件
2.一种通讯方式
为什么说事件也是一种通讯方式呢?因为用户点击按钮的时候,这是发生在UI层的,我们的UI要把一些信息发送给我们的逻辑代码,因此也是一种通讯方式
二、事件的类别
1.点击事件tap
2.长按事件longtab
3.触摸事件
(1)touchstart 开始触摸
(2)touchend 结束触摸
(3)touchmove 移动触摸
(4)touchcancel取消触摸
这里就有个问题了,结束触摸和取消触摸有什么区别吗?
结束触摸可以理解为是主动的停止的触摸事件,比如我们正在移动一张图片,移动完成后就是结束触摸了,然后可能在移动的过程中,突然有事件来打断了触摸事件,比如电话来了,打断了你的触摸事件,这时候就是取消触摸了
4.其他的触摸事件 submit
实际上每个控件都有自己独特的事件。

三、事件冒泡
1.首先我们先修改下启动界面,启动界面创建三个view组件,分别给他们对应的样式和绑定他们的点击事件,且布局是一层嵌套一层的。
.wxss的代码
  1. /**index.wxss**/
  2. .view1 {
  3. height: 500px;
  4. width: 100%;
  5. background-color: cyan;
  6. }

  7. .view2 {
  8. height: 300px;
  9. width: 80%;
  10. background-color: orange;
  11. }

  12. .view3 {
  13. height: 200px;
  14. width: 60%;
  15. background-color: red;
  16. }
手把手教你微信小程序实战开发(八):小程序事件讲解
再到.js文件下定义这个三个点击事件,代码如下:
保存编译 上述代码并点击视图3可以查看结果:

手把手教你微信小程序实战开发(八):小程序事件讲解
截图不明显,我们可以看动态图就比较清楚:
手把手教你微信小程序实战开发(八):小程序事件讲解
仔细观察可以看到,我们点击界面3的时候,控制台输出了3行,分别是clickView1,clickView2,clickView3的点击事件,点击界面2的时候,控制台输出了clickView2和clickView1,这就说明了点击子view的时候,也会响应父view的事件,这就是冒泡事件了,相反的,点击子view,父view不会响应点击事件,这就是非冒泡事件了。
事件分为冒泡事件和非冒泡事件:
  • 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
  • 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
那么冒泡事件有哪些呢?
上面所提到的点击事件,长按事件,触摸事件都是冒泡事件,其余的都是非冒泡事件!
四、事件的绑定
事件的绑定方式有两种:bind和catch。在上面的实例当中我们已经用过bind了,那么catch绑定事件和bind的绑定事件有什么不同呢?我们先来实例,最后在再来总结。
首先,我们将刚才实例中的view3改为catch绑定看一下效果:
  1. <view class="view1" bindtap="clickView1">
  2.   界面1
  3.     <view class="view2" bindtap="clickView2">
  4.     界面2
  5.         <view class="view3" catchtap="clickView3">
  6.           界面3
  7.         </view>
  8.     </view>
  9. </view>
点击视图3区域,我们可以发现没有视图2和视图1的相应,点击视图2区域,视图1区域还是有响应的。
手把手教你微信小程序实战开发(八):小程序事件讲解

通过上面的实例,大家应该比较清楚bind和catch的区别了吧?bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
五、事件的对象
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。我们还是从刚才的实例进行讲解。
.wxml
  1. <view class="view1" bindtap="clickView1">
  2.   界面1
  3.     <view class="view2" bindtap="clickView2">
  4.     界面2
  5.         <view class="view3" bindtap="clickView3">
  6.           界面3
  7.         </view>
  8.     </view>
  9. </view>
我们在.wxss页面稍作修改,在事件被执行的时候会将事件传递进来,我们在函数内将事件打印出来:
  1.   clickView1: function(event) {
  2.     console.log("clickView1")
  3.     console.log(event)
  4.   },
  5.   clickView2: function() {
  6.     console.log("clickView2")
  7.   },
  8. clickView3: function(event) {
  9.     console.log("clickView3")
  10.     console.log(event)
  11.   },
当我们点击视图3时,我们看到事件被打印出来,如下图所示:
手把手教你微信小程序实战开发(八):小程序事件讲解
手把手教你微信小程序实战开发(八):小程序事件讲解
我们从打印出来的数据可以看出里面有绑定事件的对象(object),我们先来了解一些这些对象:
1.type:代表事件的类型。(本例中是tap类型)
2.timeStamp:页面打开到触发事件所经过的毫秒数。
3.target:触发事件的源组件。
[td]
属性
类型
说明
idString事件源组件的id
tagNameString当前组件的类型
datasetObject事件源组件上由data-开头的自定义属性组成的集合
4.currentTarget:事件绑定的当前组件[td]
属性
类型
说明
idString当前组件的id
tagNameString当前组件的类型
datasetObject当前组件上由data-开头的自定义属性组成的集合
说明:为了更好的对比 target 和 currentTarget 。我们给每个view组件加上id后再重新看一下效果。
  1. <view class="view1" bindtap="clickView1" id="view1">
  2.   界面1
  3.     <view class="view2" bindtap="clickView2" id="view2">
  4.     界面2
  5.         <view class="view3" bindtap="clickView3" id="view3">
  6.           界面3
  7.         </view>
  8.     </view>
  9. </view>
我们仔细查看一下点击view3时,clickView3打印出来的event:
手把手教你微信小程序实战开发(八):小程序事件讲解
再来对比一下clickView1打印出来的log:
手把手教你微信小程序实战开发(八):小程序事件讲解
通过clickView的打印我们可以很明显的看出来,currenttarget是当前打印的事件组件,而target是触发事件的源组件。
5.dataset:在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.target.dataset 中会将连字符转成驼峰elementType。我们也来举例看一下:
  1. <view class="view1" bindtap="clickView1" id="view1" data-title="51小程序头条" data-id="100">
  2.   界面1
  3.     <view class="view2" bindtap="clickView2" id="view2">
  4.     界面2
  5.         <view class="view3" bindtap="clickView3" id="view3">
  6.           界面3
  7.         </view>
  8.     </view>
  9. </view>
我们直接点击视图3看看打印结果如下:
手把手教你微信小程序实战开发(八):小程序事件讲解
通过这样的方式,我们就可以很方便的获取控件相应的属性,得到这锅属性后,我们就可以很方便的实现我们的逻辑。实际上dataset的非常的实用,以后会经常用到。


爱盈利(aiyingli.com)移动互联网最具影响力的盈利指导网站。定位于服务移动互联网创业者,移动盈利指导。我们的目标是让盈利目标清晰可见!降低门槛,让缺乏经验、资金有限的个人和团队获得经验和机会,提高热情,激发产品。

评论

相关文章推荐

SELECT dw_posts.ID,dw_posts.post_title,dw_posts.post_content FROM dw_posts INNER JOIN dw_term_relationships ON (dw_posts.ID = dw_term_relationships.object_id) WHERE 1=1 AND(dw_term_relationships.term_taxonomy_id = 5246 ) AND dw_posts.post_type = 'post' AND (dw_posts.post_status = 'publish') GROUP BY dw_posts.ID ORDER BY RAND() LIMIT 0, 6

京ICP备15063977号-2 © 2012-2018 aiyingli.com. All Rights Reserved. 京公网安备 11010102003938号