微信小程序开发笔记⑤——事件、音频（音乐）组件、movable-area组件和cover-view组件

事件

官网描述
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>

当然它本身也可以绑定很多事件，详情见小程序手册，比如下面的播放事件和结束事件，分别是开始播放和播放结束的时候会触发事件。