欢迎光临,了解微信小程序开发,就上易用通!

晓想demo代码分析系列《三》index页面

发布:2018-02-07 11:08浏览: 来源:网络 作者:cola



原计划是要做一个当用户点击录制按钮时,波纹滚动的效果,由于微信context.drawImage问题,所以暂时搁置。

这个页面要考虑到的问题:

  1. 需要记录开始录音的时间以及停止录音的时间来计算出录音时长。

  2. 在用户录音时,这个button的样式需要改变。

  3. 在录音过程中,我们需要动态的向用户显示时间,就像一个时钟一样。以告诉用户他录了多久的语音。

  4. 有三个信息需要存储,一是语音的临时地址,我们需要在finish页面播放语音,并且上传到服务器,
    二是,durationTime,也就是语音的时长,单位时毫秒,这个也是需要上传到服务器的,最后一个是stringTime, 主要是为了在用户进入finish页面时,能一眼看到自己的语音有多长时间。

解决思路:

  1. 在 wx.startRecord 时调用New Date().getTime()来获得开始时间,在 wx.stopRecord 时调用New Date().getTime()来获得结束时间,这样就能计算录音时长 durationTime,不过这个单位时毫秒数。

  2. 这个就很简单了,用一下setData({})就可以实现了。

  3. 首先我们需要将毫秒数转化为秒,然后调用 NumberToTime 这个函数,最后我们还需要用到递归。

  4. 这里涉及到一个页面间通信的问题,我在这里用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)
    }
  }

})





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。