微信开发文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
H5不支持点击页面内按钮直接唤起分享面板,可以显示一个引导图,引导用户使用右上角的分享功能。
实现步骤:
- 绑定域名,先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,即后端接口的域名。
- 引入微信官方的JS-SDK文件:
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
; - 请求后端接口:前端需要将
encodeURIComponent(location.href.split('#')[0])
作为参数传给后端(后端需要用到它来获取签名),获取配置所需要的参数:appid、timestamp、noncestr和signature; - 通过config接口注入权限验证配置;
- 通过ready接口处理成功验证;
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
handleShare(){
this.$api.adopt
.getShareParams({
url:encodeURIComponent(location.href.split('#')[0])
})
.then(res => {
wx.config({
debug: false,// 是否开启调试模式
appId: res.appId,//appid
timestamp: res.timestamp,// 时间戳
nonceStr: res.nonceStr,// 随机字符串
signature: res.signature,// 签名
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareQZone',
]// 需要使用的JS接口列表
})
let shareData = {
title: '这是自定义的分享的标题', // 分享标题
desc: '这是自定义的分享的描述', // 分享描述
link: location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: ‘这是自定义的分享的图标’, // 分享图标
success: function () {},//分享成功的回调函数
cancel:function(){}//分享失败的回调函数
}
//所有接口调用都必须在config接口获得结果之后。
//config信息验证后会执行ready方法。
//config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.ready(function(){
wx.onMenuShareAppMessage(shareData); // 微信好友
wx.onMenuShareTimeline(shareData); // 微信朋友圈
wx.onMenuShareQQ(shareData); // QQ
wx.onMenuShareQZone(shareData) // QQ空间
});
})
.catch(err => {})
}
报错问题:
invalid signature签名错误:
- 确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
- 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
- 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
- 确保一定缓存access_token和jsapi_ticket。
- 确认url是页面完整的url,包括’http(s)😕/‘部分,以及’?‘后面的GET参数部分,但不包括’#‘hash后面的部分。可以在当前页面alert(location.href.split(’#’)[0])确认。
- 确保获取用来签名的url是动态获取的。在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。