Vue使用微信录音并上传服务端

本文介绍了在Vue应用中如何使用微信录音功能,避免处理H5录音的兼容性问题。主要内容包括配置微信权限获取JSSDK,实现录音、停止、播放及上传录音到服务端的步骤。此外,还提到了服务端如何下载并处理微信录音文件。
摘要由CSDN通过智能技术生成

在微信公众号或者微信h5的网页开发中,会用到录音等功能,在微信里面使用微信录音会比较好一点,不用去设置ios和android的h5录音兼容性,并且h5的其他录音js文件可能不兼容微信浏览器等,所以vue中集成微信录音功能即可

一、配置微信权限获取jssdk

微信jssdk的配置,也可以参考官方开发文档

  1. 配置安全域名(参考官方文档)

  2. 引入微信的js文件,vue中可以直接npm安装也可以
    npm install weixin-js-sdk --save

    并在main.js中引入js:
    import wx from 'weixin-js-sdk'

    并且将wx绑定到vue原型上,那么其他的所有组件都可以使用:
    Vue.prototype.$wx = wx

  3. 通过config接口注入权限验证配置

    在main.js中配置微信权限接口

    wx.config({
         
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名,见附录1
        // 必填,需要使用的JS接口列表,所有JS接口列表见官方js接口
        // 这里配置录音所需要的接口权限
        jsApiList: [
        	'startRecord',
            'stopRecord',
            'onVoiceRecordEnd'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值