（已更新）仿QQ音乐UI微信小程序源码下载

// pages/play/play.js Page({ /** * 页面的初始数据 */ data: { mposter: '',//图片 murl: '',//地址 nposter:'',//歌曲 aposter:'',//歌手 animationData: {}, Mpercent: 0, music: null, play:true, playImg: 'play.png', dian:true, dianzan: 'heart.png', fang:true, fangImg: 'random.png', songId:0, musicId:0, musicIdd:0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) {//options就是链接过来的参数获取 //播放界面有两个来源：url传递/storage console.log(options); if(options.mp!=null){ this.setData({ mposter: options.mp, nposter: options.mn, aposter: options.ma, murl: options.mu })}else{ let that = this; var id = options.id; this.setData({ songId:id }) wx.getStorage({ key: 'songList', success: function(res) { console.log(res); that.setData({ mposter: res.data[id].pic, nposter: res.data[id].name, aposter: res.data[id].singer, musicId: res.data[id].id, musicIdd: res.data[id].id }) wx.request({ url: 'https://v1.itooi.cn/tencent/url', data: { id: that.data.musicId, isRedirect: 0 }, success: function (res) { console.log(res.data.data); var myMusic = wx.createInnerAudioContext(); that.setData({ music: myMusic }) myMusic.src = res.data.data; myMusic.autoplay = true; myMusic.play(); that.setData({ murl: res.data.data }) } }) }, }) } //创建播放背景音乐的对象：属性和方法 // var myMusic=wx.getBackgroundAudioManager(); // myMusic.src=this.data.murl; // myMusic.title='music'; //找到音乐播放的对象 var myMusic = wx.createInnerAudioContext(); this.setData({ music: myMusic }) myMusic.src = this.data.murl; myMusic.autoplay = true; myMusic.play(); //setInterval(“要执行的代码”，间隔时间) let that = this; setInterval(function () { that.clock(); }, 1000); }, opencon: function (e) { wx.navigateTo({ url: '../comment/comment?idd=' + this.data.musicIdd, }) }, playPrev:function(){ var id =--this.data.songId; let that = this; wx.getStorage({ key: 'songList', success: function (res) { that.setData({ mposter: res.data[id].pic, nposter: res.data[id].name, aposter: res.data[id].singer, musicId:res.data[id].id }) that.data.music.stop(); wx.request({ url: 'https://v1.itooi.cn/tencent/url', data: { id: that.data.musicId, isRedirect: 0 }, success: function (res) { console.log(res.data.data); var myMusic = wx.createInnerAudioContext(); that.setData({ music: myMusic, murl: res.data.data, playImg: 'pause.png' }) myMusic.src = that.data.murl; myMusic.autoplay = true; myMusic.play(); } }) }, }) }, playNext: function () { var id = ++this.data.songId; let that = this; wx.getStorage({ key: 'songList', success: function (res) { that.setData({ mposter: res.data[id].pic, nposter: res.data[id].name, aposter: res.data[id].singer, musicId: res.data[id].id }) that.data.music.stop(); wx.request({ url: 'https://v1.itooi.cn/tencent/url', data: { id: that.data.musicId, isRedirect: 0 }, success: function (res) { console.log(res.data.data); var myMusic = wx.createInnerAudioContext(); that.setData({ music: myMusic, murl: res.data.data, playImg: 'pause.png' }) myMusic.src = that.data.murl; myMusic.autoplay = true; myMusic.play(); } }) }, }) }, playOrPause: function () { if(this.data.play){ this.data.music.pause(); this.data.play= false; this.setData({ playImg:'stop.png' }) }else{ this.data.music.play(); this.data.play= true; this.setData({ playImg:'play.png' }) } }, support: function(){ if(this.data.dian){ this.data.dian=false; this.setData({ dianzan:'heart2.png' }) }else{ this.data.dian = true; this.setData({ dianzan:'heart.png' }) } }, bofang:function(){ if (this.data.fang) { this.data.fang = false; this.setData({ fangImg: 'QQ.png' }) } else { this.data.fang = true; this.setData({ fangImg: 'random.png' }) } }, clock: function () { //让进度条的值增加的事情:让Mpercent0,1,2,3,4 //每次调用clock方法，在原有值上增加Mpercent的值 //1.原有值 var count = this.data.Mpercent; //2.增加Mpercent this.setData({ Mpercent: ++count }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var animation = wx.createAnimation({ duration: 400000, timingFunction: "ease" }) animation.rotate(180 * 100).step(); this.setData({ animationData: animation.export() }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { this.data.music.destroy(); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })