自定义微信分享效果

微信分享是项目中很常见的需求,如果想在微信分享出去的链接中使用我们自定义的一些标题、摘要和缩略图,就需要调用微信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张图片
原始的微信分享效果

自定义微信分享效果_第2张图片
自定义的微信分享效果

参考1:手把手带你使用JS-SDK自定义微信分享效果
参考2:微信JS-SDK自定义分享链接
参考3:微信官方开发者文档

你可能感兴趣的:(自定义微信分享效果)