WeChat 文章评论页（三）
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
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
发表评论 (审核通过后显示评论)：