14.wx.showToast交互反馈

效果

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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{postData.headImgSrc}}"></image> -->
  <image class='head-image' class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
  <image catchtap='onMusicTap' class='audio' class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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
    })
  },

作者：zhang_derek

出处：http://www.cnblogs.com/derek1184405959/