实现功能切换期刊的时候,切换到音乐播放器,点击可以播放,再次点击暂停,切换期刊的时候,不会暂停音乐
首先看下组件的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/[email protected]"/>
<!-- 对应文字 -->
<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/[email protected]",
playSrc:"images/[email protected]",
},
//播放音乐时候,进行切换,如果切换的页面不是这个音乐的页面,那么按钮是播放的按钮,
//如果切换的页面是播放音乐对应的页面,按钮是显示暂停的按钮
//该方法也只能通过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}}"/>
代码的讲解都写在注释里,欢迎交流!