微信分享(JSSDK使用)
1、绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2、引入JS文件
在需要调用JS接口的页面引入如下JS文件,
(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
3、config接口注入权限验证配置参数说明
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
4、配置参数获取或生成及相关注意点
* 1、使用APPID和APPSecret获取access_token;
参数:
appId: 第三方用户唯一凭证
secret: 第三方用户唯一凭证密钥
微信提供的接口:
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appId&secret=secret
* 2、使用access_token获取jsapi_ticket ;
参数:
access_token: 使用APPID和APPSecret获取的access_token
微信提供的接口:
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=access_token&type=jsapi
* 3、用时间戳、随机数、jsapi_ticket和要访问的url按照签名算法拼接字符串;
时间戳:获取当前时间(Math.floor(Date.now()/1000) //精确到秒)
随机数:生成签名的随机串(长度参考微信JS-SDK说明文档)
jsapi_ticket:使用access_token获取的jsapi_ticket
url(当前域名需是JS接口安全域名):当前网页的URL,不包含#及其后面部分
拼接字符串(字段顺序固定):'jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url
*4、对第三步的字符串进行SHA1加密,得到签名。
5、根据所获取和生成的参数设置 config接口注入权限验证配参数。
通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
6、config注入权限验证配参数成功,在成功回调方法调用微信提供的分享相关接口。
例如获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
title: '', // 分享标题
link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
7、通过ready接口处理成功验证以及通过error接口处理失败验证
通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
8、注意事项:
1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
2、项目启动端口必须为80端口。
3、签名用的url必须是调用JS接口页面的完整URL,当前域名需是JS接口安全域名。
4、出于安全考虑,开发者必须在服务器端实现签名的逻辑。
5、微信分享的url 如果包含符号%,将无法分享。