微信公眾號網頁分享功能開發的示例程式碼
阿新 • • 發佈：2020-05-28
現在每天都可以看到很多微信分享的連結上面有網站或者商家的自定義的分享標題，和分享連結的描述及分享出去的影象，例如下面的分享出去的連結：
上面這個是微信的js-SDK頁面分享給微信好友在聊天列表中顯示的視覺效果。
微信JS-SDK Demo :這個是微信網頁分享出去的標題。
微信JS-SDK,幫助第三方為使用者提供更優質的移動web服務：這個是被分享的這個頁面的分享描述。
微信圖示：這個就是自己網站或者自己自定義的影象。
上面這個是微信官方網頁分享出去的定義描述，那麼怎樣實現自己網站網頁的自定義分享的標題，描述及分享出去的顯示圖片呢，下面就具體的來探討一下微信網頁第三方分享自定的實現方式。
關於微信網頁分享自定義主要有兩方面的工作需要我們來做，一是：分享頁面的js分享程式碼的編寫，二是：微信分享網頁的連結地址簽名。
首先來看一下網頁的連線地址簽名，這個功能主要是在服務端來時實現。
第一步：基礎資料的準備，需要如下資料資訊：
APPID:微信公眾號的id;APP_SECRECT:公眾號號的金鑰。簽名的網站域名（這個建議配置在配置檔案中）。
第二步：微信簽名資料的準備：
appid,secret,url將這三個引數放入map中，鍵值為：appid=微信公眾號的id，secret=APP_SECRECT，url=網站的域名+網頁的請求地址+請求的引數。
程式碼的實現方式如下：
1. controller層的程式碼實現：
@RequestMapping("cover")
public String identifyCover(HttpServletRequest request,HttpServletResponse response)
//微信分享授權開始
String appId = ;//取專案中配置的公眾號id
String secret = ;//取專案中配置的公眾號金鑰
//例如我們有一個分享的連結為：http://test.weixinfwenx.cn/project/fenxiang.do?id=1&name=2;
//那麼domainAddr = http://test.weixinfwenx.cn,這個可以動態的配置在專案裡，方便測試環境和生產
//域名的切換
String domainAddr = "";//專案中配置的網站的域名
//這個取的是連結上的引數，例如在上面的這個連結中，id=1&name=2就是我們要動態去的引數，可能有人
//會想到，這個兩個引數直接寫在地址中不是挺簡單的為啥還要動態去獲取這個引數呢；在這裡我們引出了一
//個微信二次分享的問題，就是別人轉發的連結給你，然後你再轉發給別人，在你轉發給別人後這個連結的籤
//名就會失敗，為啥呢，因為經過再次轉發的連結，微信會自動加上一些自己的引數，這樣會導致頁面上微信
//分享的連結和簽名的連結不一致。直接導致自定義的標題和連結描述，顯示失敗，失敗原因是微信預設的在
//我們的分享連結上加上了&from=singlemessage。
String str = request.getQueryString();
Map<String,String> map = new HashMap<String,String>();
map.put("appid",appId);
map.put("secret",secret);
String url = domainAddr + "/project/fenxiang.do?"+str; map.put("url",url);
//這個地址是傳給頁面使用
request.setAttribute("fenxurl",url);
//開始微信分享連結簽名
Map<String,String> params = weixinService.weixinjsIntefaceSign(map);
request.setAttribute("params",params);
return "自己的頁面";2.service層的實現程式碼：
介面：
public interface weixinService{
/**
* @Title: weixinjsIntefaceSign
* @Description: 微信js介面授權
* @param map
* @return
* @return: Map<String,String>
*/
public Map<String,String> weixinjsIntefaceSign(Map<String,String> map);
介面實現類：
public class weixinServiceImpl implements weixinService{
public Map<String,String> map){
//檢視快取資料是否存在
String cacheAccess_token = jedis.get("access_token");
String cacheTicket = jedis.get("ticket");
//取出來為空的話則說明cacheAccess_token快取過期，重新獲取
if(null == cacheAccess_token){
///////////////////////////////start
//獲取cacheAccess_token
//這段程式碼實際開發過程中要寫成一個方法，我這裡為了演示方便寫在了一起。
StringBuffer buffer = new StringBuffer();
buffer.append("https://api.weixin.qq.com/cgi-bin/token?");
buffer.append("appid="+map.get("appid"));
buffer.append("&secret="+map.get("secret"));
buffer.append("&grant_type=client_credential");
String resultMsg = SendUtils.sendGet(buffer.toString(),"UTF-8");
///////////////////// end
JSONObject json = new JSONObject(resultMsg);
cacheAccess_token = json.getString("access_token");
jedis.set("access_token",cacheAccess_token,"NX","EX",3600);//單位是秒
}
//取出來為空的話則說明cacheTicket快取過期，重新獲取
if(null == cacheTicket){
////////////////////////// start
////獲得jsapi_ticket
StringBuffer buffer = new StringBuffer();
buffer.append("https://api.weixin.qq.com/cgi-bin/ticket/getticket?");
buffer.append("access_token="+access_token);
buffer.append("&type=jsapi");
String ticket = SendUtils.sendGet(buffer.toString(),"UTF-8");
///////////////////// end
JSONObject json2 = new JSONObject(ticket);
cacheTicket = json2.getString("ticket");
jedis.set("ticket",cacheTicket,3600);//單位是秒
}
//生成簽名
SortedMap<Object,Object> params = new TreeMap<Object,Object>();
params.put("timestamp",Long.toString(new Date().getTime()/1000));
params.put("noncestr",this.CreateNoncestr());
params.put("jsapi_ticket",cacheTicket);
params.put("url",map.get("url"));//url地址
StringBuffer sb = new StringBuffer();
Set es = params.entrySet();
Iterator it = es.iterator();
while(it.hasNext()) {
Map.Entry entry = (Map.Entry)it.next();
String k = (String)entry.getKey();
Object v = entry.getValue();
sb.append(k + "=" + v + "&");
}
String signStr = sb.toString().substring(0,sb.toString().length()-1);
String sign = Sha1.getSha1Sign(signStr);//簽名
Map<String,String> result = new HashMap<String,String>();
result.put("timestamp",(String)params.get("timestamp"));
result.put("noncestr",(String)params.get("noncestr"));
result.put("signature",sign);
result.put("appId",map.get("appid"));
return result;
return null;
}
private String CreateNoncestr() {
String chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
String res = "";
for (int i = 0; i < 16; i++) {
Random rd = new Random();
res += chars.charAt(rd.nextInt(chars.length() - 1));
}
return res;
}
}
輔助工具類：
/**
*
* 加密工具類
*
*/
public class Sha1 {
public static String getSha1Sign(String decript) {
try {
MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");
try {
digest.update(decript.getBytes("UTF-8"));
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
byte messageDigest[] = digest.digest();
// Create Hex String
StringBuffer hexString = new StringBuffer();
// 位元組陣列轉換為 十六進位制 數
for (int i = 0; i < messageDigest.length; i++) {
String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
if (shaHex.length() < 2) {
hexString.append(0);
}
hexString.append(shaHex);
}
return hexString.toString();
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return "";
}
}
http請求工具類：
/**
* http請求工具類
*
*/
public class SendUtils {
public static String sendGet(String url,String charset){
//新建客戶端
HttpClient httpclient = new HttpClient();
GetMethod getMethod = new GetMethod(url);
httpclient.getParams().setParameter(HttpMethodParams.HTTP_CONTENT_CHARSET,charset);
httpclient.executeMethod(getMethod);
String responseMsg = getMethod.getResponseBodyAsString();
return responseMsg;
}
}
以上是伺服器端的微信簽名的實現程式碼，下面介紹一下分享頁面中js的編寫。
第一步引入微信的js檔案：
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
第二步：
wx.config({
debug: false,appId: '${params.appId}',timestamp: '${params.timestamp}',nonceStr: '${params.noncestr}',signature:'${params.signature}',jsApiList: [
'onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'
]
});
wx.ready(function(){
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline','onMenuShareQZone'
]
});
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline','onMenuShareQZone'
]
});
/*分享到朋友圈*/
wx.onMenuShareTimeline({
title: '計劃書',// 分享標題
desc: '保險讓生活更美好！',// 分享描述
link: '${fenxurl}',// 分享連結
imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png',// 分享圖示
success: function () {
// 使用者確認分享後執行的回撥函式
},cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
/*分享給朋友*/
wx.onMenuShareAppMessage({
title: '計劃書',// 分享標題
desc: '保險讓生活更美好！',// 分享圖示
type: 'link',// 分享型別,music、video或link，不填預設為link
dataUrl: '',// 如果type是music或video，則要提供資料鏈接，預設為空
success: function () {
// 使用者確認分享後執行的回撥函式
alert("您已分享");
},cancel: function () {
// 使用者取消分享後執行的回撥函式
alert('您已取消分享');
}
});
wx.onMenuShareQQ({
title: '計劃書',cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
wx.onMenuShareWeibo({
title: '計劃書',cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
wx.onMenuShareQZone({
title: '計劃書',cancel: function () {
// 使用者取消分享後執行的回撥函式
}
});
});
至此整個微信的整個分享開發完成，上面的這些js檔案，都必須放在頁面上。
到此這篇關於微信公眾號網頁分享功能開發的示例程式碼的文章就介紹到這了,更多相關微信公眾號網頁分享內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！