微信分享是項目中很常見的需求，如果想在微信分享出去的鏈接中使用我們自定義的一些標(biāo)題、摘要和縮略圖，就需要調(diào)用微信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");
}

用令牌獲取票據(jù)jsapi_ticket

注：令牌和票據(jù)的有效期為7200秒，而且微信js接口的調(diào)用每天有次數(shù)限制，因此用戶獲取票據(jù)后需要先存儲起來，每次需要票據(jù)時先獲取本地的，如果過期則重新生成一個新的票據(jù)

/**
 * 獲取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;

}

獲取微信簽名

/**
* 根據(jù)票據(jù)調(diào)用微信官方接口，生成微信權(quán)限驗證的參數(shù)
* jsapi_ticket：票據(jù)
* url：網(wǎng)頁地址
*/ 
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());

    //注意這里參數(shù)名必須全部小寫，且必須有序
    result.put("signature",
            getSignatueValue("jsapi_ticket=" + jsapiTicket + "&noncestr=" + result.get("nonceStr") + "&timestamp=" + 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;
}

其他輔助函數(shù)

//字節(jié)數(shù)組轉(zhuǎn)換為十六進制字符串
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);
}

前面提到我們需要將查到的令牌和票據(jù)保存在本地，這里我們將這些信息保存在緩存中并設(shè)置其有效時間，如果超過有效時間則重新調(diào)用微信接口生成新的令牌和票據(jù)

//獲取票據(jù)
private Map<String, String> getSignatureMap(String url, ICacheService cacheService) throws NoSuchAlgorithmException, IOException
{
    String ticket = getTicket(cacheService);

    return WxDevUtil.makeWXTicket(ticket, url);
}
//獲取票據(jù)
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="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

查詢微信分享配置信息

//url不能寫死，必須通過動態(tài)傳遞
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, //開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印，生產(chǎn)環(huán)境需要關(guān)閉debug模式
                appId: response.appId, //必填，公眾號的唯一標(biāo)識，可以通過微信服務(wù)號后臺查看
                timestamp: response.timestamp, //必填，生成簽名的時間戳
                nonceStr: response.nonceStr, //必填，生成簽名的隨機串
                signature: response.signature, //必填，簽名 //必填，需要使用的JS接口列表
                jsApiList: [
                    'checkJsApi', //判斷當(dāng)前客戶端版本是否支持指定JS接口
                    'onMenuShareTimeline', //分享給好友
                    'onMenuShareAppMessage', //分享到朋友圈
                    'onMenuShareQQ', //分享到QQ
                    'onMenuShareWeibo', //分享到微博
                    'onMenuShareQZone' //分享到QQ空間
                ]
            });

            //通過ready接口處理成功驗證，config信息驗證后會執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中
            wx.ready(function () {
                //朋友圈
                wx.onMenuShareTimeline({
                    title: _title, //分享標(biāo)題
                    link: _link, //分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致
                    imgUrl: _imgUrl, //分享圖標(biāo)
                    trigger: function (res) {//不要嘗試在trigger中使用ajax異步請求修改本次分享的內(nèi)容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回},
                    success: function (res) {//用戶確認分享后執(zhí)行的回調(diào)函數(shù)},
                    cancel: function (res) {//用戶取消分享后執(zhí)行的回調(diào)函數(shù)},
                    fail: function (res) {//用戶分享失敗后執(zhí)行的回調(diào)函數(shù)}
                });

                //微信好友
                wx.onMenuShareAppMessage({
                    title: _title,
                    desc: _desc,
                    link: _link,
                    imgUrl: _imgUrl,
                    type: _type, //分享類型,music、video或link，不填默認為link
                    dataUrl: _dataUrl, //如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空
                    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("微信分享出現(xiàn)錯誤，請稍后再試.");*/
                });
            });
        }
    });

使用微信開發(fā)者工具測試

到這里核心代碼已經(jīng)完畢了，可以安裝微信開發(fā)者工具用于本地調(diào)試，下載地址，官方使用教程，微信開發(fā)者工具其實就是微信的瀏覽器，其中集成了chrome的調(diào)試工具，前面提到wx.config中的debug模式這里就發(fā)揮作用了，瀏覽器會自動彈出調(diào)用微信接口的返回結(jié)果

效果圖

原始的微信分享效果

自定義的微信分享效果

參考1：手把手帶你使用JS-SDK自定義微信分享效果
參考2：微信JS-SDK自定義分享鏈接
參考3：微信官方開發(fā)者文檔