微信小程序 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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
javascript时间差插件分享
Jul 18 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 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
SMARTY学习手记
2007/01/04 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
python自动化测试实例解析
2014/09/28 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
pandas数据拼接的实现示例
2020/04/16 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
酒店保安领班职务说明书
2014/03/04 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书