微信小程序 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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
Vue实现购物车功能
Apr 27 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
解决VUE双向绑定失效的问题
Oct 29 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
google地图的路线实现代码
2009/08/20 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python机器学习之决策树分类详解
2017/12/20 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
python爬取天气数据的实例详解
2020/11/20 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
《伯牙绝弦》教学反思
2014/03/02 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
期中考试反思800字
2014/05/01 职场文书
教研处工作方案
2014/05/26 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis
MySQL数据库完全卸载的方法
2022/03/03 MySQL