交互(弹窗),音乐播放

自动关闭:

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
})
}


猜你喜欢

转载自blog.csdn.net/weixin_40326021/article/details/79924367