微信小程序 Record API详解及实例代码


Posted in Javascript onSeptember 30, 2016

微信小程序 Record API详解及实例代码

其实这个API也挺奇葩的,录音结束后success不走,complete不走,fail也不走, 不知道是不是因为电脑测试的原因,只能等公测或者等他们完善。以后再测和补充吧!!!!

主要属性:

wx.startRecord(object)

微信小程序 Record API详解及实例代码

手动调用wx.stopRecord()停止录音

wxml

<!--用于记录时间-->
<text>{{formatRecordTime}}</text>
<button type="primary" bindtap="listenerButtonStartRecord">开始录音</button>
<button type="primary" bindtap="listenerButtonStopRecord">结束录音</button>

js

var util = require('../../../utils/util.js')
var interval
Page({
 data:{
   //录音显示类型
  formatRecordTime: '00:00:00',
  //计数
  recordTime: 0,
 },

 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 /**
  * 监听按钮点击开始录音
  */
 listenerButtonStartRecord: function() {
   that = this;
   interval = setInterval(function() {
   that.data.recordTime += 1   
   that.setData({
     //格式化时间显示
     formatRecordTime: util.formatTime(that.data.recordTime)
   })  
   }, 1000)
   wx.startRecord({
     success: function(res) {
       console.log(res)
       that.setData({
         //完成之后重新绘制
         formatRecordTime: util.formatTime(that.data.recordTime)
       })
     },
     /**
      * 完成清除定时器
      */
     complete: function() {
       clearInterval(interval)
     }
   })
 },
 /**
  * 监听手动结束录音
  */
 listenerButtonStopRecord: function() {
  wx.stopRecord();
  clearInterval(interval);
  this.setData({
    formatRecordTime: '00:00:00',
    recordTime: 0
  })
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 /**
  * 当界面关闭时停止定时器关闭录音
  */
 onUnload:function(){
  // 页面关闭
  wx.stopRecord()
  clearInterval(interval)
 }
})

感谢阅读此文,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
Jquery自定义button按钮的几种方法
Jun 11 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
微信小程序 Image API实例详解
Sep 30 #Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 #Javascript
JavaScript 链式结构序列化详解
Sep 30 #Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 #Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 #Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 #Javascript
javascript的几种写法总结
Sep 30 #Javascript
You might like
php实现单链表的实例代码
2013/03/22 PHP
phpize的深入理解
2013/06/03 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
使用python进行拆分大文件的方法
2018/12/10 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
挂牌仪式主持词
2014/03/20 职场文书
安全生产管理责任书
2014/04/16 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
廉政承诺书范文
2015/04/28 职场文书
新郎婚礼致辞
2015/07/27 职场文书
Python中的socket网络模块介绍
2022/07/23 Python