微信公众号h5分享踩坑记录
开发uniapp的H5应用时,有个场景是需要在公众号分享链接,需要用到微信的jssdk
官方的文档一言难尽分享一下踩坑记录和关键点
一、需要后端配合校验
如果他让你自己写,建议你俩直接决斗
js安全域名,ip白名单一定要设置
校验域名和分享返回的地址一定要相同一个符号都不能少
二、前端部分
npm install jweixin-module --save
const jweixin = require('jweixin-module');
let urlStr = '需要分享的域名'; //获取当前url为签名认证地址
let that = this;
that.$myRequest({
url:'/api/user/getconfig',
method:'POST',
data:{
url:urlStr
}
}).then(res=>{
jweixin.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: [
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareAppMessage"
]
});
that.$myRequest({
url:'/api/setting/share',
method:'POST',
data:{
}
}).then(data=>{
// console.log(data);
jweixin.ready(function() {
console.log('验证正确显示ready');
if(jweixin.updateAppMessageShareData){
console.log('updateAppMessageShareData')
jweixin.updateAppMessageShareData({
title: data.data.title, // 分享标题
desc: data.data.content, // 分享描述
link: data.data.link, // 分享链接要和分享校验的域名一样**完全一样一个符号都不要少
imgUrl: urlStr+'/uploads/attachment/' + data.data.pic, // 分享图标
success: function(a) {
// 用户确认分享后执行的回调函数
console.log('确认成功',a);
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
jweixin.updateTimelineShareData({
title: data.data.title, // 分享标题
desc: data.data.content, // 分享描述
link: data.data.link, // 分享链接要和分享校验的域名一样**完全一样一个符号都不要少
imgUrl: urlStr+'/uploads/attachment/' + data.data.pic, // 分享图标
success: function(a) {
// 用户确认分享后执行的回调函数
console.log('确认成功',a);
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
}else{
console.log('onMenuShareAppMessage');
jweixin.onMenuShareAppMessage({
title: data.data.title, // 分享标题
desc: data.data.content, // 分享描述
link: data.data.link, // 分享链接要和分享校验的域名一样**完全一样一个符号都不要少
imgUrl: urlStr+'/uploads/attachment/' + data.data.pic, // 分享图标
success: function(a) {
// 用户确认分享后执行的回调函数
console.log('确认成功',a);
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
}
})
jweixin.error(function(res1){
// config信息验证失败会执行 error 函数,如签名过期导致验证失败,具体错误信息可以打开 config 的debug模式查看,也可以在返回的 res 参数中查看,对于 SPA 可以在这里更新签名。
console.error('验证错误显示',res1);
});
})
})