當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

基于静态URL的微信分享自定义缩略图及标题和摘要

發(fā)布時(shí)間：2025/5/22 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了基于静态URL的微信分享自定义缩略图及标题和摘要小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

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

實(shí)現(xiàn)難點(diǎn)：

（1）URL是變化的，我們分享一次后，微信會自動在分享的地址后增加了一些參數(shù)，所以使用URL做簽名必須用最新的URL。

（2）AJAX調(diào)用服務(wù)器端計(jì)算簽名需要采用同步模式，就是要等到有返回結(jié)果才執(zhí)行后面的wx.config

實(shí)現(xiàn)過程：

（1）頁面需要引用微信的JS:

? ? ? ? <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>

? ? ? ?直接引用這個(gè)會導(dǎo)致網(wǎng)頁很慢，建議下載這個(gè)js部署到本地。

（2）定義一個(gè)全局的JS變量 var result =""; //這個(gè)result后面用于存儲服務(wù)器端返回的Json對象，存儲的是服務(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 () {??

? ? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?}??

? ? ? ? ? ?})? ;

? ? ? ? ?這里順便把后臺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端時(shí)才會打印。

? ? ? ? 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代碼：

? ?

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

? ? ? ? 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',//自定義分享時(shí)的縮略圖

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

GetwxLink

轉(zhuǎn)載于:https://blog.51cto.com/14362405/2401333

總結(jié)

以上是生活随笔為你收集整理的基于静态URL的微信分享自定义缩略图及标题和摘要的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：好程序员大数据教程：SparkShell
下一篇：网络编程 TCP