[置顶] h5链接分享微信朋友圈，压缩图标题内容设置

前些天，接到h5动态页面分享到微信朋友圈推广的需求，之前没接触过这块，在网上查了不少资料，走了不少弯路。整理了一下，以便后续使用，对刚接触这块的有所帮助。
用。
1. 微信公众号appid，secret获取

2.设置微信公众号ip名单（获取外网地址http://www.ip138.com/）

3.配置访问域名（公众号设置→功能设置→JS接口安全域名），根据指示，下载文件到相应域名根目录下。 例如： mobile.huashengwed.com域名，mobile.huashengwed.com/MP_verify_mZhiNRkgzQxEZVxd.txt 进行访问。

4.后台根据appid，secret ,通过http已get的形式发送请求获得 access_token （接口令牌），access_token时效7200秒，一天上限请求2000次，建议使用缓存保存。
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET

5.后台根据access_token 获得接口许可证 api_ticket，时效7200秒，建议使用缓存保存。
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESSTOKEN&type=jsai

6.后台手动生成16位随机数noncestr和10位时间数值timestamp ，当前请求路径url，结合api_ticket ，拼接成字符串str1，通过对str1，进行SHA1编码方法，获得签名signature。
/* * 产生随机字符串 * */

private static Random strGen = new Random();
private static char[] numbersAndLetters = ("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ").toCharArray();
public static final String randomString(int length) {
if (length < 1) {
return null;
}
char[] randBuffer = new char[length];
for (int i = 0; i < randBuffer.length; i++) {
randBuffer[i] = numbersAndLetters[strGen.nextInt(61)];
}
return new String(randBuffer);
}

/* * 产生时间数值 * */

long timestamp = System.currentTimeMillis()/1000;

/* * 产生字符串str和签名signature * */

String str = "jsapi_ticket=" + ticket +

"&noncestr=" + noncestr +

"×tamp=" + timestamp +

"&url=" + url;

String signature = SHA1(str);

/* * 进行sha1加密 * */

public static String SHA1(String str) {

try {

MessageDigest digest = java.security.MessageDigest

.getInstance("SHA-1"); //如果是SHA加密只需要将"SHA-1"改成"SHA"即可

digest.update(str.getBytes());

byte messageDigest[] = digest.digest();

// Create Hex String

StringBuffer hexStr = new StringBuffer();

// 字节数组转换为 十六进制 数

for (int i = 0; i < messageDigest.length; i++) {

String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);

if (shaHex.length() < 2) {

hexStr.append(0);

}

hexStr.append(shaHex);

}

return hexStr.toString();

} catch (NoSuchAlgorithmException e) {

e.printStackTrace();

}

return null;

}

7.前端引入微信js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

8.前端动态获取当前url，通过ajax请求获取签名时间、签名随机数和签名。
提示config：ok ，表示配置成功，可以成功调取微信js接口，通过wx对象调取。

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var firstImg ='';
var theurl = location.href.split('#')[0];
//alert(theurl);
var theappId ='';
var thetimestamp = '';
var theNonceStr = '';
var thesignature = '';
$.ajax({
url : "",
type : "POST",
dataType : "json",
data : {"url" : encodeURIComponent(theurl)},
success : function(data) {
theappId = data.msg.appId;
thetimestamp = data.msg.timestamp;
theNonceStr = data.msg.theNonceStr;
thesignature = data.msg.signature;
wx.config({
debug: true, //调式模式，设置为ture后会直接在网页上弹出调试信息，用于排查问题
appId: theappId,
timestamp: thetimestamp,
nonceStr: theNonceStr,
signature: thesignature,
jsApiList: [ //需要使用的网页服务接口
'checkJsApi', //判断当前客户端版本是否支持指定JS接口
'onMenuShareTimeline', //分享给好友
'onMenuShareAppMessage', //分享到朋友圈
'onMenuShareQQ', //分享到QQ
'onMenuShareWeibo' //分享到微博
]
});
wx.ready(function () { //ready函数用于调用API，如果你的网页在加载后就需要自定义分享和回调功能，需要在此调用分享函数。//如果是微信游戏结束后，需要点击按钮触发得到分值后分享，这里就不需要调用API了，可以在按钮上绑定事件直接调用。因此，微信游戏由于大多需要用户先触发获取分值，此处请不要填写如下所示的分享API
wx.onMenuShareTimeline({ //例如分享到朋友圈的API
title: '', // 分享标题
link: theurl,
imgUrl: firstImg, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
wx.error(function (res) {
alert(res.errMsg); //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错
8a7e
误提示
});
},
error : function(data) {
// alert("操作失败, 请刷新后再重新操作！");
}
});

</script>

详细可参考微信号公众平台接口文档说明：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115