微信小程式實戰–集閱讀與電影於一體的小程式項目（三）

14.wx.showToast交互反饋

wx.showToast文檔

post-detail.js添加個消息提示框

onCollectionTap: function(ev) {
    var postsCollected = wx.getStorageSync('posts_Collected')
    var postCollected = postsCollected[this.data.currentPostId]
    postCollected = !postCollected;
    postsCollected[this.data.currentPostId] = postCollected;
    // 更新文章是否收藏的緩存值
    wx.setStorageSync('posts_Collected', postsCollected)
    // 更新數據綁定變數，實現切換圖片
    this.setData({
      collected: postCollected
    })

    wx.showToast({
      title: postCollected ? "收藏成功" : "取消成功",
      duration: 1000,
      icon: "success"
    })
  } 

效果

15.音樂播放功能

音樂播放API文檔

在posts-data.js裡面給每篇文章添加一個music屬性

 music: {
    url: "http://music.163.com/song/media/outer/url?id=108242.mp3",
    title: "她說-林俊傑",
    coverImg: "http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"
  }

post-detail.wxml

• 沒播放音樂就顯示文章圖片，播放音樂就顯示音樂歌手圖片
• 綁定事件，添加播放和暫停音樂以及圖片切換功能

 <!-- <image class="head-image" src="{{postData.headImgSrc}}"></image> -->
  <image class='head-image' src="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
  <image catchtap='onMusicTap' class='audio' src="{{isPlayingMusic? '/images/music/music-stop.png': '/images/music/music-start.png'}}"></image>

post-detail.js

// 播放音樂
  onMusicTap: function (ev) {
    var currentPostId = this.data.currentPostId;
    var postData = postsData.postlist[currentPostId];
    var isPlayingMusic = this.data.isPlayingMusic;
    if (isPlayingMusic) {
      wx.pauseBackgroundAudio();
      this.setData({
        isPlayingMusic: false
      })
    }
    else {
      wx.playBackgroundAudio({
        dataUrl: postData.music.url,
        title: postData.music.title,
        coverImgUrl: postData.music.coverImg,
      })
      this.setData({
        isPlayingMusic: true
      })
    }
  }

16.監聽音樂播放事件

監聽音樂播放文檔

post-detail.js的onLoad函數裡面添加監聽事件

var that = this;
    wx.onBackgroundAudioPlay(function(){
      that.setData({
        isPlayingMusic: true
      })
    });
    wx.onBackgroundAudioPause(function () {
      that.setData({
        isPlayingMusic: false
      })
    });
  },

綁定監聽事件後，播放按鈕的狀態就可以同步切換了

17.完善音樂播放功能

在文章詳情頁，點擊播放音樂後，然後返回到文章列表頁，再進到詳情頁，發現播放按鈕是暫停狀態，這是因為應用程式存在生命周期，下麵就解決這個問題。

app.js綁定一個全局的變數（音樂播放狀態）

App({
  globalData: {
    g_isPlayingMusic: false,
    g_currentMusicPostId: null,
  },
})

post-detail.js

var app = getApp();

Page({

  data: {
    isPlayingMusic: false
  },

  onLoad: function(options) {
    .
    .
    .

    if (app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === postId) {
      this.setData({
        isPlayingMusic: true
      })
    }
    this.setMusicMonitor()
  },

  setMusicMonitor:function(){
    var that = this;
    wx.onBackgroundAudioPlay(function () {
      that.setData({
        isPlayingMusic: true
      })
      app.globalData.g_currentMusicPostId = that.data.currentPostId
      app.globalData.g_isPlayingMusic = true
    });
    wx.onBackgroundAudioPause(function () {
      that.setData({
        isPlayingMusic: false
      })
      app.globalData.g_currentMusicPostId = null
      app.globalData.g_isPlayingMusic = false
    });  
  },

18.輪播圖跳轉到文章詳情

post.wxml

<swiper catchtap='onSwiperTap' indicator-dots='true' autoplay='true' interval='2000'>

post.js

onSwiperTap(event) {
    var postId = event.target.dataset.postid
    wx.navigateTo({
      url: 'post-detail/post-detail?id=' + postId
    })
  },