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

最新推荐文章于 2024-08-09 14:20:22 发布

唐宋xy

最新推荐文章于 2024-08-09 14:20:22 发布

阅读量2.4k

点赞数

分类专栏： Vue 文章标签： vue微信录音微信录音 h5录音

本文链接：https://blog.csdn.net/weixin_42054155/article/details/102771748

版权

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

摘要由CSDN通过智能技术生成

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

一、配置微信权限获取jssdk

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

配置安全域名（参考官方文档）
引入微信的js文件，vue中可以直接npm安装也可以
npm install weixin-js-sdk --save

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

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

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

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

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