微信分享是项目中很常见的需求,如果想在微信分享出去的链接中使用我们自定义的一些标题、摘要和缩略图,就需要调用微信JS-SDK自定义分享链接
获取令牌access_token
通过AppId和AppSecret请求获取access_token
/**
* 获取access_token
* @return
* @throws IOException
*/
private static String getAcceessToken() throws IOException
{
//必须是get方式请求
String jsonValue = CcpHttpClientUO.doGet("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + WxDevUtil.APPID + "&secret="+ WxDevUtil.SECRET);
JSONObject json = JSONObject.fromObject(jsonValue);
return (String) json.get("access_token");
}
用令牌获取票据jsapi_ticket
注:令牌和票据的有效期为7200秒,而且微信js接口的调用每天有次数限制,因此用户获取票据后需要先存储起来,每次需要票据时先获取本地的,如果过期则重新生成一个新的票据
/**
* 获取jsapi_ticket
* @return
* @throws IOException
*/
public static JSONObject getJsapiTicket() throws IOException
{
String accessToken = getAcceessToken();
//必须是get方式请求
String jsonValue = CcpHttpClientUO.doGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi");
JSONObject json = JSONObject.fromObject(jsonValue);
return json;
}
获取微信签名
/**
* 根据票据调用微信官方接口,生成微信权限验证的参数
* jsapi_ticket:票据
* url:网页地址
*/
public static Map makeWXTicket(String jsapiTicket, String url) throws UnsupportedEncodingException, NoSuchAlgorithmException
{
Map result = new HashMap();
result.put("url", url);
result.put("jsapi_ticket", jsapiTicket);
result.put("nonceStr", createNonceStr());
result.put("timestamp", createTimestamp());
//注意这里参数名必须全部小写,且必须有序
result.put("signature",
getSignatueValue("jsapi_ticket=" + jsapiTicket + "&noncestr=" + result.get("nonceStr") + "×tamp=" + result.get("timestamp") + "&url="
+ url));
result.put("appid", WxDevUtil.APPID);
return result;
}
按照微信文档签名算法生成签名
private static String getSignatueValue(String value) throws UnsupportedEncodingException, NoSuchAlgorithmException
{
String result = "";
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(value.getBytes("UTF-8"));
result = byteToHex(crypt.digest());
return result;
}
其他辅助函数
//字节数组转换为十六进制字符串
private static String byteToHex(final byte[] hash)
{
Formatter formatter = new Formatter();
for (byte b : hash)
{
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
//生成随机字符串
private static String createNonceStr()
{
return UUID.randomUUID().toString();
}
//生成时间戳
private static String createTimestamp()
{
return Long.toString(System.currentTimeMillis() / 1000);
}
前面提到我们需要将查到的令牌和票据保存在本地,这里我们将这些信息保存在缓存中并设置其有效时间,如果超过有效时间则重新调用微信接口生成新的令牌和票据
//获取票据
private Map getSignatureMap(String url, ICacheService cacheService) throws NoSuchAlgorithmException, IOException
{
String ticket = getTicket(cacheService);
return WxDevUtil.makeWXTicket(ticket, url);
}
//获取票据
private String getTicket(ICacheService cacheService) throws IOException
{
String str = cacheService.getString("IND4_WEIXIN_TICKET_VALUE");
JSONObject json = CcpJsonUO.getInstance().fromObject(str);
long currentTime = System.currentTimeMillis();
if (!isOverDeadLine(currentTime, json))
{
return json.getString("ticket");
}
synchronized (this)
{
str = cacheService.getString("IND4_WEIXIN_TICKET_VALUE");
json = CcpJsonUO.getInstance().fromObject(str);
if (!isOverDeadLine(currentTime, json))
{
return json.getString("ticket");
}
json = WxDevUtil.getJsapiTicket();
long deadLineTime = currentTime + 3500 * 1000 * 2;
json.put("deadLineTime", deadLineTime);
cacheService.put("IND4_WEIXIN_TICKET_VALUE", json.toString());
}
return json.getString("ticket");
}
//判断是否过期
private boolean isOverDeadLine(long currentTime, JSONObject json)
{
if (json == null)
{
return true;
}
long deadLineTime = json.getLong("deadLineTime");
if (currentTime < deadLineTime)
{
return false;
}
return true;
}
引入微信js
查询微信分享配置信息
//url不能写死,必须通过动态传递
var currentUrl = window.location.href.split('#')[0];
$http({
method: "post", url: "/wap/wx/getSignature.do",
params: {url: currentUrl}
}).success(function (response) {
if (!response.errorCode) {
wx.config({
debug: false, //开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印,生产环境需要关闭debug模式
appId: response.appId, //必填,公众号的唯一标识,可以通过微信服务号后台查看
timestamp: response.timestamp, //必填,生成签名的时间戳
nonceStr: response.nonceStr, //必填,生成签名的随机串
signature: response.signature, //必填,签名 //必填,需要使用的JS接口列表
jsApiList: [
'checkJsApi', //判断当前客户端版本是否支持指定JS接口
'onMenuShareTimeline', //分享给好友
'onMenuShareAppMessage', //分享到朋友圈
'onMenuShareQQ', //分享到QQ
'onMenuShareWeibo', //分享到微博
'onMenuShareQZone' //分享到QQ空间
]
});
//通过ready接口处理成功验证,config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
wx.ready(function () {
//朋友圈
wx.onMenuShareTimeline({
title: _title, //分享标题
link: _link, //分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: _imgUrl, //分享图标
trigger: function (res) {//不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回},
success: function (res) {//用户确认分享后执行的回调函数},
cancel: function (res) {//用户取消分享后执行的回调函数},
fail: function (res) {//用户分享失败后执行的回调函数}
});
//微信好友
wx.onMenuShareAppMessage({
title: _title,
desc: _desc,
link: _link,
imgUrl: _imgUrl,
type: _type, //分享类型,music、video或link,不填默认为link
dataUrl: _dataUrl, //如果type是music或video,则要提供数据链接,默认为空
trigger: function (res) {},
success: function (res) {},
cancel: function (res) {},
fail: function (res) {}
});
//QQ
wx.onMenuShareQQ({
title: _title,
desc: _desc,
link: _link,
imgUrl: _imgUrl,
trigger: function (res) {},
success: function (res) {},
cancel: function (res) {},
fail: function (res) {}
});
//微博
wx.onMenuShareWeibo({
title: _title,
desc: _desc,
link: _link,
imgUrl: _imgUrl,
trigger: function (res) {},
success: function (res) {},
cancel: function (res) {},
fail: function (res) {}
});
//QQ空间
wx.onMenuShareQZone({
title: _title,
desc: _desc,
link: _link,
imgUrl: _imgUrl,
trigger: function (res) {},
success: function (res) {},
cancel: function (res) {},
fail: function (res) {}
});
wx.error(function (res) {
/*alert("微信分享出现错误,请稍后再试.");*/
});
});
}
});
使用微信开发者工具测试
到这里核心代码已经完毕了,可以安装微信开发者工具用于本地调试,下载地址,官方使用教程,微信开发者工具其实就是微信的浏览器,其中集成了chrome的调试工具,前面提到wx.config中的debug模式这里就发挥作用了,浏览器会自动弹出调用微信接口的返回结果
效果图
参考1:手把手带你使用JS-SDK自定义微信分享效果
参考2:微信JS-SDK自定义分享链接
参考3:微信官方开发者文档