基于靜態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