微信分享是项目中很常见的需求，如果想在微信分享出去的链接中使用我们自定义的一些标题、摘要和缩略图，就需要调用微信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<String, String> makeWXTicket(String jsapiTicket, String url) throws UnsupportedEncodingException, NoSuchAlgorithmException
{
Map<String, String> result = new HashMap<String, String>();
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<String, String> 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
<script typet="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
查询微信分享配置信息
//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：微信官方开发者文档
