微信小程序-數據存儲與監聽

1.主要代碼

detail.wxml文件

<view class='detailContainer'>
  <image class='headImg' src='{{isMusicPlay?detailObj.music.coverImgUrl:detailObj.detail_img}}'></image>
  <image class='musicImg' catchtap='handleMusicPlay' src='{{isMusicPlay?"/images/music/music-start.png":"/images/music/music-stop.png"}}'></image>
  <view class='avatar_date'>
    <image src='{{detailObj.avatar}}'></image>
    <text>{{detailObj.author}}</text>
    <text>發布於</text>
    <text>{{detailObj.date}}</text>
  </view>
  <text class='company'>{{detailObj.title}}</text>
  <view class='collection_share_container'>
    <view class='collection_share'>
      <image wx:if='{{!isCollected}}' catchtap='handleCollection' src='/images/icon/collection-anti.png'></image>
      <image wx:if='{{isCollected}}' catchtap='handleCollection' src='/images/icon/collection.png'></image>
      <image catchtap='handleShare' src='/images/icon/share.png'></image>
    </view>
    <view class='line'></view>
  </view>
  <button open-type='share'>轉發此文章</button>
  <text class='content'>{{detailObj.detail_content}}</text>
</view>

detail.js文件

該文件實現主要實現3個功能：收藏，轉發，音頻播放。

（1）收藏功能：采用將收藏與否的信息存儲到Storage中，以避免下次進入的時候或者刷新該信息丟失，由於有多個列表項，所以每次存入的都是一個對象，鍵值對分別為其對應的下標和是否收藏。同時還考慮到如果用戶是第一次收藏，isCollected不一定為對象，所以需要初始化存入一個空對象，下次在進入該頁面時，首先讀取Storage中的收藏信息判斷是否之前收藏過。wx.getStorage用於從本地緩存中異步獲取收藏的內容，wx.setStorage將數據存儲在本地緩存中中。會覆蓋掉原來對應的內容，用於更新。還有wx.getStorageSync與wx.setStorageSync，這兩者為同步版本，用於一開始加載頁面時就讀取或設置Storage。

（2）轉發功能：使用wx.showActionSheet顯示操作菜單

（3）音頻播放：采用wx.getBackgroundAudioManager獲取全局唯一的背景音頻管理器，BackgroundAudioManager.play()和BackgroundAudioManager.pause()用於播放和暫停音樂。同時在點擊圖像界面時也需要控制音樂的播放和暫停。采用監聽的方法：BackgroundAudioManager.onPlay(function callback)與BackgroundAudioManager.onPause(function callback)用於監聽背景音樂的播放與否。為了保證離開此界面后再返回該界面仍具有上一次的記錄，需要全局記錄該變量（在app.js文件中添加相關的全局變量，便於后續讀取）。

// pages/detail/detail.js
let datas = require('../../datas/list-data.js');
let bgMusic = wx.getBackgroundAudioManager();
let appDatas = getApp();

Page({

  //頁面的初始數據
  data: {
    detailObj: {},
    id: null,
    isCollected: false,
    isMusicPlay: false,
  },

  //生命周期函數--監聽頁面加載
  onLoad: function (options) {
    console.log(options)
    let id = options.id;    //獲取參數值
    this.setData({
      detailObj: datas.list_data[id],
      id: id
    })

    //根據本地緩存的數據判斷用戶是否收藏當前的文章
    let detailStorage = wx.getStorageSync('isCollected');
    if(!detailStorage){  //如果用戶第一次收藏，isCollected不一定為對象，所以需要初始化
      //在緩存中初始化空對象
      wx.setStorageSync('isCollected', {})
    }
    if(detailStorage[id]){  //若緩存為true，則動態設置isCollected為true
      this.setData({
        isCollected: true
      })
    }

    //判斷音樂是否在播放(防止點擊播放后back后再回來不是播放狀態，希望保留上一次的狀態)
    if(appDatas.globalData.isPlay && appDatas.globalData.pageId===id){
      this.setData({
        isMusicPlay: true
      })
    }
    //監聽音樂播放
    bgMusic.onPlay(()=>{
      console.log("音樂播放")
      //修改isMusicPlay狀態值
      this.setData({
        isMusicPlay: true
      })
      //修改appDatas中的數據(為了保留上一次離開的狀態)
      appDatas.globalData.isPlay = true
      appDatas.globalData.pageId = id
    })

    //監聽音樂暫停
    bgMusic.onPause(()=>{
      console.log("音樂暫停");
      //修改isMusicPlay狀態值
      this.setData({
        isMusicPlay: false
      })
      appDatas.globalData.isPlay = false
    })
  },

  //處理點擊收藏與否
  handleCollection(){
    let isCollected = !this.data.isCollected;
    console.log(isCollected)
    //更新狀態
    this.setData({
      isCollected
    })
    //提示用戶
    let title = isCollected?"收藏成功":"取消收藏"
    wx.showToast({
      title,
      icon: 'success'
    })
    //緩存數據到本地
    //let obj = {}  不可行，會覆蓋之前的狀態
    let id = this.data.id  
    wx.getStorage({
      key: 'isCollected',
      success: (datas)=>{
        let obj = datas.data;      
        obj[id] = isCollected;  //設置對應項的狀態
        wx.setStorage({
          key: 'isCollected',
          data: obj,
          success: ()=>{
            console.log('緩存成功')
          }
        })
      }
    })
  },
  
  //處理音樂播放
  handleMusicPlay(){
    let {dataUrl, title} = this.data.detailObj.music;
    let isMusicPlay = !this.data.isMusicPlay;
    this.setData({
      isMusicPlay
    });
    
    //控制音樂播放
    if(isMusicPlay){
      //音樂播放
      bgMusic.title = title,
      bgMusic.src = dataUrl
      bgMusic.play()
    }else{
      //音樂暫停
      bgMusic.pause()
    }
  },

  //處理點擊分享功能
  handleShare(){
    wx.showActionSheet({
      itemList: ['分享到朋友圈', '分享到QQ', '分享到微博']
    })
  },
})

 3.