[TOC] 音乐播放带旋转 ## 要点 * 获取背景音乐 ``` wx.getBackgroundAudioManager(); ``` * 点击播放 ``` onMusic(){ if (this.data.isPlay){ this.setData({ isPlay:false }) audio.pause(); } else{ audio.title = this.properties.title; audio.src = this.properties.url; this.setData({ isPlay:true }) } } ``` * 监听与页面保持一致 * attached 函数 你不在method里 ``` //当组件触发 attached 生命周期时，会依次触发 my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数 attached(){ //监听音频播放事件 audio.onPlay(()=>{ this.setData({ isPlay:true }) }) //监听音频暂停事件 audio.onPause(()=>{ this.setData({ isPlay:false }) }) //监听音频停止事件 audio.onStop(()=>{ this.setData({ isPlay:false }) }) //监听音频自然播放至结束的事件 audio.onEnded(()=>{ this.setData({ isPlay:false }) }) } ``` # 具体代码 ## js ``` const audio = wx.getBackgroundAudioManager(); Component({ /** * 组件的属性列表 */ properties: { title: String, url: String }, behaviors:[common], /** * 组件的初始数据 */ data: { isPlay:false }, /** * 组件的方法列表 */ methods: { onMusic(){ if (this.data.isPlay){ this.setData({ isPlay:false }) audio.pause(); } else{ audio.title = this.properties.title; audio.src = this.properties.url; this.setData({ isPlay:true }) } } }, //当组件触发 attached 生命周期时，会依次触发 my-behavior 中的 attached 生命周期函数和 my-component 中的 attached 生命周期函数 attached(){ //监听音频播放事件 audio.onPlay(()=>{ this.setData({ isPlay:true }) }) //监听音频暂停事件 audio.onPause(()=>{ this.setData({ isPlay:false }) }) //监听音频停止事件 audio.onStop(()=>{ this.setData({ isPlay:false }) }) //监听音频自然播放至结束的事件 audio.onEnded(()=>{ this.setData({ isPlay:false }) }) } }) ``` ## wxml ``` <view class='music' > <image src="/images/banner.png" class="banner {{isPlay?'rotate':''}}" ></image> <image src="{{isPlay?'/images/play.png':'/images/pause.png'}}" class='music-img' bind:tap="onMusic"></image> </view> ``` ## wxss ``` .music{ display: flex; flex-direction: column; justify-content: center; align-items: center; } .banner{ width: 200px; height: 200px; border-radius:100px; } .music-img{ width: 60px; height: 60px; position: absolute; top: 70px; z-index: 10; } .rotate{ animation: rotate 12s infinite; } @keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } ```