在静态页中实现微信分享自定义缩略图比动态页分享要复杂。下面是示例页面:
分享的效果(缩略图及标题、摘要是自己指定):
实现难点:
(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;