事件
官网描述
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
在小程序中存在两种事件,分别是冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
bind事件
bind事件属于冒泡事件
<view bindtap='bind1'>
view1
<view bindtap='bind2'>
view2
</view>
</view>
bind1:function(){
console.log("bind1");
},
bind2:function(){
console.log("bind2");
}
catch事件
catch事件属于非冒泡事件
<view bindtap='bind1'>
view1
<view catchtap='bind2'>
view2
</view>
</view>
在同一级中,catch事件会比bind事件先被捕捉
事件的参数,事件默认可以传递一个event对象
这个event对象包含了事件的一些信息
我们还可以在页面上传递一些参数,通过data-*
的形式定义要传递的参数
在事件对象中我们也可以发现存在这个数据
获取方式类似于取json中的数据
audio组件
官网描述
https://developers.weixin.qq.com/miniprogram/dev/component/audio.html
下面是一个简单的音频播放演示
<view>
<audio id='audio1' src='http://183.60.131.111/amobile.music.tc.qq.com/C4000004ketw0EuOct.m4a?guid=7854139360&vkey=02F7452A674443B5000105EAE6B90FA4539CA3780FE43860C9E7571D45F5598CEBCB959BFC44B5F75857CBFEE974423C0CA317F11DB7E148&uin=6148&fromtag=66' loop controls="{
{true}}" name="卞夫人" author="星尘" poster="https://y.gtimg.cn/music/photo_new/T002R300x300M000000hMsw84HkGxz_1.jpg?max_age=2592000"></audio>
</view>
当然它本身也可以绑定很多事件,详情见小程序手册,比如下面的播放事件和结束事件,分别是开始播放和播放结束的时候会触发事件。