`post-detail.js`
~~~javascript
onMusicTap:function(event){
var currentPostId = this.data.currentPostId;
var postData = postsData.postList[currentPostId];
var isPlayingMusic = this.data.isPlayingMusic;
if(isPlayingMusic){
wx.pauseBackgroundAudio();
this.setData({
isPlayingMusic:false
});
}else{
wx.playBackgroundAudio({
dataUrl:postData.music.url,
title: postData.music.title,
coverImgUrl: postData.music.coverImg
});
this.setData({
isPlayingMusic:true
});
}
},
~~~
`post-detail.wxml`
~~~html
<image catchtap="onMusicTap" class="audio" src="{{isPlayingMusic?'/images/music/music-stop.png':'/images/music/music-start.png'}}"></image>
~~~
### 音樂播放時切換頭圖
```html
<image class="head-image" src="{{isPlayingMusic?music.coverImg:headImgSrc}}"></image>
```
### 總控開關同步
onload方法當中
~~~javascript
var that = this;
wx.onBackgroundAudioPlay(function(){
that.setData({
isPlayingMusic:true
});
});
wx.onBackgroundAudioPause(function(){
that.setData({
isPlayingMusic: false
});
});
~~~
### 解決跳到其他頁面中音樂播放狀態問題
app.js中注冊一個全局變量
~~~javascript
App({
globalData:{
g_isPlayingMusic:false,
}
})
~~~
`post-detail.js`的onload中增加全局音樂狀態控制
~~~
// 獲取全局變量
var app = getApp();
~~~
~~~
***if(app.globalData.g_isPlayingMusic){
this.setData({
isPlayingMusic:true
});
}
// 監聽音樂播放總控
var that = this;
wx.onBackgroundAudioPlay(function(){
that.setData({
isPlayingMusic:true
});
***app.globalData.g_isPlayingMusic = true;
});
wx.onBackgroundAudioPause(function(){
that.setData({
isPlayingMusic: false
});
***app.globalData.g_isPlayingMusic = false;
});
~~~
### 解決跳轉到其他頁面中音樂播放內容錯誤的問題
~~~javascript
App({
globalData:{
g_isPlayingMusic:false,
g_currentMusicPostId:null
}
})
~~~
~~~javascript
** if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId==postId){
this.setData({
isPlayingMusic:true
});
}
// 監聽音樂播放總控
var that = this;
wx.onBackgroundAudioPlay(function(){
that.setData({
isPlayingMusic:true
});
app.globalData.g_isPlayingMusic = true;
** app.g_currentMusicPostId = that.data.currentPostId;
});
wx.onBackgroundAudioPause(function(){
that.setData({
isPlayingMusic: false
});
app.globalData.g_isPlayingMusic = false;
** app.g_currentMusicPostId = null;
});
~~~
### 補充：banner跳轉詳情頁
~~~html
<swiper-item>
<image catchtap="onSwiperItemTap" src='/images/wx.png' data-postId="3"></image>
</swiper-item>
<swiper-item>
<image catchtap="onSwiperItemTap" src='/images/vr.png' data-postId="4"></image>
</swiper-item>
<swiper-item>
<image catchtap="onSwiperItemTap" src='/images/iqiyi.png' data-postId="5"></image>
</swiper-item>
~~~
~~~js
onSwiperItemTap:function(event){
var postId = event.currentTarget.dataset.postid;
console.log(postId);
wx.navigateTo({
url: 'post-detail/post-detail?id=' + postId,
})
},
~~~
