基于靜態(tài)URL的微信分享自定義縮略圖及標(biāo)題和摘要

在靜態(tài)頁(yè)中實(shí)現(xiàn)微信分享自定義縮略圖比動(dòng)態(tài)頁(yè)分享要復(fù)雜。下面是示例頁(yè)面：

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)和靜,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18982081108

分享的效果（縮略圖及標(biāo)題、摘要是自己指定）：

基于靜態(tài)URL的微信分享自定義縮略圖及標(biāo)題和摘要

實(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)過(guò)程：

（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(){} 里書(shū)寫(xiě)JS代碼，注意在同一個(gè) JSP文件中，不要有超過(guò)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里的簽名代碼貼出來(lái)，主要功能是執(zhí)行微信簽名（需要針對(duì)當(dāng)前URL簽名）。

? ? ? ? private String wxSign(IDBSupportService service,HttpServletRequest request)?

? {

? ?Hashtable hst = new Hashtable();

? ?String errCode = "0";

? ?String errMsg = "查詢(xún)完畢！";

? ?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簽名不做具體講解，大家參考微信的開(kāi)發(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, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)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接口列表見(jiàn)附錄2

? ?});

? 注意上面的這些JS 都是在 $(document).ready(function(){} 里的代碼（在{}里面編寫(xiě)代碼）。

下面的代碼是在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)作

? ? ? ? // 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享確認(rèn)1");

? ? },

? ? cancel: function () {?

? ? ? ? // 用戶(hù)取消分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享取消1");

? ? }

? ? })

?wx.onMenuShareAppMessage({

? ? title: "中國(guó)文化網(wǎng)",

? ? link:? result.url,

? ? imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',

? ? success: function ()?

? //在這里記錄分享動(dòng)作

? ? ? ? // 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享確認(rèn)");

? ? },

? ? cancel: function () {?

? ? ? ? // 用戶(hù)取消分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享取消");

? ? }

? ?})

}) //wx.ready

整體參考下面的JS代碼：

? ?

?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({

? ? ? ? appId: result.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)

? timestamp:result.timestamp,?

? nonceStr:? result.nonceStr,?

? ? ?signature:? result.signature,?

? ? ? ? jsApiList: [

? ? ? ? 'onMenuShareTimeline',

? ? ? ? 'onMenuShareAppMessage'?

? ] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄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)作

? ? ? ? // 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享確認(rèn)1");

? ? },

? ? cancel: function () {?

? ? ? ? // 用戶(hù)取消分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享取消1");

? ? }

? ? })

?wx.onMenuShareAppMessage({ //分享給好友或微信群

? ? title: "中國(guó)文化網(wǎng)",

? ? link:? result.url,

? ? imgUrl: 'http://cn.chinaculture.org/portal/site/wenhua/images/weixinico.png',

? ? success: function ()?

? //在這里記錄分享動(dòng)作

? ? ? ? // 用戶(hù)確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享確認(rèn)");

? ? },

? ? cancel: function () {?

? ? ? ? // 用戶(hù)取消分享后執(zhí)行的回調(diào)函數(shù)

? //alert("分享取消");

? ? }

? ?})

}) //wx.ready

</script>

GetwxLink

網(wǎng)頁(yè)名稱(chēng)：基于靜態(tài)URL的微信分享自定義縮略圖及標(biāo)題和摘要
標(biāo)題URL：http://bm7419.com/article30/pcegso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、網(wǎng)站設(shè)計(jì)、軟件開(kāi)發(fā)、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容