第一部分：微信JS-SDK介紹

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。

通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁體驗。

本次的內容：

實現：分享到朋友圈，qq，qq空間，微信朋友的功能。

基礎介面

判斷當前客戶端版本是否支援指定JS介面

wx.checkJsApi({
    jsApiList: ['chooseImage'], // 需要檢測的JS介面列表，所有JS介面列表見附錄2,
    success: function(res) {
        // 以鍵值對的形式返回，可用的api值true，不可用為false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

備註：checkJsApi介面是客戶端6.0.2新引入的一個預留介面，第一期開放的介面均可不使用checkJsApi來檢測。

獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面

wx.onMenuShareTimeline({
    title: '', // 分享標題
    link: '', // 分享連結
    imgUrl: '', // 分享圖示
    success: function () { 
        // 使用者確認分享後執行的回撥函式
    },
    cancel: function () { 
        // 使用者取消分享後執行的回撥函式
    }
});

獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面

wx.onMenuShareAppMessage({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連結
    imgUrl: '', // 分享圖示
    type: '', // 分享型別,music、video或link，不填預設為link
    dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
    success: function () { 
        // 使用者確認分享後執行的回撥函式
    },
    cancel: function () { 
        // 使用者取消分享後執行的回撥函式
    }
});

獲取“分享到QQ”按鈕點選狀態及自定義分享內容介面

wx.onMenuShareQQ({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連結
    imgUrl: '', // 分享圖示
    success: function () { 
       // 使用者確認分享後執行的回撥函式
    },
    cancel: function () { 
       // 使用者取消分享後執行的回撥函式
    }
});

獲取“分享到騰訊微博”按鈕點選狀態及自定義分享內容介面

wx.onMenuShareWeibo({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連結
    imgUrl: '', // 分享圖示
    success: function () { 
       // 使用者確認分享後執行的回撥函式
    },
    cancel: function () { 
        // 使用者取消分享後執行的回撥函式
    }
});

獲取“分享到QQ空間”按鈕點選狀態及自定義分享內容介面

wx.onMenuShareQZone({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連結
    imgUrl: '', // 分享圖示
    success: function () { 
       // 使用者確認分享後執行的回撥函式
    },
    cancel: function () { 
        // 使用者取消分享後執行的回撥函式
    }
});

附錄2-所有JS介面列表

版本1.0.0介面

• onMenuShareTimeline
• onMenuShareAppMessage
• onMenuShareQQ
• onMenuShareWeibo
• onMenuShareQZone

附錄3-所有選單項列表

• 傳送給朋友: "menuItem:share:appMessage"
• 分享到朋友圈: "menuItem:share:timeline"
• 分享到QQ: "menuItem:share:qq"
• 分享到Weibo: "menuItem:share:weiboApp"
• 收藏: "menuItem:favorite"
• 分享到FB: "menuItem:share:facebook"
• 分享到 QQ 空間/menuItem:share:QZone

第二部分：分享方法的實現。

那麼，我們如何來實現這個分享內容呢？

JSSDK使用步驟

步驟一：繫結域名

1. 先登入微信公眾平臺 ，登入後可在“開發者中心”檢視對應的介面許可權。

說明了有這個分享的許可權。

2.  進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。

js域名，一般不用http這樣的開頭。

步驟二：引入JS檔案

如需使用搖一搖周邊功能，請引入 jweixin-1.1.0.js

備註：支援使用 AMD/CMD 標準模組載入方法載入

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

步驟三：通過config介面注入許可權驗證配置

所有需要使用JS-SDK的頁面必須先注入配置資訊，否則將無法呼叫（同一個url僅需呼叫一次，對於變化url的SPA的web app可在每次url變化時進行呼叫,目前Android微信客戶端不支援pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。

wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});

注意，我這裡只是動態獲取，並沒有做快取，如果有需要的同學，需要做一些快取。

如何獲取以上的引數呢？

package com.souvc.weixin.util;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.UnsupportedEncodingException;
import java.net.ConnectException;
import java.net.URL;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Formatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.net.ssl.HttpsURLConnection;
import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLSocketFactory;
import javax.net.ssl.TrustManager;
import javax.servlet.http.HttpServletRequest;

import net.sf.json.JSONObject;

public class WeixinUtil {
    
    /**
    * 方法名：httpRequest</br>
    * 詳述：傳送http請求</br>
    * 開發人員：souvc </br>
    * 建立時間：2016-1-5  </br>
    * @param requestUrl
    * @param requestMethod
    * @param outputStr
    * @return 說明返回值含義
    * @throws 說明發生此異常的條件
     */
    public static JSONObject httpRequest(String requestUrl,String requestMethod, String outputStr) {
        JSONObject jsonObject = null;
        StringBuffer buffer = new StringBuffer();
        try {
            TrustManager[] tm = { new MyX509TrustManager() };
            SSLContext sslContext = SSLContext.getInstance("SSL", "SunJSSE");
            sslContext.init(null, tm, new java.security.SecureRandom());
            SSLSocketFactory ssf = sslContext.getSocketFactory();
            URL url = new URL(requestUrl);
            HttpsURLConnection httpUrlConn = (HttpsURLConnection) url.openConnection();
            httpUrlConn.setSSLSocketFactory(ssf);
            httpUrlConn.setDoOutput(true);
            httpUrlConn.setDoInput(true);
            httpUrlConn.setUseCaches(false);
            httpUrlConn.setRequestMethod(requestMethod);
            if ("GET".equalsIgnoreCase(requestMethod))
                httpUrlConn.connect();
            if (null != outputStr) {
                OutputStream outputStream = httpUrlConn.getOutputStream();
                outputStream.write(outputStr.getBytes("UTF-8"));
                outputStream.close();
            }
            InputStream inputStream = httpUrlConn.getInputStream();
            InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "utf-8");
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
            String str = null;
            while ((str = bufferedReader.readLine()) != null) {
                buffer.append(str);
            }
            bufferedReader.close();
            inputStreamReader.close();
            inputStream.close();
            inputStream = null;
            httpUrlConn.disconnect();
            jsonObject = JSONObject.fromObject(buffer.toString());
        } catch (ConnectException ce) {
            ce.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return jsonObject;
    }

    
    /**
    * 方法名：getWxConfig</br>
    * 詳述：獲取微信的配置資訊 </br>
    * 開發人員：souvc  </br>
    * 建立時間：2016-1-5  </br>
    * @param request
    * @return 說明返回值含義
    * @throws 說明發生此異常的條件
     */
    public static Map<String, Object> getWxConfig(HttpServletRequest request) {
        Map<String, Object> ret = new HashMap<String, Object>();
      
        String appId = "xxxx"; // 必填，公眾號的唯一標識
        String secret = "xxxx";

        String requestUrl = request.getRequestURL().toString();
        String access_token = "";
        String jsapi_ticket = "";
        String timestamp = Long.toString(System.currentTimeMillis() / 1000); // 必填，生成簽名的時間戳
        String nonceStr = UUID.randomUUID().toString(); // 必填，生成簽名的隨機串
        String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+ appId + "&secret=" + secret;
        
        JSONObject json = WeixinUtil.httpRequest(url, "GET", null);
        
        if (json != null) {
            //要注意，access_token需要快取
            access_token = json.getString("access_token");
            
            url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token + "&type=jsapi";
            json = WeixinUtil.httpRequest(url, "GET", null);
            if (json != null) {
                jsapi_ticket = json.getString("ticket");
            }
        }
        String signature = "";
        // 注意這裡引數名必須全部小寫，且必須有序
        String sign = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonceStr+ "&timestamp=" + timestamp + "&url=" + requestUrl;
        try {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(sign.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        ret.put("appId", appId);
        ret.put("timestamp", timestamp);
        ret.put("nonceStr", nonceStr);
        ret.put("signature", signature);
        return ret;
    }

    
    /**
    * 方法名：byteToHex</br>
    * 詳述：字串加密輔助方法 </br>
    * 開發人員：souvc  </br>
    * 建立時間：2016-1-5  </br>
    * @param hash
    * @return 說明返回值含義
    * @throws 說明發生此異常的條件
     */
    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;

    }
}

注意：以上需要替換成自己的appid和secret 。

步驟四：通過ready介面處理成功驗證

wx.ready(function(){

    // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
});

根據以上的步驟，我們寫了一個頁面：

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"  pageEncoding="utf-8"%>
<%@page language="java" import="com.souvc.weixin.util.WeixinUtil" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>歡迎訪問搜投網  www.souvc.com </title>
<%
        Map<String,Object>  ret = new HashMap<String,Object> ();
        ret=WeixinUtil.getWxConfig(request);
        request.setAttribute("appId", ret.get("appId"));
        request.setAttribute("timestamp", ret.get("timestamp"));
        request.setAttribute("nonceStr", ret.get("nonceStr"));
        request.setAttribute("signature", ret.get("signature"));
        %> 
</head>
<body>
        
        歡迎訪問搜投網！
        
</body>


<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">

// 微信資訊的以及呼叫的配置
wx.config({
    debug: false, 
    appId: '${appId}', 
    timestamp: '${timestamp}', 
    nonceStr: '${nonceStr}', 
    signature: '${signature}',
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] 
});

wx.ready(function(){
    // 獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面
    wx.onMenuShareTimeline({
        title: '第八篇 ：微信公眾平臺開發實戰Java版之如何網頁授權獲取使用者基本資訊', // 分享標題
        link:"http://www.cnblogs.com/liuhongfeng/p/5099149.html",
        imgUrl: "http://images.cnblogs.com/cnblogs_com/liuhongfeng/737147/o_1442809977405.jpg" // 分享圖示
    });
    // 獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面
    wx.onMenuShareAppMessage({
        title: '第七篇 ：微信公眾平臺開發實戰Java版之如何獲取微信使用者基本資訊', // 分享標題
        desc: "第七篇 ：微信公眾平臺開發實戰Java版之如何獲取微信使用者基本資訊", // 分享描述
        link:"http://www.cnblogs.com/liuhongfeng/p/5057167.html",
        imgUrl: "http://images.cnblogs.com/cnblogs_com/liuhongfeng/737147/o_QQ%E5%9B%BE%E7%89%8720151118180508.png", // 分享圖示
        type: 'link', // 分享型別,music、video或link，不填預設為link
    });
    
    //獲取“分享到QQ”按鈕點選狀態及自定義分享內容介面
    wx.onMenuShareQQ({
        title: '第六篇 ：微信公眾平臺開發實戰Java版之如何自定義微信公眾號選單', // 分享標題
        desc: '第六篇 ：微信公眾平臺開發實戰Java版之如何自定義微信公眾號選單', // 分享描述
        link: 'http://www.cnblogs.com/liuhongfeng/p/4857312.html', // 分享連結
        imgUrl: 'http://images.cnblogs.com/cnblogs_com/liuhongfeng/737147/o_qrcode_for_gh_228cd30523bc_258.jpg', // 分享圖示
        success: function () { 
           // 使用者確認分享後執行的回撥函式
        },
        cancel: function () { 
           // 使用者取消分享後執行的回撥函式
        }
    });
    
    //獲取“分享到騰訊微博”按鈕點選狀態及自定義分享內容介面
    wx.onMenuShareWeibo({
        title: '分享到騰訊微博標題', // 分享標題
        desc: '分享到騰訊微博描述', // 分享描述
        link: 'http://www.cnblogs.com/liuhongfeng/p/4857312.html', // 分享連結
        imgUrl: 'http://images.cnblogs.com/cnblogs_com/liuhongfeng/737147/o_qrcode_for_gh_228cd30523bc_258.jpg', // 分享圖示
        success: function () { 
           // 使用者確認分享後執行的回撥函式
        },
        cancel: function () { 
            // 使用者取消分享後執行的回撥函式
        }
    });
    
    //獲取“分享到QQ空間”按鈕點選狀態及自定義分享內容介面
    wx.onMenuShareQZone({
        title: '分享到QQ空間標題', // 分享標題
        desc: '分享到QQ空間描述', // 分享描述
        link: 'http://www.cnblogs.com/liuhongfeng/p/4857312.html', // 分享連結
        imgUrl: 'http://images.cnblogs.com/cnblogs_com/liuhongfeng/737147/o_qrcode_for_gh_228cd30523bc_258.jpg', // 分享圖示
        success: function () { 
           // 使用者確認分享後執行的回撥函式
        },
        cancel: function () { 
            // 使用者取消分享後執行的回撥函式
        }
    });
    
});
</script>

</html>

步驟五： 部署到伺服器。然後訪問到這個頁面，用微信掃一掃。然後分享到我們設定的介面。

效果如下：

發給微信朋友的效果：

分享到朋友圈的效果：

分享到qq空間的效果：

分享給朋友的效果：

恭喜你，配置成功！！

其他文章關聯：