微信分享自定义图片和简介

微信从新版本开始已经不支持在页面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
            + "&timestamp=" + 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 () {
            // 用户取消分享后执行的回调函数
        }
    });
});
复制代码

转载于:https://juejin.im/post/5b7420b0e51d45664b3c96ac