需求都是大同小异的,要做微信分享,当然了,微信内部浏览器右上角 ‘...’ 点击就可以分享,但是往往分享的信息是不尽人意的,因为自动获取title,不能显示description,还很有可能拿不到图片,这样的信息分享给我的话,我就默认是小广告了(手动摊手~~~)。所以自定义分享势在必行。
1.配置微信JS接口安全域名(参考微信官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 JSSDK使用步骤)
微信公众号配置JS接口安全域名,并且把ip地址加入白名单。我在测试环境中,如果不添加白名单,获取的appid直接报错为非法appid,导致接下来的步骤根本没法进行。
2.依次获取 access_token,jsapi_ticket,signature。
获取这些神奇的东西的步骤实际上是这样的:
appid & appsecret ====> access_token ====> jsapi_ticket ====> signature
①首先用appid和appsecret获取access_token,这里的appid和appsecret是公众号里可以拿到的。
②根据获取的access_token,请求路径 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 获取 jsapi_ticket 。返回值为一段JSON,参考官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 附录1-JS-SDK使用权限签名算法
③进行签名算法,signature=sha1(string1)。
签名 signature = sha1(string1)。这里的 string1 是由4部分组成,分别是
- jsapi_ticket:获取到的
- timestamp:随机时间戳
- noncestr:随机字符串
- url:要分享页面的路径,这里需要强调一下,这个url的域名,需要跟公众号JS接口安全域名一致。
string1 = jsapi_ticket=jsapi_ticket的值&noncestr=noncestr的值×tamp=timestamp的值&url=url的值。
后台算法 sha1() 加密字符串 string1 生成签名 signature 。
①②③这些步骤是后台完成,前端只需要接收后台传过来的值即可。
需要注意的是,我的业务需求是前端获取本页面路径,向后台发送页面路径,也就是组成签名算法中的 url 的值,所以看各自需求,写法不固定,但是这个值是必需的。由于后台要求,不可以全局缓存 access_token ,所以这个功能并没有做,也就是说一天请求的 access_token 的次数上限就是2000。(还真是对自己的产品没信心哦~~~)。至于路径的转义字符,路径加多个参数,参数与参数之间需要用 '&' 来连接,但是在我的项目中,直接传递 '&' ,到后台的时候会直接转义为 '&' 导致 url 与当前路径不一致,进而导致 signature 签名错误,所以我直接在前端转义成 '&', 其他的任务交给后台处理,当然这只是一个现象,这个还是要根据后台的情况而定的,我的后台是 php,不同的后台会遇到的问题也许不大相同,慢慢来喽~~
//先调用微信js
//微信分享
//只能调用微信内部浏览器右上角'...' 唤起微信分享,无法做到自定义按钮调用分享接口
var urlstr = window.location.href;
var urlPath = urlstr.replace(/&/g,'%26');
$.ajax({
url: k_host + "/WxGetSignature", //k_host 为本地路径,忽略就好,这个实际上就是把需要分享页面的 url 传给后台
data:{
url: urlPath,
},
async: true,
type: 'POST',
cache: false,
dataType: 'json',
success:function(data){
var res = data.data;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appid,
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.noncestr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: [ // 必填,需要使用的JS接口列表
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.ready(function () {
wx.onMenuShareAppMessage({
title: '测试用 title',
desc: '测试用 description',
imgUrl: '分享图标的路径', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
link: urlstr, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
success : function () {
//分享成功需要执行的函数
},
cancel: function (err) {
// console.log(err);
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareTimeline({
title: '测试用 title',
desc: '测试用 description',
imgUrl: '分享图标的路径', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
link: urlstr, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
success : function () {
//分享成功需要执行的函数
},
cancel: function (err) {
console.log(err);
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function(res){
});
},
error:function(request){
alert("连接失败,请检查网络,稍后再试");
}
});
以上是前端代码,遇到的问题基本就是 JS 接口安全域名,添加 IP 到白名单,签名算法,其他很顺利。本来打算一开始去做成点击自定义按钮调起微信分享,结果去官方社区查了以后发现,是不可行的,没有方法和接口提供给开发者, 虽然微信自己的 demo 中有这种点击按钮,调用分享,可是在真机测试中,并没有什么毛用,打debugger发现代码根本没进分享,后来就放弃,如果哪位大神有办法的话,请指点一二。
所有的调试都是在微信开发工具中完成的,不然微信的 debugger 模式是无法开启的(吐槽一下开发者工具,不是那么好用哦~~~)。
希望能帮到在微信分享坑中无法自拔的小伙伴们(哭笑不得.gif)~~~