微信小程序实战–集阅读与电影于一体的小程序项目(三)
程序员文章站
2022-06-04 18:57:16
14.wx.showToast交互反馈 "wx.showToast文档" post detail.js添加个消息提示框 效果 15.音乐播放功能 "音乐播放API文档" 在posts data.js里面给每篇文章添加一个music属性 post detail.wxml 没播放音乐就显示文章图片,播放 ......
14.wx.showtoast交互反馈
post-detail.js添加个消息提示框
oncollectiontap: function(ev) { var postscollected = wx.getstoragesync('posts_collected') var postcollected = postscollected[this.data.currentpostid] postcollected = !postcollected; postscollected[this.data.currentpostid] = postcollected; // 更新文章是否收藏的缓存值 wx.setstoragesync('posts_collected', postscollected) // 更新数据绑定变量,实现切换图片 this.setdata({ collected: postcollected }) wx.showtoast({ title: postcollected ? "收藏成功" : "取消成功", duration: 1000, icon: "success" }) }
效果
15.音乐播放功能
在posts-data.js里面给每篇文章添加一个music属性
music: { url: "http://music.163.com/song/media/outer/url?id=108242.mp3", title: "她说-林俊杰", coverimg: "http://y.gtimg.cn/music/photo_new/t002r150x150m000001tec6v0kjpvc.jpg?max_age=2592000" }
post-detail.wxml
- 没播放音乐就显示文章图片,播放音乐就显示音乐歌手图片
- 绑定事件,添加播放和暂停音乐以及图片切换功能
<!-- <image class="head-image" src="{{postdata.headimgsrc}}"></image> --> <image class='head-image' src="{{isplayingmusic?postdata.music.coverimg:postdata.headimgsrc}}"></image> <image catchtap='onmusictap' class='audio' src="{{isplayingmusic? '/images/music/music-stop.png': '/images/music/music-start.png'}}"></image>
post-detail.js
// 播放音乐 onmusictap: function (ev) { 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 }) } }
16.监听音乐播放事件
post-detail.js的onload函数里面添加监听事件
var that = this; wx.onbackgroundaudioplay(function(){ that.setdata({ isplayingmusic: true }) }); wx.onbackgroundaudiopause(function () { that.setdata({ isplayingmusic: false }) }); },
绑定监听事件后,播放按钮的状态就可以同步切换了
17.完善音乐播放功能
在文章详情页,点击播放音乐后,然后返回到文章列表页,再进到详情页,发现播放按钮是暂停状态,这是因为应用程序存在生命周期,下面就解决这个问题。
app.js绑定一个全局的变量(音乐播放状态)
app({ globaldata: { g_isplayingmusic: false, g_currentmusicpostid: null, }, })
post-detail.js
var app = getapp(); page({ data: { isplayingmusic: false }, onload: function(options) { . . . if (app.globaldata.g_isplayingmusic && app.globaldata.g_currentmusicpostid === postid) { this.setdata({ isplayingmusic: true }) } this.setmusicmonitor() }, setmusicmonitor:function(){ var that = this; wx.onbackgroundaudioplay(function () { that.setdata({ isplayingmusic: true }) app.globaldata.g_currentmusicpostid = that.data.currentpostid app.globaldata.g_isplayingmusic = true }); wx.onbackgroundaudiopause(function () { that.setdata({ isplayingmusic: false }) app.globaldata.g_currentmusicpostid = null app.globaldata.g_isplayingmusic = false }); },
18.轮播图跳转到文章详情
post.wxml
<swiper catchtap='onswipertap' indicator-dots='true' autoplay='true' interval='2000'>
post.js
onswipertap(event) { var postid = event.target.dataset.postid wx.navigateto({ url: 'post-detail/post-detail?id=' + postid }) },
下一篇: 企业实战|Mysql不停机维护主从同步