微信从新版本开始已经不支持在页面head处放一个高宽为0的图片，从而实现分享时系统自动抓取第一个img作为自定义图片。随着微信的升级，微信已经不支持这种方式来实现自定义，该功能已经迁移到微信的jssdk的api接口中，实现自定义图片、标题。废话不多说，直接上教程，帮助后来人少踩一点坑。今天研究了一天才搞完。
准备工作：
- 1、认证过的公众号
- 2、一个备案的域名
- 3、一台服务器
我个人是做java开发，所以用java当做服务器。微信官方JS-SDK开发文档，总结下来先根据自己公众号的appid和secret获取到access_token（有效期两小时），在通过获取到access_token获取到ticket（有效期两小时），生成签名。签名的字段包括noncestr（自己随便定义字符串）, 有效的jsapi_ticket, timestamp（时间戳）, 当前的url。按照ASCII码排序之后形成string1，对该字符串进行sha1加密即可生成签名。由于官方限制接口次数，所以要将access_token保存在服务器的内存中，我写了一个定时任务，每两个小时去访问一次，获取token和ticket。代码如下：
微信工具类
public class WxSettings {
public static String appid = "自己的appid";
public static String secret = "自己的secret";
public static String ACCESS_TOKEN = "";
public static String ticket = "";
/*
* 刷新微信Token
*/
public static void refreshAccessToken() {
// TODO Auto-generated method stub
new Thread(){
@Override
public void run() {
// TODO Auto-generated method stub
while (true) {
try {
//获取accessToken
WxSettings.ACCESS_TOKEN = getAccessToken();
if (StringUtils.hasLength(WxSettings.ACCESS_TOKEN) ) {
WxSettings.ticket=getjsapi_ticket();
sleep(60 * 60 * 2 * 1000);//休眠2小时
}else{
Thread.sleep(1000 * 3); //获取的access_token为空 休眠3秒
}
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}.start();
}
protected static String getAccessToken() throws JSONException {
String requestURL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential"
+ "&appid=" + WxSettings.appid + "&secret=" + WxSettings.secret;
JSONObject json = HttpUtil.doGet(requestURL);
System.out.println("获取到的access_token="+json);
return json.getString("access_token");
}
protected static String getjsapi_ticket() throws JSONException {
String requestURL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+WxSettings.ACCESS_TOKEN+"&type=jsapi";
JSONObject json = HttpUtil.doGet(requestURL);
System.out.println("获取到的ticket="+json);
return json.getString("ticket");
}
复制代码控制器类
@RequestMapping("/")
public String wapindex(HttpServletRequest request,Model model) {
//获取带参数的全路径，
String url = request.getRequestURL().toString()+"?"+request.getQueryString();
System.out.println(url);
String timestamp = Long.toString(System.currentTimeMillis() / 1000);
String nonceStr = "自己定义的随机字符串";
String signature = SignUtil.BuildSignature(WxSettings.ticket,timestamp,nonceStr,url);
System.out.println(signature);
//将appid、时间戳、随机字符串、签名返回给页面的js
model.addAttribute("appid",WxSettings.appid);
model.addAttribute("timestamp",timestamp);
model.addAttribute("nonceStr",nonceStr);
model.addAttribute("signature",signature);
}
复制代码签名工具类
public class SignUtil {
/**
* 生成签名工具类
* @param timestamp
* @param nonce
* @return
*/
public static String BuildSignature(String ticket ,String timestamp, String nonce,String url){
//排序
String content = sort(ticket, timestamp, nonce, url);
//加密
String mySignature = sha1(content);
//返回签名
return mySignature;
}
/**
* 排序方法
*
* @param ticket
* @param timestamp
* @param nonce
* @return
*/
public static String sort(String ticket, String timestamp, String nonce,String url) {
String string1;
// 注意这里参数名必须全部小写，且必须有序
string1 = "jsapi_ticket=" + ticket + "&noncestr=" + nonce
+ "×tamp=" + timestamp + "&url=" + url;
return string1;
}
/**
* 将字符串进行sha1加密
*
* @param str 需要加密的字符串
* @return 加密后的内容
*/
public static String sha1(String str) {
try {
MessageDigest digest = MessageDigest.getInstance("SHA-1");
digest.update(str.getBytes());
byte messageDigest[] = digest.digest();
// Create Hex String
StringBuffer hexString = new StringBuffer();
// 字节数组转换为 十六进制 数
for (int i = 0; i < messageDigest.length; i++) {
String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
if (shaHex.length() < 2) {
hexString.append(0);
}
hexString.append(shaHex);
}
return hexString.toString();
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return "";
}
复制代码}
页面JS
先引入微信官方的js
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">
</script>
wx.config({
debug: true,
// 开启调试模式,调用的所有api的返回值会在客户端alert出来，
// 若要查看传入的参数，可以在pc端打开
//，参数信息会通过log打出，仅在pc端时才会打印。
appId:'${appid}' , // 必填，公众号的唯一标识
timestamp:parseInt('${timestamp}'), // 必填，生成签名的时间戳
nonceStr: '${nonceStr}', // 必填，生成签名的随机串
signature: '${signature}',// 必填，签名
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
// 强调一下window.location.host，如果用全路径会出现电脑分享能够加载图，手机分享不加载图的情况，这里也是我踩得一个深坑
var imgUrl = 'http://'+window.location.host+'/img/logo.jpg'; // 分享后展示的一张图片
var lineLink = 'http://'+window.location.host+'/a5'; // 点击分享后跳转的页面地址
var descContent = ""; // 分享后的描述信息
var shareTitle = ''; // 分享后的标题
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.onMenuShareTimeline({
title: shareTitle, // 分享标题
link: lineLink, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareAppMessage({
title: shareTitle, // 分享标题
desc: "", // 分享描述
link: lineLink, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
复制代码
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
