WeChat 文章评论页（三）

2020-03-09 本文已影响0人 Nian糕

Unsplash

本次的系列博文的知识点讲解和代码，主要是来自于七月老师的书籍《微信小程序开发：入门与实践》，由个人总结并编写，关于更多微信小程序开发中的各项技能，以及常见问题的解决方案，还请大家购买书籍进行学习实践，该系列博文的发布已得到七月老师的授权许可

授权许可

0 系列文章目录

01 WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
 02 WeChat 文章列表页面（一）
03 WeChat 文章列表页面（二）
04 WeChat 模块、模板与缓存
 05 WeChat 文章详情页
 06 WeChat 文章评论页（一）
07 WeChat 文章评论页（二）
08 WeChat 文章评论页（三）

1 实现发送语音功能

我们之前已经实现了文字和图片评论功能，接下来实现的语音发送功能，建议大家在真机上运行小程序进行调试，我们在之前的 wxml 文件中已经注册了 recordStart 和 recordEnd 事件函数，按住录音按钮之后会执行 recordStart 函数，并通过绑定变量 recodingClass 来改变录音按钮的样式，随后调用 wx.startRecord 录音 API，如果录音成功就执行 success 方法，录音失败则执行 fail 方法，无论录音成功还是失败，都将执行 compelte 方法，结束录音我们调用了 wx.stopRecord 方法，若是不调用该方法，那么录音开始 1 分钟后自动结束录音，这种情况大家可自行实践

// pages/post/post-comment/post-comment.js
//开始录音
recordStart: function () {
  let that = this;
  this.setData({
    recodingClass: 'recoding'
  })
  this.startTime = new Date();
  wx.startRecord({
    success: function (res) {
      console.log('success');
      let diff = (that.endTime - that.startTime) / 1000
      diff = Math.ceil(diff)
      //发送录音
      that.submitVoiceComment({ url: res.tempFilePath, timeLen: diff })
    },
    fail: function (res) {
      console.log('fail')
      console.log(res)
    },
    complete: function (res) {
      console.log('complete')
      console.log(res)
    }
  })
},
//结束录音
recordEnd: function () {
  this.setData({
    recodingClass: ''
  });
  this.endTime = new Date()
  wx.stopRecord()
},
//提交录音 
submitVoiceComment: function (audio) {
  let newData = {
    username: "青石",
    avatar: "/images/avatar/avatar-3.png",
    create_time: new Date().getTime() / 1000,
    content: {
      txt: '',
      img: [],
      audio: audio
    },
  }
  //保存新评论到缓存数据库中
  this.dbPost.newComment(newData)
  //显示操作结果
  this.showCommitSuccessToast()
  //重新渲染并绑定所有评论
  this.bindCommentData()
}

2 实现语音暂停播放功能

语音的播放需要满足以下几个播放场景，假设有两条语音—— A 语音和 B 语音，当点击 A 语音时：如果 A 语音处于未播放状态，就开始播放 A 语音；如果 A 语音处于暂停状态，就继续播放 A 语音。当点击 B 语音时：B 语音的行为同上述的 A 语音；无论 A 语音处于何种状态，都能立刻被中断，被中断后，再次点击 A 语音，A 语音将重新开始播放

小程序提供了 wx.playVoice 方法用于播放语音，wx.pauseVoice 方法用于暂停语音播放，wx.stopVoice 方法用于停止语音播放，如果我们调用 wx.pauseVoice 方法暂停语音播放，那么再次调用 wx.playVoice 方法播放同一个文件时，就会从暂停处开始播放；如果想要从头开始播放，需要先调用 wx.stopVoice 方法

wx.playVoice 方法自身会记录上一次播放语音的 url，当我们播放 B 语音时，该方法会自行对比两次播放的 url，如果两次播放的 url 相同，且第一次播放的语音被暂停了，就将继续上一次语音的播放；如果第二次播放的语音和第一次不同，就直接播放新语音

// pages/post/post-comment/post-comment.js
import { DBPost } from '../../../db/DBPost.js'

Page({
  data: {
    ...
    // 保存当前正播放语音的url
    currentAudio: ''
  },
  ...
  playAudio: function (event) {
    let url = event.currentTarget.dataset.url,
        that = this;
    //暂停当前录音
    if (url == this.data.currentAudio) {
      wx.pauseVoice();
      this.data.currentAudio = ''
    }
    //播放录音
    else {
      this.data.currentAudio = url;
      wx.playVoice({
        filePath: url,
        complete: function () {
          //只有当录音播放完后才会执行
          that.data.currentAudio = ''
          console.log('complete')
        },
        success: function () {
          console.log('success')
        },
        fail: function () {
          console.log('fail')
        }
      })
    }
  }
})

3 实现文章阅读计数功能

我们没有在这个项目中实现实时刷新，当我们刷新项目或者下次进入小程序时，文章列表的阅读数才会被更新

// pages/post/post-detail/post-detail.js
Page({
  data: {},
  onLoad: function(options) {
    ...
    this.addReadingTimes()
  },
  ...
  //阅读量+1
  addReadingTimes: function () {
    this.dbPost.addReadingTimes();
  }
})

// db/DBPost.js
//阅读数+1
addReadingTimes() {
  this.updatePostData('reading');
}

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub WeChat_08 上了，有需要的同学可自行下载

End of File

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^