原计划是要做一个当用户点击录制按钮时，波纹滚动的效果，由于微信context.drawImage问题，所以暂时搁置。
这个页面要考虑到的问题：
-
需要记录开始录音的时间以及停止录音的时间来计算出录音时长。
-
在用户录音时，这个button的样式需要改变。
-
在录音过程中，我们需要动态的向用户显示时间，就像一个时钟一样。以告诉用户他录了多久的语音。
-
有三个信息需要存储，一是语音的临时地址，我们需要在finish页面播放语音，并且上传到服务器，
二是，durationTime，也就是语音的时长，单位时毫秒，这个也是需要上传到服务器的，最后一个是stringTime， 主要是为了在用户进入finish页面时，能一眼看到自己的语音有多长时间。
解决思路：
-
在 wx.startRecord 时调用New Date().getTime()来获得开始时间，在 wx.stopRecord 时调用New Date().getTime()来获得结束时间，这样就能计算录音时长 durationTime，不过这个单位时毫秒数。
-
这个就很简单了，用一下setData({})就可以实现了。
-
首先我们需要将毫秒数转化为秒，然后调用 NumberToTime 这个函数，最后我们还需要用到递归。
-
这里涉及到一个页面间通信的问题，我在这里用app的全局变量来实现。
下面看源代码，我会在源代码加上更多的注释，这样就会清晰的多
var util = require('../../utils/util.js')
var startTime , endTime;
var app = getApp();
Page({
data: {
Recording: false, //在录音还是没有，根据此状态可以改变button的样式等等
numberTime: 0, //数字时间，用于转换成字符串时间
stringTime: '00:00' //字符串时间
},
//这是为了保证用户从finish页面返回，所以需要将其初始化
onShow: function() {
this.setData({
stringTime: '00:00',
numberTime: 0,
})
},
//button的事件函数
bindTapRecord: function() {
var _this = this
if(this.data.Recording === false) {
//记录开始录音的时间
startTime = new Date().getTime()
this.setData({Recording: true})
//调用设置字符串时间的函数
this.showTime()
wx.startRecord({
success: function(res){
//记录录音的临时地址，用于下个页面的播放以及上传
app.globalData.tempfillPath = res.tempFilePath
},
fail: function(res) {
console.error('something wrong in startRecord: ', res)
}
})
}
else {
wx.stopRecord()
// 记录停止录音的时间
endTime = new Date().getTime()
// 存储录音时长，单位时毫秒
app.globalData.durationTime = endTime - startTime
// 存储录音时长，字符串格式，以用于在下个页面展示
app.globalData.stringTime = _this.data.stringTime
this.setData({ Recording: false})
// wx.navigateTo({
// url: '/pages/finish/finish',
// })
}
},
//递归函数，用于显示感觉时间在流逝
showTime: function() {
var _this = this
//每隔1秒，使numberTime加1，然后将其转换为字符串格式的时间格式，并赋值给stringTime
//这个函数需要外部data：numberTime，stringTime，not good
_this.setData({numberTime: _this.data.numberTime + 1})
_this.setData({stringTime: util.NumberToTime(this.data.numberTime)})
if(_this.data.Recording) {
setTimeout(function(){
_this.showTime()
}, 1000)
}
}
})
|
