微信小程序入门与实战(5)——详情页的点击收藏功能和音乐点击播放暂停功能

这里使用缓存来保存文章的收藏状态，用app里面的全局变量保存音乐的播放状态

wxml页面

<!--pages/posts/post-detail/post-detail.wxml-->
<view class="container">
  <view class="head-container">
    <image class="head-image" src="{{postData.headImgSrc}}"></image>
    <image wx:if="{{isPlaying}}" bind:tap="onMusicPause" class="audio" src="/img/music/music-stop.png"></image>
    <image wx:else bind:tap="onMusicStart" class="audio" src="/img/music/music-start.png"></image>
  </view>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.date}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image wx:if="{{collect}}" bind:tap="onCollect" src="/img/icon/collection.png"></image>
      <image wx:else bind:tap="onCollect" src="/img/icon/collection-anti.png"></image>
      <image bind:tap="onshare" class="share-img" src="/img/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

wxss页面

/* pages/posts/post-detail/post-detail.wxss */

.container{
  width: 100%;
  display: flex;
  flex-direction: column;
}
.head-container{
  width: 100%;
  height: 460rpx;
  position: relative;
}
.head-image{
  width: 100%;
  height: 460rpx;
}

.audio{
  width:102rpx;
  height: 110rpx;
  position: absolute;
  top:50%;
  margin-top: -55rpx;
  left:50%;
  margin-left: -51rpx;
  opacity: 0.6;
}

.author-date{
  display: flex;
  flex-direction: row;
  margin-top: 20rpx;
  width: 100%;
  height: 64rpx;
  line-height: 64rpx;
}
.avatar{
  height: 64rpx;
  width:64rpx;
  vertical-align: middle;
  margin-left: 20rpx;
}
.author{
  font-size:30rpx;
  font-weight: 300;
  margin-left: 20rpx;
  vertical-align: middle;
  color:#666;
  
}
.const-text{
  font-size: 24rpx;
  color:#999;
  margin-left: 20rpx;
}

.date{
  font-size: 24rpx;
  margin-left: 30rpx;
  vertical-align: middle;
  color:#999;
}
.title{
  width: 100%;
  padding-left: 50rpx;
  font-size: 36rpx;
  font-weight: 700;
  margin-top: 30rpx;
  letter-spacing: 2px;
  color:#4b556c;
}
.tool{
  margin-top: 20rpx;
}
.circle-img{
  float: right;
  margin-right: 40rpx;
  vertical-align: middle;
}

.circle-img image{
  width: 90rpx;
  height: 90rpx;
}
.share-img{
  margin-left: 30rpx;
}

.horizon{
  width: 660rpx;
  height:1px;
  background-color: #e5e5e5;
  vertical-align: middle;
  position: relative;
  top:46rpx;
  margin: 0 auto;
  z-index: -99;
}

.detail{
  color:#666;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-right: 30rpx;
  line-height: 44rpx;
  letter-spacing: 2px;
}

js页面
其中，BackgroundAudioManager.onPlay(function callback)：监听背景音频播放事件
BackgroundAudioManager.onPause(function callback)：监听背景音频暂停事件
_postsCollected是object类型的变量，用来保存多个页面的收藏状态，防止页面收藏状态被覆盖掉。
因为收藏状态一般是从服务器中获取，这里退出重新进入小程序要保证收藏状态没有被清除，所以用缓存来模拟；
而音乐播放状态退出后不用保存其状态，所以用全局变量就可以了。

// pages/posts/post-detail/post-detail.js
import {postLists} from '../../../data/data.js'
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    _pid:null,
    collect:false,
    _postsCollected:{},
    isPlaying:false,
    _mgr:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log("options:",options);
    // console.log("app",app);
    var postId = options.id;
    this.data._pid=postId;
    var postData = postLists[postId];



    //利用缓存来记录collect的状态
    const postsCollected = wx.getStorageSync('posts_collected');
    // console.log("postsCollected:",postsCollected);
    if(postsCollected){
      this.data._postsCollected = postsCollected;
    }

    let collected = postsCollected[this.data._pid]

    if(collected === undefined){
      // 如果undefined 说明文章从来没有被收藏过
      collected = false
    }
    
    this.setData({
      postData,
      collected,
      isPlaying:this.currentMusicIsPlaying()
    })

    const mgr = wx.getBackgroundAudioManager();
    this.data._mgr = mgr;
    mgr.onPlay(this.onMusicStart);
    mgr.onPause(this.onMusicPause);
  },



  onCollect(events){
    const postsCollected = wx.getStorageSync('posts_collected');
    if(!postsCollected){
      postsCollected = {};
    }
    this.data.collect=!this.data.collect
    postsCollected[this.data._pid] = this.data.collect;
    console.log(postsCollected);
    this.setData({
      collect:postsCollected[this.data._pid],
    })
    wx.setStorageSync('posts_collected', postsCollected);
    wx.showToast({
      title: this.data.collect?'收藏成功':'收藏失败',
    })
  },

  async onshare(events){
    const result = await wx.showActionSheet({
      itemList: ['分享到QQ','分享到微信']
    })
    console.log(result);
  },

  currentMusicIsPlaying(){
    //使用全局变量来标记音乐的播放状态
    if(app.globalData.gIsPlayingMusic && app.globalData.gIsPlayingPostId==this.data._pid){
      return true;
    }else{
      return false;
    }
  },

  onMusicStart(events){
    console.log("musicStart!!!");
    const mgr = this.data._mgr;
    console.log(mgr);
    const music = postLists[this.data._pid].music;
    mgr.title=music.title;
    mgr.src = music.url;
    mgr.coverImgUrl = music.coverImg;

    app.globalData.gIsPlayingMusic = true;
    app.globalData.gIsPlayingPostId = this.data._pid;

    this.setData({
      isPlaying:true
    })
  },

  onMusicPause(events){
    const mgr = this.data._mgr;
    mgr.stop();

    app.globalData.gIsPlayingMusic = false;
    app.gIsPlayingPostId = -1

    this.setData({
      isPlaying:false
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    gIsPlayingMusic:false,
    gIsPlayingPostId:-1,
  }
})

app.wxss

/**app.wxss**/


text{
  font-size: 24rpx;
  color:#666;
}