微信JS-SDK

前端需要实现一个功能，如录音，拍照，分享，地理位置等，前端想要实现这些功能的调用，必须要通过调用JS-SDK的方式来实现，那么如何使用呢，本文进行简单的介绍

1.前期准备

因为是第一次开发，看了很多文档，包括官方文档，看了很多遍，仍然是一头雾水，那些东西该前端配，哪些东西该后端做，没有一点概念。经过了一番与后端的尝试与合作，终于调用成功！
企业微信里有个应用与小程序，里面的自建应用开发同公众号开发，后端设置略微有些不同

后端：根据企业微信里我的企业选项最下面的企业id和应用与小程序里的自建应用的Secret获取token，并计算签名等一系列操作，具体官方文档网上都很详细，这里就不多说；
配置
需要在企业微信的自建程序里设置域名：此域名为前端写代码的外网网页域名，也就是最后呈现的网页域名（前端写完代码给后端，后端根据项目地址我的是gitLab配置外网域名），第一次配置需要启动，所以要和后端配合好，启动时有一个txt文件，前端需要打包给后端，后端配置到根目录并确保可以访问到txt文件

说明：此域名的配置是必要的，只有配置此域名才可以使用此域名调用JS-SDK，可以使用微信开发者工具的公众号开发选项进行在线调试域名，注意：只可以调试你打包到线上的外网ip

前端代码撰写

安装并在组建里引入wx

import wx from 'weixin-js-sdk';
const _this = wx;

要想在一个组件使用在当前组件引入就行，引入完成就是使用，在页面调用接口之前必须完成注册等逻辑，因为录音功能是手动触发执行，所以在vue中可以写个函数在mounted钩子函数中执行完成注册，代码如下：

methods: {getConfig() {const self=this;const data=self.qs.stringify({url: location.href.split('#')[0]});//需要传的地址为#前面的地址self.axios({method: 'post',url: '',//获取签名等信息的地址headers: {'Content-Type': 'application/json'},data:data  //向服务端提供授权url参数，并且不需要#后面的部分}).then((res) => {let list = res.data.data;_this.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: list.appId, // 必填，公众号的唯一标识timestamp: list.timestamp, // 必填，生成签名的时间戳nonceStr: list.noncestr, // 必填，生成签名的随机串signature: list.signature, // 必填，签名jsApiList: ['startRecord', //开始录音接口'stopRecord',// 停止录音接口'playVoice', //播放语音接口'pauseVoice',//暂停播放接口'stopVoice', //停止播放接口'uploadVoice',//上传语音接口'downloadVoice', //下载语音接口'onVoicePlayEnd', // 监听语音播放完毕api'translateVoice'] // 必填，需要使用的JS接口列表});_this.ready(() => {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个// 客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调// 用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。})_this.error((res) => {// 这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。})}).catch((error) => {// error})},// 开始录音start(e) {let that = this;that.stop();that.time = 0;if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){_this.startRecord({success: function () {that.timer = setInterval(() => {that.time++}, 1000)that.vicoeEnd()},fail: function () {// 开始录音失败},cancel: function () {// 用户拒绝授权录音}})}},// 停止录音stop() {let that = this_this.stopRecord({success: function (res) {if(that.time<0.5){return}// 暂停成功clearInterval(that.timer)that.localId = res.localId},fail: function (error) {// 停止失败}})},//取消录音判断isCancel(e) {this.cancel()},// 取消录音cancel() {_this.stopRecord({success: (res) => {// 取消录音成功},fail:function (error) {// 取消录音失败}})},// 60秒监听vicoeEnd() {let that = this_this.onVoiceRecordEnd({// 录音时间超过一分钟没有停止的时候会执行 complete 回调complete: function (res) {// 60秒停止录音that.localId = res.localIdclearInterval(that.timer);}})},// 合并merge() {let that = thisthis.axios({method: 'post',url: '',headers: {'Content-Type': 'application/json'},data: {url: location.href.split('#')[0]}}).then((ser) => {that.$refs.allRecord.src = ser.data}).catch((error) => {// error})},// 结束录音并识别语音translate () {const that = this;_this.stopRecord({success: function (res) {// 翻译前停止录音that.localId = res.localId;_this.translateVoice({localId: that.localId,complete: function (res) {// 调用翻译完成时}});},fail: function (res) {// 调用停止失败}});},// 上传语音upVoice() {let that = this_this.uploadVoice({localId: that.localId, // 需要上传的音频的本地ID，由stopRecord接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var apiUrl = window.location.href// 上传成功that.serverId = res.serverId // 返回音频的服务器端IDthat.axios({method: 'post',url: 'http://my.service.com/index.php/opcode/6002',headers: {'Content-Type': 'application/json'},data: {serverId: res.serverId,url: location.href.split('#')[0]}}).then((data) => {that.$refs.player.src = data.data}).catch((error) => {// error})}})}// 下载语音// downVoice () {//   let that = this//   _this.downloadVoice({//     serverId: that.serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得//     isShowProgressTips: 1, // 默认为1，显示进度提示//     success: function (res) {//       // 下载成功//       that.downLoadId = res.localId // 返回音频的本地ID//     }//   })// },// 模拟上传语音// fake () {//   var apiUrl = window.location.href//   this.axios({//     method: 'post',//     url: 'api',//     headers: {'Content-Type': 'application/json'},//     data: {//       serverId: '',//       url: apiUrl//     }//   }).then((res) => {//       this.$refs.player.src = res.data//     }).catch((error) => {//       // error//     })// }},

这里样式代码根据需要进行编写就行，哪个按钮需要调用录音开始，哪个按钮调用录音结束，哪个需要翻译，需要用到哪个功能，直接调用methods里面的对应方法即可，（如果调用其它JS-SDK，原理等同，注册时给jsApiList数组添加你需要的功能字段微信公众号API文档可查就可以引用了），需要对应方法执行成功后做的事情在对应方法里写就ok啦

是不是很简单呢，代码撰写完毕就是打包代码提交代码了，后台更新代码到线上，就可以看到效果了。注意：由于微信开发者工具是模拟调试，所以只能有一条模拟的录音结果返回，真正的语音及翻译结果还得发送网址到微信里打开查看

好了，微信JS-SDK接口调用就介绍到这里了，新手初写，希望能帮助到大家，也请大家多多指导

前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）相关推荐

闲云旅游网03（基于vue+element ui）登录注册功能开发
登录功能项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局新建了登录的表单绑定了数据到data rules表单的验证提交数 ...
vue实现网页端企业微信扫码登录功能（前端部分）
时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理.在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求 ...
完整企业官网源码，前端基于Vue+ElementUI，后台基于基于core3 webapi，含数据库文件，含详情安装部署文档
完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档完整代码下载地址:完整企业官网源码某工程管理有限公司企业官网前端新版 ...
微信JS SDK开放，前端开发者“鸡冻”了！
HTML5又一次逆袭了,其实之前微信也是有一些JS API的,比如分享.但这次一股脑开放了拍摄.录音.语音识别.二维码.地图.支付.分享.卡券等几十个API,这条消息不需宣传,瞬间就占满了HTML5从 ...
基于Vue的微信公众号开发及选型研究
目录 1.背景介绍 1.1微信公众号简介 1.2Vue框架简介 1.3组件库简介 2.开发流程 2.1申请微信公众号 2.2申请微信测试号及配置 2.3安装微信开发者工具 2.4创建Vue项目 2.5 ...
vue 回车查询按钮_前后端分离商城，前端基于Vue后端nodejs包含小程序源码免费分享...
先转发,然后加关注,私信"购物"即可获取源码下载链接项目简介本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现 ...
关于使用开发企业内部应用需要前端调起企业微信JS-SDK的一些坑
关于使用开发企业内部应用需要前端调起企业微信JS-SDK的一些坑记录日期:2022-12-22版(仅代表我在此时间开发的碰到的坑) 首先,不会还有人没有企业微信超级管理员权限吧? 关于开发挂载在企业 ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
实战微信JS SDK开发：贺卡制作与播放（1)
前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）

前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）

微信JS-SDK

1.前期准备

前端代码撰写

前端基于vue企业微信JS-SDK语音识别功能开发（同公众号）相关推荐

最新文章

热门文章