微信小程序 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中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
node 版本切换的实现
Feb 02 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php实现的通用图片处理类
2015/03/24 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python使用xpath实现图片爬取
2020/09/16 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
业绩倒数第一的检讨书
2014/09/24 职场文书
委托函范文
2015/01/29 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
奔腾年代观后感
2015/06/09 职场文书
小学记事作文之200字
2019/08/06 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android