微信小程序 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程序来实现动画功能
Mar 06 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
微信小程序实现点击效果
Jun 21 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实现的在线人员函数库
2008/04/09 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
复习Python中的字符串知识点
2015/04/14 Python
浅谈python类属性的访问、设置和删除方法
2016/07/25 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python3 修改默认环境的方法
2019/02/16 Python
python异步存储数据详解
2019/03/19 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
工作交流会欢迎词
2014/01/12 职场文书
新任教师自我鉴定
2014/02/24 职场文书
大学生工作求职信
2014/06/23 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
海底两万里读书笔记
2015/06/26 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers