设置title后即可修复
一、编辑自定义组件 music文件下面-index.js title src必须传
//组件 index.js
// components/classic/music/index.js
import { classicBeh } from '../classic-beh.js'
//音乐
const mMgr = wx.getBackgroundAudioManager()
Component({
/**
* 组件的属性列表
*/
// 继承行为 可以多继承
behaviors: [classicBeh],
properties: {
src:String,
title:String
},
/**
* 组件的初始数据
*/
data: {
playing:false,
pauseSrc:'images/player@pause.png',
playSrc:'images/player@play.png'
},
// 在组件实例被从页面节点树移除时执行
detached:function(event){
// wx.if会重新渲染界面 hideen只是隐藏
// mMgr.stop()
},
// 在组件实例进入页面节点树时执行
attached:function(){
this._recoverStatus()
this._monitorSwitch()
},
/**
* 组件的方法列表
*/
methods: {
//播放事件
onPlay:function(event){
//图片切换
if (!this.data.playing) {
this.setData({
playing: true
})
//播放
mMgr.src = this.properties.src
mMgr.title=this.properties.title
}else{
this.setData({
playing: false
})
// 暂停
mMgr.pause()
}
},
//判断是否在播放
_recoverStatus:function(){
//没有任何音乐播放
if(mMgr.paused){
this.setData({
playing:false
})
return
}
//播放相等
if(mMgr.src==this.properties.src){
this.setData({
playing:true
})
}
},
//监听音乐几种函数 几种状态
_monitorSwitch:function(){
mMgr.onPlay(()=>{
this._recoverStatus()
})
mMgr.onPause(()=>{
this._recoverStatus()
})
mMgr.onStop(()=>{
this._recoverStatus()
})
mMgr.onEnded(()=>{
this._recoverStatus()
})
}
}
})
二、组件 music文件下面的 index.wxml
组件index.wxml
<!--components/classic/music/index.wxml-->
<view class="container" hidden="{{hidden}}" >
<image class="classic-img" src="{{img}}"></image>
<image class="player-img" bindtap="onPlay" src="{{!playing?playSrc:pauseSrc}}"></image>
<image class="tag" src="images/music@tag.png"></image>
<text class="content" >{{content}}</text>
</view>
三、首页文件视图文件 classic.wxml
classic.wxml
<v-music hidden="{{classic.type!=200}}" img="{{classic.image}}"
content="{{classic.content}}" src="{{classic.url}}" title="{{classic.title}}" />
注意:
可能还会报一个:若需要小程序在退到后台后继续播放音频,你需要在 app.json
中配置 requiredBackgroundModes
属性,详见: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#requiredbackgroundmodes 错误
全局文件 app.json文件 添加
//添加这个 **********************
"requiredBackgroundModes": [
"audio"
]
app.json
{
"pages": [
"pages/classic/classic",
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "片片芳华入水流",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
//添加这个 **********************
"requiredBackgroundModes": [
"audio"
]
}
image.png
image.png
网友评论