微信小程序 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重建星际争霸
Dec 22 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
js与applet相互调用的方法
Jun 22 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 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关联数组的10个操作技巧
2013/01/21 PHP
php数组去重的函数代码
2013/02/03 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
jquery点击切换背景色的简单实例
2016/08/25 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
Javascript中的getter和setter初识
2017/08/17 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue element upload实现图片本地预览
2019/08/20 Javascript
javascript实现评分功能
2020/06/24 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python pycharm的安装及其使用
2019/10/11 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
CAD制图人员的自荐信
2014/02/07 职场文书
任命书格式
2014/06/05 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL