H5分享到微信朋友圈與好友實現思路
阿新 • • 發佈：2021-01-05
技術標籤：javajavascript
H5分享到微信朋友圈與好友實現思路
本文只是實現思路,程式碼寫的比較水,僅供參考
使用springBoot 返回ModelAndView 實現
HTML使用Thymeleaf
1.新增MyX509TrustManager類(從微信提供的包中匯入或自己建立都可以)
import java.security.cert.CertificateException; import java.security.cert.X509Certificate; import javax.net.ssl.X509TrustManager; public class MyX509TrustManager implements X509TrustManager { public void checkClientTrusted(X509Certificate[] chain, String authType) throws CertificateException { } public void checkServerTrusted(X509Certificate[] chain, String authType) throws CertificateException { } public X509Certificate[] getAcceptedIssuers() { return null; } }
2.maven新增JSON依賴
<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib-ext-spring</artifactId>
<version>1.0.2</version>
</dependency>3.建立WeixinUtil類
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> * @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> * @param request * @return 說明返回值含義 * @throws 說明發生此異常的條件 */ public static Map<String, Object> getWxConfig(HttpServletRequest request) { Map<String, Object> ret = new HashMap<String, Object>(); //此處appid與secret應該放到配置檔案中,測試實現僅供參考 String appId = "wxappId "; // 必填，公眾號的唯一標識 String secret = "wxsecret"; //url 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+ "×tamp=" + 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; } }
4.測試controller
@Controller public class TestController { @RequestMapping(value = "/test", method = RequestMethod.GET) public ModelAndView test(HttpServletRequest request){ ModelAndView model = new ModelAndView(); Map<String,Object> ret = new HashMap<String,Object>(); //獲取必要引數資訊 ret= WeixinUtil.getWxConfig(request); 根據業務編寫業務程式碼 //...... //加入需要展示的標題title ret.put("title", "xxx"); //加入需要展示的詳情desc ret.put("desc", "xxx"); //獲取URL String url = request.getRequestURL().toString(); //加入需要展示的詳情URL ret.put("link", url); model.addObject("wxConfig",ret); //返回頁面 model.setViewName("test"); return model; } }
5.HTML頁面
//1.引入js
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
//2.通過config介面注入許可權驗證配置
wx.config({
debug: true,
appId: '[(${wxConfig.appId})]',
timestamp: '[(${wxConfig.timestamp})]',
nonceStr: '[(${wxConfig.nonceStr})]',
signature: '[(${wxConfig.signature})]',
jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
});
//3.通過ready介面處理成功驗證,並呼叫相應介面
wx.ready(function(){
// 獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面
wx.updateAppMessageShareData({
title: '[(${wxConfig.title})]', // 分享標題
desc: '[(${wxConfig.desc})]', // 分享描述
link: '[(${wxConfig.link})]', //分享URL
imgUrl: "https://picsum.photos/200/200", // 分享圖示,此處我測試使用了外部圖片
success: function () {
// 使用者確認分享後執行的回撥函式
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
// 獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面
wx.updateTimelineShareData({
title: '[(${wxConfig.title})]', // 分享標題
link: '[(${wxConfig.link})]', //分享URL
//分享給朋友不需要使用分享描述desc欄位
imgUrl: "https://picsum.photos/200/200", // 分享圖示,此處我測試使用了外部圖片
success: function () {
// 使用者確認分享後執行的回撥函式
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
});6.在微信公眾號配置中新增JS介面安全域名
7.測試效果
分享給好友:
分享到朋友圈:
8.完成