微信小程序observer 监听globaldata 微信小程序数据监听

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.