2. 程式人生 > >實現微信自定義分享網頁（java）

實現微信自定義分享網頁（java）

阿新 • • 發佈：2018-12-23

前言

網頁實現微信分享功能，這個其實在百度上是有很多例子的，而且寫得也都還不錯。不過我這個跟他們的不大一樣。一般的部落格會將分享需要的微信憑證這些寫進一個專案中，本專案獲取，本專案實現分享功能。而我是獲取微信憑證是單獨的一個專案，這樣一個服務號的獲取的微信憑證，可以提供給很多個專案使用，拓展性還是可以的，有需要的朋友可以參考下。

方案的選擇

其實我剛開始做的時候想到兩個方案:

1、將獲取的微信憑證放進static靜態變數中。具體做法是：web專案啟動，然後啟動監聽器，利用初始化方法啟動一個執行緒，這個執行緒就是定時發請求去獲取微信憑證，然後儲存到public static靜態變數中，如果有需要的話直接去取。這個是我很早之前做傳送微信模板訊息考慮的做法，但是我使用main方法本次測試的時候，好像是取不到static的值，當時百度上很多人都說可以用這種方式，但是我測試的時候是取不到static 裡面的值，當然感興趣的朋友可以試一下，也許你會有不一樣的發現。

2、方案二如前言所示。

專案總體實現思路

其實要實現一個服務號獲取的憑證給多個應用或者專案共享，很簡單。就是把獲取微信憑證的這個專案獨立出來，然後使用全域性快取的方式，每次其它專案需要的時候就發請求，引數中攜帶有時間戳，然後與快取中的時間戳相比較，如果時間差超過兩小時，那麼重新獲取微信憑證並保留在快取中，如果時間差並未超過兩小時，那麼將快取中保留的憑證返回。也可以這麼理解，其它專案發請求過來獲取微信憑證的時候，每次都是從快取中取出微信憑證，至於要不要重新獲取比較時間戳即可。

具體實現流程

1、 要使用微信的東西，首先當然是檢視微信官方文件進行了解，對整個流程有個清晰的認識。

開發前的準備請看下圖。
這裡寫圖片描述

設定的時候請注意上面的文字

這裡寫圖片描述

對於上面必須檔案的放置，可以放到你填寫的域名指向的tomcat下的/webapps/ROOT這個裡面，訪問域名+檔名比如說:wx.qq.com/MP_verify_TefDJNVX7f91MSYR.txt如果可以成功訪問，那麼恭喜你設定成功。

2、考慮到在開發的過程中需要除錯，所以建議大家使用微信web開發者工具進行除錯，這樣效果比手機好得多。

下載工具之後，到公眾平臺——開發——開發者工具——web開發者工具 授權給自己的微訊號，然後就可以使用微信web開發者工具進行相關的開發除錯了。

3、需要獲取的微信憑證
我當時記得官方有個具體的連結解釋的，就是呼叫什麼介面，返回引數和注意事項，但是我一時半會找不到了，所以我在這裡羅列下。
首先是accessToken

，具體可以檢視獲取access_token
然後使用accessToken獲取api_ticket，在微信JS-SDK說明文件 微信卡券下的獲取api_ticket這部分可以看到對應的資訊。
獲取這兩個憑證的時候，我們注意到這兩個有時間和次數限制，所以我的建議是存到全域性快取ServletContext物件中：

   ServletContext sc = request.getSession().getServletContext();
    sc.setAttribute("accessToken", accessToken);
            sc.setAttribute("jsapiTicket", jsapiTicket);

然後通過這樣來取值就可以實現微信憑證共享的目的了。

accessToken = (String) sc.getAttribute(“accessToken”);
jsapiTicket = (String) sc.getAttribute(“jsapiTicket”);

4、請求的簡單驗證

作為一個網路介面，安全是一個很重要的考慮。所以我這裡通過對引數進行校驗來決定是否返回微信憑證。

String timestampString = Tools.GetString(request.getParameter("timestamp"), "");// 請求的時間戳
        String nonceStr = Tools.GetString(request.getParameter("nonceStr"), ""); //uuid生成的隨機數，概率避免被惡意請求資源
        String auth = Tools.GetString(request.getParameter("auth"), "");// 金鑰，避免惡意請求

這個部分比較簡單，其中auth是對引數和金鑰進行md5加密的字串，獲取字串之後，將引數加密對比就行，無需解密對比（哈哈）。用springMVC就可以實現了，具體可以檢視我的程式碼。下面來介紹重點部分。

5、後面這部分由於是我應用的一個小模組，所以我把這部分程式碼貼出來，大家可以自己整理下。

首先是訪問頁面，然後發請求獲取憑證

//在訪問檢視的時候，同時發請求，獲取和製作需要的資訊
//controller
@RequestMapping(value = "/remindpage", method = { RequestMethod.GET, RequestMethod.POST })
    public ModelAndView login(@PathVariable("channel") String channel, @PathVariable("activity") String activity,HttpServletRequest request) throws Exception {

        ModelAndView mav = new ModelAndView(activity+"/remindpage");
        Map<String, Object> shareMap = WechatUtil.getWxConfig(activity,request);
        mav.addObject("appId", shareMap.get("appId"));
        mav.addObject("timestamp", shareMap.get("timestamp"));
        mav.addObject("nonceStr", shareMap.get("nonceStr"));
        mav.addObject("signature", shareMap.get("signature"));
        mav.addObject("requestUrl", shareMap.get("requestUrl"));
        mav.addObject("wechatShareTitle", shareMap.get("wechatShareTitle"));
        mav.addObject("wechatShareDesc", shareMap.get("wechatShareDesc"));
        mav.addObject("wechatSharePic", shareMap.get("wechatSharePic"));
        int joinUserNum = userService.countJoinUserNum(); //統計報名人數
        mav.addObject("joinUserNum", joinUserNum);
        String subscribe = Tools.GetString(request.getParameter("subscribe"), "");
        if(subscribe.equals("0")){
            mav.addObject("subscribe", "0");
        }
        return mav;
    }

工具類WechatUtil.java
傳送請求前，使用base64加密的時候，有個小細節要注意下，當加密的字串超過一定長度，會自動增加換行符號，所以請看Base64加密後有換行回車的解決辦法

package com.aotain.wechat.utils;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java.net.ConnectException;
import java.net.HttpURLConnection;
import java.net.URL;
import java.security.MessageDigest;
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.ServletContext;
import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger;

import sun.net.www.URLConnection;
import net.sf.json.JSONObject;

public class WechatUtil {

    private static Logger Log = Logger.getLogger("sysLog");
    private static String AppId = Constants.getProValue("APPID");
    private static String WechatKey = Constants.getProValue("wechatKey");


    /**
     * 方法名：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) throws Exception {

        requestUrl = requestUrl.replaceAll("[\\s*\t\n\r]", "");   //避免base64加密後自動回車換行過長自動換行
        JSONObject jsonObject = null;
        StringBuffer buffer = new StringBuffer();
        InputStream inputStream = null;
        InputStreamReader inputStreamReader = null;
        BufferedReader bufferedReader = null;
        HttpURLConnection httpUrlConn = null;
        try {
            URL url = new URL(requestUrl);
            httpUrlConn = (HttpURLConnection) url.openConnection();
            httpUrlConn.setDoOutput(true);
            httpUrlConn.setDoInput(true);
            httpUrlConn.setUseCaches(false);
            httpUrlConn.setRequestMethod(requestMethod);
            //httpUrlConn.setRequestProperty("content-type", "application/x-www-form-urlencoded");    
            if ("GET".equalsIgnoreCase(requestMethod))
                httpUrlConn.connect();
            if (null != outputStr) {
                OutputStream outputStream = httpUrlConn.getOutputStream();
                outputStream.write(outputStr.getBytes("UTF-8"));
                outputStream.close();
            }
            inputStream = httpUrlConn.getInputStream();
            inputStreamReader = new InputStreamReader(inputStream, "utf-8");
            bufferedReader = new BufferedReader(inputStreamReader);
            String str = null;
            while ((str = bufferedReader.readLine()) != null) {
                buffer.append(str);
            }

            jsonObject = JSONObject.fromObject(buffer.toString());
        } catch (Exception e) {
            Log.error("傳送HTTP請求異常,請求地址:"+requestUrl+",請求方法:"+requestMethod+",請求結果:"+jsonObject);
        }finally{
            if(bufferedReader != null){
                bufferedReader.close();
            }
            if(inputStreamReader != null){
                inputStreamReader.close();
            }
            if(inputStream != null){
                inputStream.close();
            }
            httpUrlConn.disconnect();
        }
        return jsonObject;
    }

    /**
     * 方法名：getWxConfig</br> 詳述：獲取微信的配置資訊 </br> 開發人員：souvc </br> 建立時間：2016-1-5
     * </br>
     * 
     * @param request
     * @return 說明返回值含義
     * @throws Exception
     * @throws 說明發生此異常的條件
     */
    public static Map<String, Object> getWxConfig(String activity,HttpServletRequest request) throws Exception {

         String WechatShareTitle = Constants.getProValue(activity+"_wechatShareTitle");  //配置檔案中的分享標題
         String WechatShareDesc = Constants.getProValue(activity+"_wechatShareDesc");   //分享描述
         String WechatSharePic = Constants.getProValue(activity+"_wechatSharePic");    //分享的圖片連結
        long timestamp = System.currentTimeMillis() / 1000; // 必填，生成簽名的時間戳
        String nonceStr = UUID.randomUUID().toString(); // 必填，生成簽名的隨機串
        String beforeAuth = nonceStr +"$"+timestamp + "$" + WechatKey;
        String auth = Tools.getBase64Code(Tools.GetMD5Codes(beforeAuth)); //身份驗證
        ServletContext sc = request.getSession().getServletContext();// 獲取全域性物件
       String  timestampStr = timestamp + "";
        String getWxConfigUrl = "你的儲存有微信憑證的專案地址?nonceStr="+nonceStr+"&timestamp="+timestampStr+"&auth="+auth;
        Log.info("requestParam"+"|"+"timestamp="+timestamp+",nonceStr="+nonceStr+",auth="+auth+",getWxConfigUrl="+getWxConfigUrl);
        JSONObject WxConfigJson = WechatUtil.httpRequest(getWxConfigUrl,"GET",null);
        Log.info("WxConfigJson:"+WxConfigJson);
        Map<String, Object> shareMap = new HashMap<String, Object>();
        if(WxConfigJson != null  && WxConfigJson.getInt("resultCode") == 0){
            String accessToken = WxConfigJson.getString("accessToken");
            String jsapiTicket = WxConfigJson.getString("jsapiTicket");
            String requestUrl = request.getRequestURL().toString();
            String requestParam = request.getQueryString();//獲取攜帶的引數
            if(requestParam != null){ 
                requestUrl = requestUrl +"?"+ requestParam; //組成真正的URL
            /*  requestUrl = requestUrl +"?param=2"; //組成真正的URL*/           
                }
            String sign = "jsapi_ticket=" + jsapiTicket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + requestUrl;
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(sign.getBytes("UTF-8"));
            String signature = byteToHex(crypt.digest());

            shareMap.put("appId", AppId);   // 注意這裡引數名必須全部小寫，且必須有序
            shareMap.put("timestamp", timestamp);
            shareMap.put("nonceStr", nonceStr);
            shareMap.put("signature", signature);
            shareMap.put("requestUrl", requestUrl);
            shareMap.put("wechatShareTitle", WechatShareTitle);
            shareMap.put("wechatShareDesc", WechatShareDesc);
            shareMap.put("wechatSharePic", WechatSharePic);
            shareMap.put("accessToken", accessToken);//微信憑證
            sc.setAttribute("accessToken", accessToken);//將憑證快取起來，方便獲取
        }
        return shareMap;
    }
    /**
     * 方法名：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;

    }

}

Tools.java 中涉及的MD5加密和base64位加密，看我分享的程式碼即可。

最後是jsp頁面的寫法，全部的寫法可以參考分享介面：我這裡的寫法是在jsp載入的時候將頁面中的變數賦值，值從前面的controller傳遞過來的。這些東西寫在body 和 html 標籤即可，當然寫在哪裡都可以。注意要記得引進
http://res.wx.qq.com/open/js/jweixin-1.2.0.js

</body>
<script type="text/javascript">
// 微信資訊的以及呼叫的配置
wx.config({
    debug: false, 
    appId: '${appId}', 
    timestamp: '${timestamp}', 
    nonceStr: '${nonceStr}', 
    signature: '${signature}',
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] 
});

wx.ready(function(){
    // 獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面
    wx.onMenuShareTimeline({
        title: '${wechatShareTitle}', // 分享標題
        desc: "${wechatShareDesc}", // 分享描述
        link:"${requestUrl}",
        imgUrl: "${wechatSharePic}", // 分享圖示
        type: 'link', // 分享型別,music、video或link，不填預設為link
        // 使用者確認分享後執行的回撥函式
        success: function () { 
            // index.sub("clickShare");
             console.log("使用者確認分享後執行的回撥函式");
        },
        // 使用者取消分享後執行的回撥函式
        cancel: function () { 
             console.log("使用者取消分享後執行的回撥函式");
       }
    });
    // 獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面
    wx.onMenuShareAppMessage({
        title: '${wechatShareTitle}', // 分享標題
        desc: "${wechatShareDesc}", // 分享描述
        link:"${requestUrl}",
        imgUrl: "${wechatSharePic}", // 分享圖示
        type: 'link', // 分享型別,music、video或link，不填預設為link
        // 使用者確認分享後執行的回撥函式
        success: function () { 
          // index.sub("clickShare");
             console.log("使用者確認分享後執行的回撥函式");
         },
         // 使用者取消分享後執行的回撥函式
         cancel: function () { 
             console.log("使用者取消分享後執行的回撥函式");
         }
    });
});
</script>
</html>

使用微信分享介面還有小地方注意下，就是當前的頁面的url是什麼，配置中的link就是什麼，比如說我這裡是http:xxxxx.com/wechat/share.do(springmvc的轉發，位址列就是顯示這樣的地址)，那麼link對應的就是這個，注意是在controller發請求，而不是到了jsp再寫下面這兩行java程式碼，因為這樣的url實際上jsp的地址，有可能會導致分享失敗或者暴露資源地址。

Map<String, Object> shareMap = WechatUtil.getWxConfig(activity,request);

至此，微信分享部分已經完成。不過我這裡還有個小缺陷，我這裡是使用jsp頁面載入，然後將微信的配置資訊進行渲染，然後實現分享，但是這樣只能使用微信的分享按鈕。感興趣的朋友可以研究下是否可以做成自定義一個分享按鈕，點選按鈕傳送請求來獲取引數，再將網頁分享出去。

結語

由於部分程式碼是貼上去的，可能看的時候不太方便，所以有不明白或者有好的建議的朋友，都可以給我留言。這個功能我已經實現，我就是給有需要的朋友一個參考，拋磚引玉，將程式碼改成符合自己業務需要的。

全域性儲存微信憑證原始碼地址，maven專案：
http://download.csdn.net/download/qq_32574435/10196662

相關推薦

實現微信自定義分享網頁（java）

前言 網頁實現微信分享功能，這個其實在百度上是有很多例子的，而且寫得也都還不錯。不過我這個跟他們的不大一樣。一般的部落格會將分享需要的微信憑證這些寫進一個專案中，本專案獲取，本專案實現分享功能。而我是獲取微信憑證是單獨的一個專案，這樣一個服務號的獲取的微信憑證，可以提供給很多個專案使用，

微信自定義分享連結（設定標題+簡介+圖片）

$(function() { //對url進行編碼 var localUrl = encodeURIComponent(location.href.split('#')[0]); //url傳到後臺格式 var Url = "URL=" +localUrl; //這幾

微信自定義分享網頁標題及內容

通過向後臺請求拿到appid,jsapi_ticket等必要引數； 網頁匯入微信js-Sdk微信開發文件 在wx.reday api中呼叫相關api; 直接上程式碼： html程式碼 <!DOCTYPE html> <html lang="

微信自定義分享標題、描述關鍵詞限制（紅包）

專案中微信自定義分享， 分享朋友圈：自定義縮圖，標題，連結正常。 分享朋友，標題，連結正常。縮圖自己可以看見，朋友卻看不見。 開始查詢程式碼正確性，查詢微信開發jssdk，檢視公眾號許可權。均正常，看來是鬧鬼了。度娘了n久。終於看見有為仁兄寫到：引用自這裡 今日碰見奇葩

vue 微信自定義分享連結拼接引數實現分享功能

Vue 專案實現微信分享的自定義分享連結問題解決 這篇文章可能把問題想複雜了，設定微信分享推薦閱讀這篇文章 >>&

微信JSSDK分享朋友圈微信自定義分享接口

永久 blank 公眾號 sdk 項目 開發 inf src height 服務項目 新手技術咨詢 企業技術咨詢 定制開發 服務說明 QQ有問必答 QQ、微信、電話 微信開發、php開發，網站開發，系統定制，小程序開發 價格說明 200元/月 1000/月 商

微信自定義分享

手機 als ret () wiki log var 默認 微信服務號 幾個月前在做一個ai項目；項目需求在微信公眾號內需要有自定義分享的功能； 微信公眾平臺 微信JS-SDK說明文檔 鏈接地址：https://mp.weixin.qq.com/wiki?t=resour

微信JSSDK分享朋友圈微信自定義分享介面

服務專案 新手技術諮詢 企業技術諮詢 定製開發 服務說明 QQ有問必答 QQ、微信、電話 微信開發、php開發，網站開發，系統定製，小程式開發 價格說明 200元/月 100

微信自定義分享--失效問題

微信自定義分享 微信自定義分享到朋友圈／朋友失效問題 微信自定義分享到朋友圈 wx.onMenuShareTimeline({ title: '', // 分享標題 link: '', // 分享連結，該連結域名或路徑必須與當前頁面對應的公

微信自定義分享在pc正常手機端不正常問題

微信自定義分享在pc正常手機端不正常，使用debug得到的結果都是ok，沒問題。但是手機微信就是不行。經過排查後發現，分享的連結不能夠直接使用授權連結。因此，為了獲取使用者資訊，我的解決辦法是新建一個

微信自定義分享內容

文章的js部分見這裡-》（https://github.com/luoluo5945/WeChat-custom-sharing）本人的github 自定義微信分享的內容        本文主要講解如何實現在微信裡面分享網頁，自定義分享的標題、圖片、內容。       

微信自定義分享連結和圖文

導語：使用微信自定義分享，可設定個性化的分享圖片、標題、描述等，從而使分享的內容更生動有趣，以獲得更好的傳播效果。 微信現在是眾多公司營銷的重點。遍佈朋友圈和訊息群組裡的html5各位可能也是天天見了，不過自從微信更新了官方api後，對整個微信內的頁面管控都嚴格了不少

微信自定義分享IOS環境下-----失效的問題

最近在做一個公眾號，涉及到分享的功能，但是在安卓機上，自定義的分享配置引數能夠被觸發，而在ios蘋果手機上卻失效了，在百度上搜索解決辦法，但都沒有效果，配置引數如下： var content = { title: '少時誦詩書所所', // 分享標題

微信自定義分享-配置成功分享失敗

最近花了一天時間踩了個自定義分享的坑，按官方文件來說第一步需要繫結域名，第二步需要引入jssdk接下來就是前端所需要的值如何獲取到的問題，前端config所需的值（appid,timestamp,nonceStr,signature）如下圖所示：第一個坑nonceStr一定要

微信自定義分享功能;分享朋友，分享到朋友圈

要先在你們的微信公眾號開發平臺上  配置引入東西 經常在微信朋友圈分享一些好的文章或者讓人哭或笑的段子，就在手機右上角的三個豎點一鍵分享就ok了，那麼對於分享到朋友圈是怎麼實現的呢？對於那種活動分享送流量是怎麼定位分享者的呢？而想要將文章傳送給朋友又是怎麼獲取到的朋

Python3.5+PyQt5多執行緒+itchat實現微信防撤回桌面版（一）

前幾日在某乎看到有大神用itchat實現了微信防撤回功能，，覺得很有趣，看到下面評論很多人求桌面版，於是乎，手癢便利用清明節幾天時間做了一個簡陋的桌面程式。廢話不多說，先上圖位敬。 執行環境 win10專業版64位系統1703創造者更新 開發環

微信小程序訪問webService（Java）

微信小程序解析xml 微信小程序調用java(wsdl) 在前臺UI確認後，終於進入到後臺服務的搭建及實現中。所及而來的問題就出現了，為了提高後臺程序的可用性。設計初期決定，通過搭建java WebService實現。準備工作還是比較充分的，創建WebService框架，實現接口方法。通過建立測試客戶端

微信網頁分享標題圖片自定義設置（最新）

內容 outline 朋友圈 exe ech pem read 解決方法 highlight 1 前言 剛好有微信網頁分享標題圖片自定義設置這個需求，然後查找文檔，發現有兩種方案[1]，但是第一種方案已經失效了，只能走第二種方案，然後根據實戰配置好了，本文會寫上配置中遇到的

java-微信分享自定義內容功能（總結）

               java寫微信分享自定義內容功能遇到的一個bug    需求：使用者通過關注公眾號  開啟邀請好友頁面（前提必須先登入）  點選手機右上角豎形

網頁分享到微信自定義標題，內容和圖片

網頁分享到微信中自定義標題，內容和圖片 隨便說說： 網頁現在也可以通過微信中直接開啟，這就是用到時微信的瀏覽器，也可以通過微信瀏覽器中右上角進行分享到朋友，朋友圈，QQ等。這是需要微信的JSSDK的機制所以還是要進行一些配置才可以，而這些配置是需要微信公眾號的appId和