微信 JSSDK使用 及 开发记录
开发描述:在页面中可以同时发布文字,音频以及图片,点击添加会弹出选择框(录音,图片) 点击录音后会跳转到另一页面 进行录音操作
在这里调用微信JS-SDK说明文档中 5 音频接口
1.安装 sdk 后在页面中引用 weixin-js-sdk
2.使用微信 js 进行授权配置
GetWxConfig({
url: url
}).then(data => {
if (!data.iserror) {
wx.config({
debug: true, // 开启调试模式,
appId: data.data.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
timestamp: data.data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.data.nonceStr, // 必填,生成签名的随机串
signature: data.data.signature,// 必填,签名,见附录1
jsApiList: ['startRecord','uploadVoice','chooseImage','uploadImage'] // 必填,使用的JS接口列表
});
}
})
3.通过ready接口处理成功验证,通常都把调用接口写在ready里面
wx.ready(function () {
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'],
sourceType: ['album','camera'],
success: function (res) {
console.log(res.localIds)
var localIds = res.localIds
var serverIds = [];
that.uploadImage(localIds,serverIds)
},
fail() {
Toast('选择图片失败!');
}
});
})
4.上传好音频后,需要传回本地数据库中返回的临时音频数据,注意:在vue项目中,如果页面需要微信授权配置,也就是获取config,使用this.$router是不生效的,需要用location.href
这里纠结了两天的问题:在页面使用 location.href 传值过程中,返回到上一页面总是报错
{errmsg:config:ok}{errmsg:config:invalid signat }> 签名错误
主要原因就是 url 错误,起初以为是不可以传参数,后来以为不可以传对象,最后排查出来是传 FilePath 字段时候报错
在location.href 传值的时候,因为数据中包含路径信息,有 ’ / ’ 字符,需要转义
location.href = '/readingCircle/publishCircle?AudioID=' + this.tapeItem.ID
+'&FileName=' + this.tapeItem.fileName
+'&FilePath=' + encodeURIComponent(this.tapeItem.filePath)
接收
created(){
if(this.$route.query.Duration){
this.tape.ID = this.$route.query.AudioID
this.tape.fileName = this.$route.query.FileName
this.tape.filePath = decodeURIComponent(this.$route.query.FilePath)
}
console.log(this.tape)
}
mounted(){
getWxConfig(location.href)
}
完美!