基于静态URL的微信分享自定义缩略图及标题和摘要
在靜態頁中實現微信分享自定義縮略圖比動態頁分享要復雜。下面是示例頁面：
分享的效果（縮略圖及標題、摘要是自己指定）：
實現難點：
（1）URL是變化的，我們分享一次后，微信會自動在分享的地址后增加了一些參數，所以使用URL做簽名必須用最新的URL。
（2）AJAX調用服務器端計算簽名需要采用同步模式，就是要等到有返回結果才執行后面的wx.config
實現過程：
（1）頁面需要引用微信的JS:
? ? ? ? <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
? ? ? ?直接引用這個會導致網頁很慢，建議下載這個js部署到本地。
（2）定義一個全局的JS變量 var result =""; //這個result后面用于存儲服務器端返回的Json對象，存儲的是服務器端計算的微信時間戳、隨機碼、簽名字符串。
（3）在$(document).ready(function(){} 里書寫JS代碼，注意在同一個 JSP文件中，不要有超過1個$(document).ready(function(){}，否則其中有一個不執行。
（4）$(document).ready(function(){}里增加：
? ? ? ? var encodeLoc = EncodeUtf8(window.location.href);
? ? ? ? 這段代碼是將當前URL進行UTF-8轉碼。參考下面的JS,注意轉碼的 JS放在<script language="javascript"></script>里面，不要放在ready代碼中：
? ? ? ? ?function EncodeUtf8(s1)?
? {?
? ? ? var s = escape(s1);?
? ? ? var sa = s.split("%");?
? ? ? var retV ="";?
? ? ? if(sa[0] != "")?
? ? ? {?
? ? ? ? ?retV = sa[0];?
? ? ? }?
? ? ? for(var i = 1; i < sa.length; i ++)?
? ? ? {?
? ? ? ? ? ?if(sa[i].substring(0,1) == "u")?
? ? ? ? ? ?{?
? ? ? ? ? ? ? ?retV += Hex2Utf8(Str2Hex(sa[i].substring(1,5)));?
? ? ? ? ? ? ? ?
? ? ? ? ? ?}?
? ? ? ? ? ?else retV += "%" + sa[i];?
? ? ? }?
? ? ??
? ? ? return retV;?
? }?
? function Str2Hex(s)?
? {?
? ? ? var c = "";?
? ? ? var n;?
? ? ? var ss = "0123456789ABCDEF";?
? ? ? var digS = "";?
? ? ? for(var i = 0; i < s.length; i ++)?
? ? ? {?
? ? ? ? ?c = s.charAt(i);?
? ? ? ? ?n = ss.indexOf(c);?
? ? ? ? ?digS += Dec2Dig(eval(n));?
? ? ? ? ? ?
? ? ? }?
? ? ? //return value;?
? ? ? return digS;?
? }?
? function Dec2Dig(n1)?
? {?
? ? ? var s = "";?
? ? ? var n2 = 0;?
? ? ? for(var i = 0; i < 4; i++)?
? ? ? {?
? ? ? ? ?n2 = Math.pow(2,3 - i);?
? ? ? ? ?if(n1 >= n2)?
? ? ? ? ?{?
? ? ? ? ? ? s += '1';?
? ? ? ? ? ? n1 = n1 - n2;?
? ? ? ? ? }?
? ? ? ? ?else?
? ? ? ? ? s += '0';?
? ? ? ? ??
? ? ? }?
? ? ? return s;?
? ? ??
? }?
? function Dig2Dec(s)?
? {?
? ? ? var retV = 0;?
? ? ? if(s.length == 4)?
? ? ? {?
? ? ? ? ? for(var i = 0; i < 4; i ++)?
? ? ? ? ? {?
? ? ? ? ? ? ? retV += eval(s.charAt(i)) * Math.pow(2, 3 - i);?
? ? ? ? ? }?
? ? ? ? ? return retV;?
? ? ? }?
? ? ? return -1;?
? }?
? function Hex2Utf8(s)?
? {?
? ? ?var retS = "";?
? ? ?var tempS = "";?
? ? ?var ss = "";?
? ? ?if(s.length == 16)?
? ? ?{?
? ? ? ? ?tempS = "1110" + s.substring(0, 4);?
? ? ? ? ?tempS += "10" +? s.substring(4, 10);?
? ? ? ? ?tempS += "10" + s.substring(10,16);?
? ? ? ? ?var sss = "0123456789ABCDEF";?
? ? ? ? ?for(var i = 0; i < 3; i ++)?
? ? ? ? ?{?
? ? ? ? ? ? retS += "%";?
? ? ? ? ? ? ss = tempS.substring(i * 8, (eval(i)+1)*8);?
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ??
? ? ? ? ? ? retS += sss.charAt(Dig2Dec(ss.substring(0,4)));?
? ? ? ? ? ? retS += sss.charAt(Dig2Dec(ss.substring(4,8)));?
? ? ? ? ?}?
? ? ? ? ?return retS;?
? ? ?}?
? ? ?return "";?
? }
（5）在執行完 var encodeLoc = EncodeUtf8(window.location.href); 之后，執行AJAX調用：
? ? ? ?$.ajax({??
? ? ? ? ? ? ? ?type: "GET",??
? ? ? ? ? ? ? ?url: "/portal/api/cms/wtcms.jsp",??
? ? ? ? ? ? ? ?data: "act=wxSign&urladdr="+encodeLoc,//jsonText??
? ? ? ? ? ? ? ?//contentType: "application/json;charset=utf-8",??
? ? ? ? ? ? ? ?dataType: "json",??
? ? ? ? ? ? ? ?async: false,//同步? ------特別注意這里要使用同步模式，因為要等待返回結果獲取之后才允許執行微信腳本
? ? ? ? ? ? ? ?success: function (data)
? ? ? {
? ? ?//alert(data);
? ? ?result = data;//將data 賦值給全局變量result,data是json數據。
? ??
? ? ? ? ? ? ? ? ? // result = eval('(' + data + ')');??
? ? ? ? ? ? ? ?}, failure: function () {??
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?}??
? ? ? ? ? ?})? ;
? ? ? ? ?這里順便把后臺wtcms.jsp里的簽名代碼貼出來，主要功能是執行微信簽名（需要針對當前URL簽名）。
? ? ? ? private String wxSign(IDBSupportService service,HttpServletRequest request)?
? {
? ?Hashtable hst = new Hashtable();
? ?String errCode = "0";
? ?String errMsg = "查詢完畢！";
? ?String jsonData = "";
? ?String appId = "wx212121212212121";//微信服務號的appId
? ?String accountId = "c0001-1";
? ?String rand =? StringUtil.getUUID();? //微信隨機字符串
? ?long time = System.currentTimeMillis();
? ? ? ? ?String timestamp = Long.toString(time / 1000);
? ?String url = request.getParameter("urladdr");//網址
? ?String decodeUrl = "";
? ?try
? ?{
? ? decodeUrl = java.net.URLDecoder.decode(url,"utf-8");
? ?}
? ?catch(Exception ex)
? ?{}
??
? ?//簽名
? ?String sign = "";
??
? ?try
? ?{
? ? sign = CommonUtil.createShareSign(accountId,rand,timestamp,url); //如何執行微信JSSDK簽名不做具體講解，大家參考微信的開發文檔。
? ?}
? ?catch(Exception ex)
? ?{
? ? ? ? ? ? ?System.out.println("wtcms.jsp獲取微信簽名失敗!");
? ?}?
? ?hst.put("appId",appId);
? ?hst.put("nonceStr",rand);
? ?hst.put("signature",sign);
? ?hst.put("timestamp",new Long(timestamp));
? ?hst.put("ip",request.getHeader("X-Real-IP"));
? ?hst.put("url",decodeUrl);
? ?try
? ? ? ? ?{
? ? ? jsonData = JsonUtil.toJson(hst);
? ? ? ? }
? ? ? ? catch(Exception ex)
? ? ?{
? ? ?}
? return jsonData;
? }
AJAX調用完后，設置wx.config:
?wx.config({
? ? ? ? debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
? ? ? ? appId: result.appId, // 必填，公眾號的唯一標識
? timestamp:result.timestamp,?
? nonceStr:? result.nonceStr,?
? ? ?signature:? result.signature,?
? ? ? ? jsApiList: [
? ? ? ? 'onMenuShareTimeline',
? ? ? ? 'onMenuShareAppMessage'?
? ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
? ?});
? 注意上面的這些JS 都是在 $(document).ready(function(){} 里的代碼（在{}里面編寫代碼）。
下面的代碼是在ready之外的：
wx.ready(function () {
?wx.onMenuShareTimeline({
? ? title: "中國文化網",
? ? link: result.url,
?desc: "中國文化網（中文版）是由中國人民共和國文化部外聯局主辦，中外文化交流中心承辦的大型文化交流資訊（資源）網站。",
? ? imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
? ? success: function ()?
?{
? //在這里記錄分享動作
? ? ? ? // 用戶確認分享后執行的回調函數
? //alert("分享確認1");
? ? },
? ? cancel: function () {?
? ? ? ? // 用戶取消分享后執行的回調函數
? //alert("分享取消1");
? ? }
? ? })
?wx.onMenuShareAppMessage({
?
? ? title: "中國文化網",
? ? link:? result.url,
?desc: "中國文化網（中文版）是由中國人民共和國文化部外聯局主辦，中外文化交流中心承辦的大型文化交流資訊（資源）網站。",
? ? imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
? ? success: function ()?
?{
? //在這里記錄分享動作
? ? ? ? // 用戶確認分享后執行的回調函數
? //alert("分享確認");
? ? },
? ? cancel: function () {?
? ? ? ? // 用戶取消分享后執行的回調函數
? //alert("分享取消");
? ? }
? ?})
}) //wx.ready
整體參考下面的JS代碼：
<script src="/portal/apps/wd/vip/js/jweixin-1.0.0.js"> </script>
? ? <!--組件依賴js end-->
<script language="javascript">
?var result ="";
? ? $(document).ready(function(){
? ? ? ? var mySwiper = new Swiper('.index-banner',{
? ? ? ? ? ? pagination: '.index-pagination',
? ? ? ? ? ? loop:true,
? ? ? ? ? ? grabCursor: true,
? ? ? ? ? ? autoplay:3000,
? ? ? ? ? ? paginationClickable: true,
? ? ? ? ? ? onSlideChangeEnd : function() {
? ? ? ? ? ? ? ? var bannerTitle = $(".index-banner ul li.swiper-slide-active img").attr("title");
? ? ? ? ? ? ? ? $(".banner-title p").text(bannerTitle);
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? var bannerFstTitle = $(".index-banner ul li.swiper-slide-active img").attr("title");
? ? ? ? $(".banner-title p").text(bannerFstTitle);
? ? ? ? fjcHeight();
? ? ? ? fontSizeHack();
? ? ? ? $(".index-banner ul li img").show();
? ??
? var encodeLoc = EncodeUtf8(window.location.href); //取靜態頁面的url
? ? ??
? ? ? ? $.ajax({??
? ? ? ? ? ? ? ?type: "GET",??
? ? ? ? ? ? ? ?url: "/portal/api/cms/wtcms.jsp",??
? ? ? ? ? ? ? ?data: "act=wxSign&urladdr="+encodeLoc,//jsonText??
? ? ? ? ? ? ? ?//contentType: "application/json;charset=utf-8",??
? ? ? ? ? ? ? ?dataType: "json",??
? ? ? ? ? ? ? ?async: false,//同步??
? ? ? ? ? ? ? ?success: function (data)
? ? ? {
? ? ?//alert(data);
? ? ?result = data;
? ??
? ? ? ? ? ? ? ? ? // result = eval('(' + data + ')');??
? ? ? ? ? ? ? ?}, failure: function () {??
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?}??
? ? ? ? ? ?})? ;
?
? ?//alert(result.ip+"/"+result.timestamp+"/"+result.nonceStr+"/"+result.signature+"/"+result.url);
? ? ?wx.config({
? ? ? ? debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
? ? ? ? appId: result.appId, // 必填，公眾號的唯一標識
? timestamp:result.timestamp,?
? nonceStr:? result.nonceStr,?
? ? ?signature:? result.signature,?
? ? ? ? jsApiList: [
? ? ? ? 'onMenuShareTimeline',
? ? ? ? 'onMenuShareAppMessage'?
? ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
? ?});
})
?
wx.ready(function () {
?wx.onMenuShareTimeline({ //朋友圈分享
? ? title: "中國文化網", //自定義分享標題
? ? link: result.url,
?desc: "中國文化網（中文版）是由中國人民共和國文化部外聯局主辦，中外文化交流中心承辦的大型文化交流資訊（資源）網站。", //自定義分享摘要
? ? imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',//自定義分享時的縮略圖
? ? success: function ()?
?{
? //在這里記錄分享動作
? ? ? ? // 用戶確認分享后執行的回調函數
? //alert("分享確認1");
? ? },
? ? cancel: function () {?
? ? ? ? // 用戶取消分享后執行的回調函數
? //alert("分享取消1");
? ? }
? ? })
?wx.onMenuShareAppMessage({ //分享給好友或微信群
?
? ? title: "中國文化網",
? ? link:? result.url,
?desc: "中國文化網（中文版）是由中國人民共和國文化部外聯局主辦，中外文化交流中心承辦的大型文化交流資訊（資源）網站。",
? ? imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
? ? success: function ()?
?{
? //在這里記錄分享動作
? ? ? ? // 用戶確認分享后執行的回調函數
? //alert("分享確認");
? ? },
? ? cancel: function () {?
? ? ? ? // 用戶取消分享后執行的回調函數
? //alert("分享取消");
? ? }
? ?})
}) //wx.ready
</script>
GetwxLink
轉載于:https://blog.51cto.com/14362405/2401333
總結
以上是生活随笔為你收集整理的基于静态URL的微信分享自定义缩略图及标题和摘要的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 好程序员大数据教程：SparkShell
- 下一篇： 网络编程 TCP