vue 微信录音倒计时_vue 公众号H5 使用微信JSAPI 录音 完整齐全
官方文檔必須首當其沖
首先H5錄音功能的話 對于普通H5網上是有很多的方法 插件? 但是兼容性很差 特別是對于ios 一開始想的是用H5 做個通用的 但是一圈下來 發現兼容性就很難受
好在項目是基于微信公眾號 放棄使用普通H5的想法 轉戰使用微信提供的 JSAPI 錄音功能 一下子解決了兼容的問題 微信已經幫忙處理完畢
接下來說一下 注意事項
在使用微信提供的錄音功能前
1.首先的是進入微信公眾號后臺 公眾號設置的功能設置?里填寫“JS接口安全域名” 一定要記得
2.先引入微信JS 簡單的
//(https://res.wx.qq.com/open/js/jweixin-1.6.0.js)
3.注冊微信配置 使用wx.config()? ?將要使用的api 填寫到jsApiList里面 要記得
注意：簽名問題 一是服務端算法問題 二是前端當前地址和請求的地址不同 也會出現簽名錯誤? 關于簽名問題 其他文章也有說明產生的原因
錄音功能 不是立即使用 所以 只需檢測是否配置環境成功即可 wx.ready()..等回調方法
.js 配置注冊微信環境代碼示例
export async functionwechatSharefund (columnInfo) {
const data= await wechatConfig(location.href.split('#')[0]) //返回的微信信息
console.log(data)if (data.code === 0) {//注冊
wx.config({
debug:false, //開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: data.data.appId, //必填，公眾號的唯一標識
timestamp: data.data.timestamp, //必填，生成簽名的時間戳
nonceStr: data.data.nonceStr, //必填，生成簽名的隨機串
signature: data.data.signature, //必填，簽名
jsApiList: ['updateAppMessageShareData','updateTimelineShareData','startRecord','stopRecord','playVoice','onVoiceRecordEnd','uploadVoice','onVoicePlayEnd','downloadVoice']//必填，需要使用的JS接口列表
})//是否成功
wx.ready(function(res) {
console.log([res,90])
wx.updateAppMessageShareData({
title:'我是自定義首頁！！！！！好友' +store.getters.doctorId,
desc:'自定義描述', //分享描述
link: 'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' +store.getters.doctorId,
imgUrl:'', //分享圖標
success: function() {//設置成功
}
})
wx.updateTimelineShareData({
title:"我是自定義首頁！！圈" +store.getters.doctorId,
link:'https://doctor.taiori.com/doctor/hospitalIndex?userParam=' +store.getters.doctorId,
imgUrl:'',
success:function() {
}
});
});//是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['startRecord'], //需要檢測的JS接口列表，所有JS接口列表見附錄2,
success: function(res) {
console.log([res,'114'])
store.commit('jsApiList', res)//以鍵值對的形式返回，可用的api值true，不可用為false
//如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
})
wx.error(function(res){
console.log(res)
})
}
在使用的地方 引入.j文件
import { wechatSharefund } from '.js'mounted () {
wechatSharefund()
}
使用簡單的
touchstart () {
console.log('開始錄音')if (this.localId) {return}
let that= thiswx.startRecord({
success:function(e){//開始錄音的代碼處理
},
cancel:function(e) {
console.log(e)
}
})
},
touchend () {
console.log('結束錄音')if (this.localId) {return}
let that= thisclearInterval(this.timer)
wx.stopRecord({
success:function(res) {//結束后的代碼處理
}
})
}
最后 會涉及到 保存錄音 及 上傳到自己服務器動作 簡單的 使用相對于的API
微信臨時素材返回的是speex文件 需要解碼成想要的播放MAP3或者wav 前端可直接播放的鏈接 解碼微信有提供方法
uploadVoice() {
let that= this
//上傳到微信為臨時素材
wx.uploadVoice({
localId:this.localId, //需要上傳的音頻的本地ID，由stopRecord接口獲得
isShowProgressTips: 1, //默認為1，顯示進度提示
success: function(res) {//獲得微信服務端音頻ID
var serverId = res.serverId; //返回音頻的服務器端ID
console.log(res)//服務端提供接口 傳遞 音頻ID 由服務端處理從微信服務端下載臨時素材 存為自己的服務器鏈接
//http請求方式: GET,https調用 https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID 請求示例(示例為通過curl命令獲取多媒體文件)
//curl -I -G "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"
//$.ajax({
//url: 'https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID', // 服務端提供的接口鏈接
//type: 'GET',
//dataType: "json",
//success: function (data) {
//alert('文件已經保存到自己的服務器');
//},
//error: function (xhr, errorType, error) {
//console.log(error);
//}
//});
}
});
}
總結
以上是生活随笔為你收集整理的vue 微信录音倒计时_vue 公众号H5 使用微信JSAPI 录音 完整齐全的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux的发行版本及不同版本的联系和区
- 下一篇： Electron + vite + vu