专栏首页有趣的django微信小程序实战–集阅读与电影于一体的小程序项目(三)

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    zhang_derek
  • Django打造大型企业官网(五)

    zhang_derek
  • CRM客户关系管理系统(一) 第一章、CRM介绍和开发流程第二章、CRM项目表结构设计

    zhang_derek
  • canvas 弹球

    mySoul
  • React入门系列(四)组件的生命周期

    React的核心是组件,组件在创建和渲染的过程中,需要调用固定的钩子函数,也称为组件的“生命周期”。利用生命周期函数,可以做初始化工作,并在渲染过程中实现一些特...

    娜姐
  • React学习(五)-React中组件的数据-props

    开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用

    itclanCoder
  • vue 生成二维码(完整源码在gitee)

    完整源码已经在gitee开源,并且采用中国首个开源软件协议: “木兰宽松许可证, 第1版 ”

    yawn
  • React基础(5)-React中组件的数据-props

    开发一个React应用,更多的是在编写组件,而React组件最小的单位就是React元素,编写组件的最大的好处,就是实现代码的复用

    itclanCoder
  • react学习

    JSX是一个JavaScript的语法扩展。因为JSX在语法上更简洁JavaScript而不是HTML,所以React DOM使用cameCase来定义属性的名...

    Cloud-Cloudys
  • This关键字的一些更新的理解

    this是Javascript中一个非常重要的关键字,正确的使用this能够使我们的程序效率得到提升。之前,对于this的认识还存在一些误区,今天看了一篇文章之...

    大江小浪

扫码关注云+社区

领取腾讯云代金券