【练习】交互（弹窗），音乐播放
自动关闭：
wx.showToast({
title: postCollected?"收藏成功":"取消成功"
})
点击关闭：
wx.showModal({
title: '收藏',
content: '是否收藏该文本',
cancelText: "取消"
})
函数：自动关闭：
showToast: function (postsCollected, postCollected){
// 先设置缓存，绑定变量后，再弹窗
wx.setStorageSync("posts_collected", postsCollected);
this.setData({
collected: postCollected
});
wx.showToast({
title: postCollected?"收藏成功":"取消成功"
})
}
调用：this.showToast(postsCollected, postCollected);
点击关闭：
showModal: function (postsCollected, postCollected){
//先弹窗，进行判断，如果判断结果为“确定”，再设置缓存，绑定数据
var that=this;
wx.showModal({
title: '收藏',
content: '是否收藏该文本',
success:function(res){
if(res.confirm){
wx.setStorageSync("posts_collected", postsCollected);
that.setData({
collected: postCollected
});
}
}
})
},
调用：this.showModal(postsCollected, postCollected);
交互列表：wx.showActionSheet({
itemList: itemList,
itemColor:"#405f80"
}）
分享函数：
onShareTap:function(event){
var itemList=["分享给微信好友","分享到朋友圈","分享到微博"];
wx.showActionSheet({
itemList: itemList,
itemColor:"#405f80",
success:function(res){
wx.showModal({
title: "分享",
content: itemList[res.tapIndex]
})
}
})
}
res.cancel:点击“取消”以后为true，点击“分享到xx”以后为undefine
res.tapIndex：是点击的itemList中的序号
音乐播放和暂停，切换图片第二种方式：
需要判断音乐是否在播放：
data:{
isPlayingMusic:false
}
onMusicTap:function(event){
var isPlayingMusic = this.data.isPlayingMusic;
if (isPlayingMusic){ //如果正在播放，就暂停，并且把isPlayingMusic改为false
wx.pauseBackgroundAudio();
// this.data.isPlayingMusic=false;
this.setData({
isPlayingMusic:false
})
必须用setData修改data中的数据
}else{
wx.playBackgroundAudio({
dataUrl: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
});
// this.data.isPlayingMusic = true;
this.setData({
isPlayingMusic: true
})
}
}
改图标：
<image class="audio" src="{{isPlayingMusic?'/images/music-stop.jpg':'/images/music-start.jpg'}}" catchtap='onMusicTap'>image>
不同页面根据data.js中不同的路径播放不同音乐
data.js已经导入到post-detail.js中
在onLoad中已经将postId上传到 data：{}中
this.setData({
postData: postsData.postList[postId],
currentPostId: postId
})
在onMusicTap中，
else{
wx.playBackgroundAudio({
dataUrl: postsData.postList[this.data.currentPostId].music.url
等价于：dataUrl: this.data.postData.music.url
});
// this.data.isPlayingMusic = true;
this.setData({
isPlayingMusic: true
})
如果路径不对就用console.log一步一步输出找问题。
问题：Audio上点击播放、暂停，image并没有改变
原因：没有监听音乐播放、暂停事件
wx.onBackgroundAudioPlay(function(){
that.setData({
isPlayingMusic: true
})
});
wx.onBackgroundAudioPause(function () {
that.setData({
isPlayingMusic: false
})
});
在回调函数中，所以this要var that =this;
问题：播放时跳出页面，再进入页面，歌还在播放，但图标是未播放
原因：每进一次页面，data:{isPlayingMusic:false}运行一次
使用全局变量解决该问题
App({
onLaunch: function () {
先执行
},
onShow: function (options) {
再执行
},
onHide: function () {
隐藏后执行
},
})
在App({中定义
globalData:{
g_isPlayingMusic: false
}
})
在post-detail.js中引入app.js
var app = getApp();
把onLoad中监听音乐播放/暂停的事件放入一个函数中，并且对全局变量进行修改
（问题：为什么把这两个函数放入一个函数中，只是为了方便？这样修改全局变量类似于this.setData的修改吗）
setMusicMonitor:function(){
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;
});
}
在onLoad中进行判断
if (app.globalData.g_isPlayingMusic){
this.setData({
isPlayingMusic:true
})
}
this.setMusicMonitor();
这个例子还是有一些不明白的地方
问题：播放音乐时，进入别的页面，显示的还是播放中，其实应该显示未播放
原因：需要一个变量指代文章
globalData:{
g_isPlayingMusic: false,
g_currentMusicPostId: null
},
在setMusicMonitor中：
播放时：app.globalData.g_isPlayingMusic = true;
app.globalData.g_currentMusicPostId = that.data.currentPostId;
暂停时：app.globalData.g_isPlayingMusic=false;
app.globalData.g_currentMusicPostId =null;
在onLoad中进行判断：
if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId===postId){
this.setData({
isPlayingMusic:true
})
}