【练习】交互（弹窗），音乐播放

自动关闭：

 

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

})

}