在靜態(tài)頁(yè)中實(shí)現(xiàn)微信分享自定義縮略圖比動(dòng)態(tài)頁(yè)分享要復(fù)雜。下面是示例頁(yè)面：
分享的效果（縮略圖及標(biāo)題、摘要是自己指定）：
工具：GetwxLink
實(shí)現(xiàn)難點(diǎn)：
（1）URL是變化的疙咸，我們分享一次后竿拆，微信會(huì)自動(dòng)在分享的地址后增加了一些參數(shù)怖辆，所以使用URL做簽名必須用最新的URL。
（2）AJAX調(diào)用服務(wù)器端計(jì)算簽名需要采用同步模式扭弧，就是要等到有返回結(jié)果才執(zhí)行后面的wx.config
實(shí)現(xiàn)過程：
（1）頁(yè)面需要引用微信的JS:
????????<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
???????直接引用這個(gè)會(huì)導(dǎo)致網(wǎng)頁(yè)很慢，建議下載這個(gè)js部署到本地记舆。
（2）定義一個(gè)全局的JS變量 var result =""; //這個(gè)result后面用于存儲(chǔ)服務(wù)器端返回的Json對(duì)象鸽捻，存儲(chǔ)的是服務(wù)器端計(jì)算的微信時(shí)間戳、隨機(jī)碼泽腮、簽名字符串泊愧。
（3）在$(document).ready(function(){} 里書寫JS代碼，注意在同一個(gè) JSP文件中盛正，不要有超過1個(gè)$(document).ready(function(){}删咱，否則其中有一個(gè)不執(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 () {??
???????????????}??
???????????})??;
?????????這里順便把后臺(tái)wtcms.jsp里的簽名代碼貼出來，主要功能是執(zhí)行微信簽名（需要針對(duì)當(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ù)號(hào)的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的返回值會(huì)在客戶端alert出來复隆，若要查看傳入的參數(shù)，可以在pc端打開姆涩，參數(shù)信息會(huì)通過log打出挽拂，僅在pc端時(shí)才會(huì)打印。
????????appId: result.appId, // 必填骨饿，公眾號(hào)的唯一標(biāo)識(shí)
??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: "中國(guó)文化網(wǎng)",
????link: result.url,
?desc: "中國(guó)文化網(wǎng)（中文版）是由中國(guó)人民共和國(guó)文化部外聯(lián)局主辦绒北，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站。",
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
????success: function ()?
?{
??//在這里記錄分享動(dòng)作
????????// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享確認(rèn)1");
????},
????cancel: function () {?
????????// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享取消1");
????}
????})
?wx.onMenuShareAppMessage({
????title: "中國(guó)文化網(wǎng)",
????link:??result.url,
?desc: "中國(guó)文化網(wǎng)（中文版）是由中國(guó)人民共和國(guó)文化部外聯(lián)局主辦察署，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站镇饮。",
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
????success: function ()?
?{
??//在這里記錄分享動(dòng)作
????????// 用戶確認(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)頁(yè)面的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的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)箕母，可以在pc端打開储藐，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印嘶是。
????????appId: result.appId, // 必填钙勃，公眾號(hào)的唯一標(biāo)識(shí)
??timestamp:result.timestamp,?
??nonceStr:??result.nonceStr,?
?????signature:??result.signature,?
????????jsApiList: [
????????'onMenuShareTimeline',
????????'onMenuShareAppMessage'?
??] // 必填，需要使用的JS接口列表聂喇，所有JS接口列表見附錄2
???});
})
wx.ready(function () {
?wx.onMenuShareTimeline({?//朋友圈分享
????title: "中國(guó)文化網(wǎng)",?//自定義分享標(biāo)題
????link: result.url,
?desc: "中國(guó)文化網(wǎng)（中文版）是由中國(guó)人民共和國(guó)文化部外聯(lián)局主辦辖源，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站。",?//自定義分享摘要
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',//自定義分享時(shí)的縮略圖
????success: function ()?
?{
??//在這里記錄分享動(dòng)作
????????// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享確認(rèn)1");
????},
????cancel: function () {?
????????// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享取消1");
????}
????})
?wx.onMenuShareAppMessage({?//分享給好友或微信群
????title: "中國(guó)文化網(wǎng)",
????link:??result.url,
?desc: "中國(guó)文化網(wǎng)（中文版）是由中國(guó)人民共和國(guó)文化部外聯(lián)局主辦希太，中外文化交流中心承辦的大型文化交流資訊（資源）網(wǎng)站克饶。",
????imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',
????success: function ()?
?{
??//在這里記錄分享動(dòng)作
????????// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享確認(rèn)");
????},
????cancel: function () {?
????????// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
??//alert("分享取消");
????}
???})
}) //wx.ready
</script>
