## 定义变量，并引入本地数据 ## tips： **[const，var与let的区别](https://www.kancloud.cn/book/lixianshengdezhanghao/wxxx/preview/le.md)** ``` //index.js //获取应用实例 const local = require("../../../data/local"); const audio = wx.getBackgroundAudioManager(); ``` ## 下面代码为数据处理，以及事件。 ``` Page({ data: { isPlay: false, //定义isPlay的初始状态为false collected:false,//同上，下也同上 shared:false }, onLoad: function (options) { var self = this; //将this指向整个页面 console.log(self) var data = local.postList[options.id]; //拿数据 // console.log(data); this.setData({ data, //渲染数据 music: local.postList[options.id].music //渲染音乐数据 }); ``` ## 音乐播放状态监听 ``` /* 音乐播放函数--监听页面中音乐状态是否为播放,播放就改变isPlay为true */ playSong.onPlay(() => { self.setData({ isPlay: true }) }); /* 音乐暂停函数--监听页面中音乐状态是否为暂停,暂停就改变isPlay为false */ playSong.onPause(() => { self.setData({ isPlay: false }) }); /* 音乐停止函数--监听页面中音乐状态是否为停止,停止就改变isPlay为false */ playSong.onStop(() => { self.setData({ isPlay: false }) }); ``` ## 点击播放 ``` /* 点击播放或者停止事件 */ playMusic() { var self = this; var url = this.data.music.url;//使用this，指明当前页面的整个数据data var title = this.data.music.title; var coverImg = this.data.music.coverImg; /*执行播放音乐函数时，如果isPlay值为true即正在播放，则执行playSong.pause()停止播放，更改相关参数值*/ if (this.data.isPlay) { playSong.stop(); this.setData({ isPlay: false }); } //如果沒有播放则更改isPlay的状态则音乐就会播放，然后找到该音乐的地址，title，以及切换音乐背景图片 else { playSong.src = url, playSong.title = self.data.music.title, playSong.coverImg = self.data.music.coverImg, // console.log(title); this.setData({ isPlay: true }); } }, ``` ## 利用缓存对页面收藏按钮进行配置 ``` onCollect(){ /* 更新缓存 */ var allCollected = wx.getStorageSync('allCollected');//取缓存 var storageCollected = allCollected[this.data.postId];//取id storageCollected = !storageCollected;//取反 allCollected[this.data.postId] = storageCollected;//添加id wx.setStorageSync('allCollected', allCollected);//通知计算机存入缓存 /* 更新收藏的状态 */ this.setData({//渲染 collected:storageCollected }) }, ``` ## 交互·小程序 ``` onShare(){ wx.showActionSheet({ itemList:["分享到微信","分享到微博","分享到朋友圈"], itemColor:'#808080', success: (res)=> { console.log(res.tapIndex); this.setData({ shared:true }) }, fail:err=>{ this.setData({ shared:false }) } }) } }) ```