微信小程序 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 相关文章推荐
JQuery this 和 $(this) 的区别
Aug 23 Javascript
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Element Input组件分析小结
Oct 11 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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/04/27 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
Vue指令指令大全
2019/02/09 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
keras中的backend.clip用法
2020/05/22 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
DELPHI面试题研发笔试试卷
2015/11/08 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
购房委托书
2014/10/15 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
bat批处理之字符串操作的实现
2022/03/16 Python