~~~ 1. 設置data中的狀態 2. 在setData中設id <image src="{{shared?'/images/icon/share.png':'/images/icon/share-anti.png'}}" class="avatar" catchtap="onShare"></image> <image src="{{collected?'/images/icon/collection.png':'/images/icon/collection-anti.png'}}" class="avatar" catchtap="onCollect"></image> ~~~ ~~~ const local = require("../../../data/local"); const audio = wx.getBackgroundAudioManager(); Page({ /** * 頁面的初始數據 */ data: { // 音樂的播放狀態 isPlay: false, collected:false, shared:false }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { var self = this; var id = options.id; var data = local.postList[options.id]; this.setData({ data, postId: id, music: local.postList[options.id].music }); /* 音樂暫停監聽 */ audio.onPause(()=>{ self.setData({ isPlay:false }) }) /* 音樂播放監聽 */ audio.onPlay(()=>{ self.setData({ isPlay:true }) }) /* 1.有緩存則取值,沒有緩存則創建緩存 */ let allCollected = wx.getStorageSync('allCollected'); if(allCollected){ let storageCollected = allCollected[id]; this.setData({ collected:storageCollected }) }else{ let allCollected = { }; allCollected[id]=false; wx.setStorageSync('allCollected', allCollected); } }, playMusic() { var self = this; var url = this.data.music.url; if(this.data.isPlay){ audio.pause(); this.setData({ isPlay:false }) }else{ audio.src = url; this.setData({ isPlay:true }) } }, onCollect(){ /* 2.更新緩存 */ var allCollected = wx.getStorageSync('allCollected'); var storageCollected = allCollected[this.data.postId]; storageCollected = !storageCollected; allCollected[this.data.postId] = storageCollected; wx.setStorageSync("allCollected", allCollected); /* 3.更新收藏的狀態 */ this.setData({ collected:storageCollected }) }, onShare(){ wx.showActionSheet({ itemList: ["分享到微信","分享到微博","分享到朋友圈"], itemColor: '#ff2d51', success:res=>{ console.log(res.tapIndex); this.setData({ shared:true }) }, fail:err=>{ this.setData({ shared:false }) } }) } }) ~~~