欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实战–集阅读与电影于一体的小程序项目(三)

程序员文章站 2022-06-04 18:57:16
14.wx.showToast交互反馈 "wx.showToast文档" post detail.js添加个消息提示框 效果 15.音乐播放功能 "音乐播放API文档" 在posts data.js里面给每篇文章添加一个music属性 post detail.wxml 没播放音乐就显示文章图片,播放 ......

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
    })
  },