微信小程序 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 相关文章推荐
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
为vue项目自动设置请求状态的配置方法
Jun 09 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 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图片验证码制作实现分享(全)
2012/05/10 PHP
全面解析PHP操作Memcache基本函数
2016/07/14 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python统计中文字符数量的两种方法
2019/01/31 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
《黄河颂》教学反思
2014/02/07 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
安全月活动总结
2014/05/05 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
银行给客户的感谢信
2015/01/23 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android