在靜態(tài)頁中實(shí)現(xiàn)微信分享自定義縮略圖比動態(tài)頁分享要復(fù)雜屁倔。下面是示例頁面：
分享的效果（縮略圖及標(biāo)題驱证、摘要是自己指定）：
實(shí)現(xiàn)工具：GetwxLink
實(shí)現(xiàn)難點(diǎn)：
（1）URL是變化的梗搅，我們分享一次后臼膏，微信會自動在分享的地址后增加了一些參數(shù)车要，所以使用URL做簽名必須用最新的URL志衍。
（2）AJAX調(diào)用服務(wù)器端計算簽名需要采用同步模式抬旺，就是要等到有返回結(jié)果才執(zhí)行后面的wx.config
實(shí)現(xiàn)過程：
（1）頁面需要引用微信的JS:
????????<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
???????直接引用這個會導(dǎo)致網(wǎng)頁很慢弊予，建議下載這個js部署到本地。
（2）定義一個全局的JS變量 var result =""; //這個result后面用于存儲服務(wù)器端返回的Json對象开财，存儲的是服務(wù)器端計算的微信時間戳汉柒、隨機(jī)碼误褪、簽名字符串。
（3）在$(document).ready(function(){} 里書寫JS代碼碾褂，注意在同一個 JSP文件中兽间，不要有超過1個$(document).ready(function(){}，否則其中有一個不執(zhí)行正塌。
（4）$(document).ready(function(){}里增加：
????????var encodeLoc = EncodeUtf8(window.location.href);
????????這段代碼是將當(dāng)前URL進(jìn)行UTF-8轉(zhuǎn)碼嘀略。參考下面的JS,注意轉(zhuǎn)碼的 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）在執(zhí)行完 var encodeLoc = EncodeUtf8(window.location.href); 之后乓诽，執(zhí)行AJAX調(diào)用：
???????$.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,//同步??------特別注意這里要使用同步模式帜羊，因?yàn)橐却祷亟Y(jié)果獲取之后才允許執(zhí)行微信腳本
???????????????success: function (data)
??????{
?????//alert(data);
?????result = data;//將data?賦值給全局變量result,data是json數(shù)據(jù)。
??????????????????// result = eval('(' + data + ')');??
???????????????}, failure: function () {??
???????????????}??
???????????})??;
?????????這里順便把后臺wtcms.jsp里的簽名代碼貼出來鸠天，主要功能是執(zhí)行微信簽名（需要針對當(dāng)前URL簽名）讼育。
????????private String wxSign(IDBSupportService service,HttpServletRequest request)?
??{
???Hashtable hst = new Hashtable();
???String errCode = "0";
???String errMsg = "查詢完畢！";
???String jsonData = "";
???String appId = "wx212121212212121";//微信服務(wù)號的appId
???String accountId = "c0001-1";
???String rand =??StringUtil.getUUID();??//微信隨機(jī)字符串
???long time = System.currentTimeMillis();
?????????String timestamp = Long.toString(time / 1000);
???String url = request.getParameter("urladdr");//網(wǎng)址
???String decodeUrl = "";
???try
???{
????decodeUrl = java.net.URLDecoder.decode(url,"utf-8");
???}
???catch(Exception ex)
???{}
???//簽名
???String sign = "";
???try
???{
????sign = CommonUtil.createShareSign(accountId,rand,timestamp,url);?//如何執(zhí)行微信JSSDK簽名不做具體講解粮宛，大家參考微信的開發(fā)文檔窥淆。
???}
???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調(diào)用完后卖宠，設(shè)置wx.config:
?wx.config({
????????debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來巍杈，若要查看傳入的參數(shù)，可以在pc端打開扛伍，參數(shù)信息會通過log打出筷畦，僅在pc端時才會打印。
????????appId: result.appId, // 必填刺洒，公眾號的唯一標(biāo)識
??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: "中國文化網(wǎng)",
????link: result.url,
?desc: "中國文化網(wǎng)（中文版）是由中國人民共和國文化部外聯(lián)局主辦鼎文，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站。",
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
????success: function ()?
?{
??//在這里記錄分享動作
????????// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享確認(rèn)1");
????},
????cancel: function () {?
????????// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享取消1");
????}
????})
?wx.onMenuShareAppMessage({
????title: "中國文化網(wǎng)",
????link:??result.url,
?desc: "中國文化網(wǎng)（中文版）是由中國人民共和國文化部外聯(lián)局主辦因俐，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站拇惋。",
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
????success: function ()?
?{
??//在這里記錄分享動作
????????// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享確認(rèn)");
????},
????cancel: function () {?
????????// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
??//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); //取靜態(tài)頁面的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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)抹剩，可以在pc端打開撑帖，參數(shù)信息會通過log打出，僅在pc端時才會打印澳眷。
????????appId: result.appId, // 必填胡嘿，公眾號的唯一標(biāo)識
??timestamp:result.timestamp,?
??nonceStr:??result.nonceStr,?
?????signature:??result.signature,?
????????jsApiList: [
????????'onMenuShareTimeline',
????????'onMenuShareAppMessage'?
??] // 必填，需要使用的JS接口列表钳踊，所有JS接口列表見附錄2
???});
})
wx.ready(function () {
?wx.onMenuShareTimeline({?//朋友圈分享
????title: "中國文化網(wǎng)",?//自定義分享標(biāo)題
????link: result.url,
?desc: "中國文化網(wǎng)（中文版）是由中國人民共和國文化部外聯(lián)局主辦衷敌，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站勿侯。",?//自定義分享摘要
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',//自定義分享時的縮略圖
????success: function ()?
?{
??//在這里記錄分享動作
????????// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享確認(rèn)1");
????},
????cancel: function () {?
????????// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享取消1");
????}
????})
?wx.onMenuShareAppMessage({?//分享給好友或微信群
????title: "中國文化網(wǎng)",
????link:??result.url,
?desc: "中國文化網(wǎng)（中文版）是由中國人民共和國文化部外聯(lián)局主辦，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站缴罗。",
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
????success: function ()?
?{
??//在這里記錄分享動作
????????// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享確認(rèn)");
????},
????cancel: function () {?
????????// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享取消");
????}
???})
}) //wx.ready
</script>
