实现功能切换期刊的时候,切换到音乐播放器,点击可以播放,再次点击暂停,切换期刊的时候,不会暂停音乐
首先看下组件的wsml代码:
<!--components/classic/music/index.wxml--><view hidden="{{hidden}}" class='container'> <!-- 音乐封面图 --> <image class="classic-img {{playing?'rotation':''}}" src="{{img}}"/> <!-- 默认播放按钮 --> <image bind:tap="onPlay" class="player-img" src="{{!playing?playSrc:pauseSrc}}"/> <!-- 分类名 --> <image class="tag" src="images/music@tag.png"/> <!-- 对应文字 --> <text class="content">{{content}}</text></view>wxss代码:
/* components/classic/music/index.wxss */.container{ display: flex; flex-direction: column; align-items: center}.classic-img{ width: 442rpx; height: 422rpx; margin-top: 60rpx; border-radius: 50%;}.player-img{ width: 120rpx; height: 120rpx; position: relative; bottom: 270rpx;}.tag{ width: 46rpx; height: 142rpx; /* 相对偏移 方向相反 */ position: relative; right:310rpx; bottom:58rpx;}.rotation { -webkit-transform: rotate(360deg); animation: rotation 12s linear infinite; -moz-animation: rotation 12s linear infinite; -webkit-animation: rotation 12s linear infinite; -o-animation: rotation 12s linear infinite;}@-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}JS代码:
//定义一个变量来存放背景音乐管理对象const mMgr = wx.getBackgroundAudioManager();Component({ /** * 组件的属性列表 */ properties: { img: String, content: String, src:String }, /** * 组件的初始数据 * 播放音乐 使用API */ data: { playing:false, pauseSrc:"images/player@pause.png", playSrc:"images/player@play.png", }, //播放音乐时候,进行切换,如果切换的页面不是这个音乐的页面,那么按钮是播放的按钮, //如果切换的页面是播放音乐对应的页面,按钮是显示暂停的按钮 //该方法也只能通过wx:if去触发 hidden不行 attached(event){//方法的简写 this._recoverStatus();//调用私有方法--恢复状态 this._monitorSwitch();//调用私有方法--同步状态 }, //wx:if才能执行detached detached:function(event){ // mMgr.stop();//重复生命周期------切换期刊的时候 音乐会停止 }, /** * 组件的方法列表 */ methods: { onPlay:function(event){ // 播放按钮的切换 //如果音乐是未播放的状态 那么就播放音乐 if(!this.data.playing){ this.setData({ playing: true, }) mMgr.src = this.properties.src }else{//如果是播放状态 点击就暂停 this.setData({ playing: false, }) mMgr.pause() } }, //私有方法--切换音乐期刊的私有方法 _recoverStatus:function(){ //当所有的页面都没有音乐播放的时候, if(mMgr.paused){ this.setData({ playing:false, //都处于没有播放的状态 }) return //停止 } //如果当前播放的音乐和当前页面相对应 //当前播放的音乐地址 mMgr.src 等于当前页面播放的音乐 if(mMgr.src== this.properties.src){ this.setData({ playing: true, //那就是处于播放的状态 }) } }, //私有方法--外部播放开关状态和组件播放状态同步 _monitorSwitch:function(){ //点击播放 触发 mMgr.onPlay((res)=>{ this._recoverStatus() }) //点击暂停 触发 mMgr.onPause((res) => { this._recoverStatus() }) //关掉外部开关的打叉 触发 mMgr.onStop((res)=>{ this._recoverStatus() }) //音乐播放完成后 状态改变 mMgr.onEnded((res)=>{ this._recoverStatus() }) } }})应用到page页面中:
<v-music wx:if="{{classic.type==200}}" src="{{classic.url}}" img="{{classic.image}}" content="{{classic.content}}"/>代码的讲解都写在注释里,欢迎交流!
