这段时间有个工作,是要在微信浏览器上实现自定义分享功能,找了一圈,最后决定使用微信JSSDK的‘分享接口’来开发,也是着实踩了下坑啊,分享一下
微信JSSDK介绍
官方文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
因为微信公众号的开通对于大部分开发人员来说还是一个稍高的门槛,所以,微信搞了一个微信测试号,开发人员使用微信扫一下就可以获取。测试号貌似是全接口调用的哦!不用担心没有权限调用。
申请入口:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
在配置时,需要注意几点
-
接口配置信息中,要配合系统后台获取jsapi_ticket*
-
配置JS接口安全域名时,注意是 域名 不需要填写http/https,如果填写的话,在代码执行wx.config()时,会报 config:fail,Error: invalid url domain 错误,正确示例:www.whongbin.cn*
微信JSSDK使用
1.在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
jssdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了,这里也提供下
2.jssdk的下载地址http://demo.open.weixin.qq.com/jssdk/sample.zip,SDK中有demo。
注意事项
签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑,开发者必须在服务器端实现签名的逻辑。
微信开放文档 | 概述
微信JS接口签名效验工具
wx.config({
debug: true,
appId: '',
timestamp: ,
nonceStr: '',
signature: '',
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareQZone"]
});
这里需要注意的地方debug在上线后要改为false,jsApiList里要填你要使用的接口,不然没有作用
注意
签名算法
noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
对string1进行sha1签名,得到signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
invalid signature签名错误。建议按如下顺序检查:
确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
页面工具进行校验。
确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr,
timestamp一致。
确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。
确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
确保一定缓存access_token和jsapi_ticket。
确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
var link = location.href.split('#')[0];
这里link一定要location.href.split(’#’)[0];取当前的动态地址包括’http(s)?/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。 否者第二次分享会导致地址发生变化而报错
var imgUrl = ''
wx.onMenuShareTimeline({
title: '这是一个自定义的标题!',
link: link,
imgUrl: imgUrl,
trigger: function (res) {
},
success: function (res) {
},
cancel: function (res) {
},
fail: function (res) {
}
});
wx.onMenuShareAppMessage({
title: '这是一个自定义的标题!',
desc: '这是一个自定义的描述!',
link: link,
imgUrl: imgUrl,
type: 'link',
dataUrl: '',
success: function () {
},
cancel: function () {
}
});
wx.error(function (res) {
alert(res.errMsg);
});
wx.error(function(res){
console.log(res)
});
const url = location.href.split('#')[0];
注意
确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
服务器每次生成ticket需要给当前的url
axios({
method: 'post',
url: config + '/ticket',
data: {
url: url
}
}).then(function (response) {
console.log(response)
let data = response.data.data.ticket;
})
.catch(function (error) {
console.log(error);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)