微信公眾號(hào)網(wǎng)頁(yè)分享功能開發(fā)的示例代碼
現(xiàn)在每天都可以看到很多微信分享的鏈接上面有網(wǎng)站或者商家的自定義的分享標(biāo)題,和分享鏈接的描述及分享出去的圖像,例如下面的分享出去的鏈接:
上面這個(gè)是微信的js-SDK頁(yè)面分享給微信好友在聊天列表中顯示的視覺效果。
微信JS-SDK Demo :這個(gè)是微信網(wǎng)頁(yè)分享出去的標(biāo)題。
微信JS-SDK,幫助第三方為用戶提供更優(yōu)質(zhì)的移動(dòng)web服務(wù):這個(gè)是被分享的這個(gè)頁(yè)面的分享描述。
微信圖標(biāo):這個(gè)就是自己網(wǎng)站或者自己自定義的圖像。
上面這個(gè)是微信官方網(wǎng)頁(yè)分享出去的定義描述,那么怎樣實(shí)現(xiàn)自己網(wǎng)站網(wǎng)頁(yè)的自定義分享的標(biāo)題,描述及分享出去的顯示圖片呢,下面就具體的來(lái)探討一下微信網(wǎng)頁(yè)第三方分享自定的實(shí)現(xiàn)方式。
關(guān)于微信網(wǎng)頁(yè)分享自定義主要有兩方面的工作需要我們來(lái)做,一是:分享頁(yè)面的js分享代碼的編寫,二是:微信分享網(wǎng)頁(yè)的鏈接地址簽名。
首先來(lái)看一下網(wǎng)頁(yè)的連接地址簽名,這個(gè)功能主要是在服務(wù)端來(lái)時(shí)實(shí)現(xiàn)。
第一步:基礎(chǔ)數(shù)據(jù)的準(zhǔn)備,需要如下數(shù)據(jù)信息:
APPID:微信公眾號(hào)的id; APP_SECRECT:公眾號(hào)號(hào)的密鑰。簽名的網(wǎng)站域名(這個(gè)建議配置在配置文件中)。
第二步:微信簽名數(shù)據(jù)的準(zhǔn)備:
appid,secret,url將這三個(gè)參數(shù)放入map中, 鍵值為:appid=微信公眾號(hào)的id,secret=APP_SECRECT,url=網(wǎng)站的域名+網(wǎng)頁(yè)的請(qǐng)求地址+請(qǐng)求的參數(shù)。
代碼的實(shí)現(xiàn)方式如下:
1. controller層的代碼實(shí)現(xiàn):
@RequestMapping("cover") public String identifyCover(HttpServletRequest request, HttpServletResponse response) //微信分享授權(quán)開始 String appId = ;//取項(xiàng)目中配置的公眾號(hào)id String secret = ;//取項(xiàng)目中配置的公眾號(hào)密鑰 //例如我們有一個(gè)分享的鏈接為:http://test.weixinfwenx.cn/project/fenxiang.do?id=1&name=2; //那么domainAddr = http://test.weixinfwenx.cn,這個(gè)可以動(dòng)態(tài)的配置在項(xiàng)目里,方便測(cè)試環(huán)境和生產(chǎn) //域名的切換 String domainAddr = "";//項(xiàng)目中配置的網(wǎng)站的域名 //這個(gè)取的是鏈接上的參數(shù),例如在上面的這個(gè)鏈接中,id=1&name=2就是我們要?jiǎng)討B(tài)去的參數(shù),可能有人 //會(huì)想到,這個(gè)兩個(gè)參數(shù)直接寫在地址中不是挺簡(jiǎn)單的為啥還要?jiǎng)討B(tài)去獲取這個(gè)參數(shù)呢;在這里我們引出了一 //個(gè)微信二次分享的問題,就是別人轉(zhuǎn)發(fā)的鏈接給你,然后你再轉(zhuǎn)發(fā)給別人,在你轉(zhuǎn)發(fā)給別人后這個(gè)鏈接的簽 //名就會(huì)失敗,為啥呢,因?yàn)榻?jīng)過再次轉(zhuǎn)發(fā)的鏈接,微信會(huì)自動(dòng)加上一些自己的參數(shù),這樣會(huì)導(dǎo)致頁(yè)面上微信 //分享的鏈接和簽名的鏈接不一致。直接導(dǎo)致自定義的標(biāo)題和鏈接描述,顯示失敗,失敗原因是微信默認(rèn)的在 //我們的分享鏈接上加上了&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); //這個(gè)地址是傳給頁(yè)面使用 request.setAttribute("fenxurl", url); //開始微信分享鏈接簽名 Map<String, String> params = weixinService.weixinjsIntefaceSign(map); request.setAttribute("params", params); return "自己的頁(yè)面";
2.service層的實(shí)現(xiàn)代碼:
接口:
public interface weixinService{ /** * @Title: weixinjsIntefaceSign * @Description: 微信js接口授權(quán) * @param map * @return * @return: Map<String,String> */ public Map<String,String> weixinjsIntefaceSign(Map<String,String> map);
接口實(shí)現(xiàn)類:
public class weixinServiceImpl implements weixinService{ public Map<String, String> weixinjsIntefaceSign(Map<String, String> map){ //查看緩存數(shù)據(jù)是否存在 String cacheAccess_token = jedis.get("access_token"); String cacheTicket = jedis.get("ticket"); //取出來(lái)為空的話則說明cacheAccess_token緩存過期,重新獲取 if(null == cacheAccess_token){ ///////////////////////////////start //獲取cacheAccess_token //這段代碼實(shí)際開發(fā)過程中要寫成一個(gè)方法,我這里為了演示方便寫在了一起。 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);//單位是秒 } //取出來(lái)為空的話則說明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, "NX", "EX", 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(); // 字節(jié)數(shù)組轉(zhuǎn)換為 十六進(jìn)制 數(shù) 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請(qǐng)求工具類:
/** * http請(qǐng)求工具類 * */ 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; } }
以上是服務(wù)器端的微信簽名的實(shí)現(xiàn)代碼,下面介紹一下分享頁(yè)面中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', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); wx.checkJsApi({ jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); /*分享到朋友圈*/ wx.onMenuShareTimeline({ title: '計(jì)劃書', // 分享標(biāo)題 desc: '保險(xiǎn)讓生活更美好!', // 分享描述 link: '${fenxurl}', // 分享鏈接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享圖標(biāo) success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); /*分享給朋友*/ wx.onMenuShareAppMessage({ title: '計(jì)劃書', // 分享標(biāo)題 desc: '保險(xiǎn)讓生活更美好!', // 分享描述 link: '${fenxurl}', // 分享鏈接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享圖標(biāo) type: 'link', // 分享類型,music、video或link,不填默認(rèn)為link dataUrl: '', // 如果type是music或video,則要提供數(shù)據(jù)鏈接,默認(rèn)為空 success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) alert("您已分享"); }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) alert('您已取消分享'); } }); wx.onMenuShareQQ({ title: '計(jì)劃書', // 分享標(biāo)題 desc: '保險(xiǎn)讓生活更美好!', // 分享描述 link: '${fenxurl}', // 分享鏈接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享圖標(biāo) success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); wx.onMenuShareWeibo({ title: '計(jì)劃書', // 分享標(biāo)題 desc: '保險(xiǎn)讓生活更美好!', // 分享描述 link: '${fenxurl}', // 分享鏈接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享圖標(biāo) success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); wx.onMenuShareQZone({ title: '計(jì)劃書', // 分享標(biāo)題 desc: '保險(xiǎn)讓生活更美好!', // 分享描述 link: '${fenxurl}', // 分享鏈接 imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享圖標(biāo) success: function () { // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù) }, cancel: function () { // 用戶取消分享后執(zhí)行的回調(diào)函數(shù) } }); });
至此整個(gè)微信的整個(gè)分享開發(fā)完成,上面的這些js文件,都必須放在頁(yè)面上。
到此這篇關(guān)于微信公眾號(hào)網(wǎng)頁(yè)分享功能開發(fā)的示例代碼的文章就介紹到這了,更多相關(guān)微信公眾號(hào)網(wǎng)頁(yè)分享內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過直接給對(duì)象添加屬性的方式來(lái)增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼
本篇文章主要是對(duì)動(dòng)態(tài)添加刪除表格行的js實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-02-02JS中new?Date().Format("yyyy-MM-dd")?報(bào)錯(cuò)的解決
這篇文章主要介紹了JS中new?Date().Format("yyyy-MM-dd")?報(bào)錯(cuò)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01

JavaScript全屏和退出全屏事件總結(jié)(附代碼)

微信小程序?qū)崿F(xiàn)點(diǎn)擊出現(xiàn)彈窗

javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果

基于JavaScript實(shí)現(xiàn)輪播圖效果