微信h5分享很多细节坑且目前有一个无法解决的问题:
目前(2022年8月6日)除了以下三种情况,其他即使配置成功仍只显示链接!各位不要怀疑自己代码能力~
1.公众号菜单或者回复连接点击访问后分享
2.生成页面二维码,识别二维码后分享
3.访问页面后添加到收藏,从微信收藏中进入后分享
除了上述说的还有IOS二次分享此类头疼的问题,本文不赘述,网上资料一堆~
虽然目前来说太局限了,但还是简单从0-1介绍下一个微信H5如何配置分享
1、引入微信JS文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
vue同学可在index.html中,引入上述文件,并注册到window对象下:
<script>
window.$wx=wx
</script>
2、绑定安全域名
前往微信公众号后台;公众号设置-功能设置-JS接口安全域名
也就是说只有在你配置的安全域名下才能进行自定义分享
3、注入权限验证
window.$wx.config({
debug: true,
appId: '',
timestamp: '',
nonceStr: configParams.noncestr,
signature: '',
jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]
});
其中signature细说一下
4、其中config中的signature需要后端配合生成
1、后端 通过 https请求方式:
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
获取到access_token,关于它的刷新机制以及保存机制自行观看文档,不赘述了~
2、根据 access_token 通过请求:
GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
获取jsapi_ticket
3、同样的jsapi_ticket有着与access_token几乎一样的刷新机制,同时也有调用次数限制,所以后端想着小方法自行保存~
4、将 jsapi_ticket 返回到前端
5、根据 jsapi_ticket 生成signature
1、必备四个参数,timestamp, noncestr, jsapi_ticket, url;
其中url获取分享时所处页面的url
2、对上述四个参数进行字典序(学名:ASCII 码从小到大排序)
方法:[四个参数的键与值].sort()
3、然后通过&进行字符串拼接如:jsapi_ticket=xx&noncestr=xx .......
4、sha1加密;google一个sha1加密库或者js文件;直接:
sha1(步骤3中拼接好的字符串)
至此signature算是完成了,将其填充到步骤3中config对象中
6、到这步代表注入权限验证已经走完了,如果没报错啥的代表成功80%了~
7、通过 ready 接口处理成功验证
window.$wx.ready(function () {
//分享到朋友
window.$wx.updateAppMessageShareData({
title: "", // 分享标题
desc: "", // 分享描述
link: window.location.href,
imgUrl: "", // 分享图标
success: function (res) {
// 设置成功
console.log(res);
},
fail: err => {
console.log(err);
}
});
window.$wx.updateTimelineShareData({
title: "", // 分享标题
link: window.location.href,
imgUrl: "", // 分享图标
success: function (res) {
console.log(res);
// 设置成功
},
fail: err => {
console.log(err);
}
});
})
8、至此已经全部完成了~,至于中间可能出现的很多错误,100%都是某个细节没处理好,自行谷歌~
到这里,如果打开debug会发现提示
config:ok;
updateAppMessageShareData:ok;
updateTimelineShareData
如果没有提示或者报错,那就是有问题;
如果全都ok但是直接分享没有效果的,回到文章顶部,尝试提到的三种方法,你会发现整个人又好了起来~