织梦微信分享缩略图设置方法

缩略图不显示的原因

微信内分享织梦文章时，缩略图经常空白或显示默认图标。核心原因有三点：

未配置微信JS-SDK：微信不再自动抓取页面图片，必须通过JS-SDK的onMenuShareAppMessage指定imgUrl。
缩略图URL非绝对路径：微信要求imgUrl为完整的http(s)绝对地址，织梦litpic默认是相对路径。
图片尺寸不达标：缩略图需大于300×300px，且体积不超过32KB，否则微信会忽略。

第一步：公众号配置

登录微信公众平台，在"设置——公众号设置——功能设置"中配置JS接口安全域名，填写不带http的域名（如www.example.com），需上传校验文件到网站根目录。

在"开发——基本配置"中获取AppID和AppSecret，记录下来后续后端生成签名用。

第二步：后端签名生成

新建/plus/wxsign.php生成JS-SDK签名：

require_once(dirname(__FILE__).'/../include/common.inc.php');
$appid='wx1234567890';
$secret='你的AppSecret';

// 获取access_token（缓存7200秒）
$tokenFile=DEDEDATA.'/wx_token.txt';
if(file_exists($tokenFile) && (time()-filemtime($tokenFile))<7200){
    $token=file_get_contents($tokenFile);
}else{
    $url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";
    $token=json_decode(file_get_contents($url),true)['access_token'];
    file_put_contents($tokenFile,$token);
}

// 获取jsapi_ticket（缓存7200秒）
$ticketFile=DEDEDATA.'/wx_ticket.txt';
if(file_exists($ticketFile) && (time()-filemtime($ticketFile))<7200){
    $ticket=file_get_contents($ticketFile);
}else{
    $url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$token";
    $ticket=json_decode(file_get_contents($url),true)['ticket'];
    file_put_contents($ticketFile,$ticket);
}

// 生成签名
$noncestr=md5(uniqid());
$timestamp=time();
$url=$_SERVER['HTTP_REFERER'];
$string="jsapi_ticket=$ticket&noncestr=$noncestr×tamp=$timestamp&url=$url";
$signature=sha1($string);

echo json_encode(array(
    'appid'=>$appid,'timestamp'=>$timestamp,
    'noncestr'=>$noncestr,'signature'=>$signature
));

access_token和jsapi_ticket有7200秒缓存且每日获取次数受限，必须做服务端缓存，否则很快耗尽配额。

第三步：前端引入JS-SDK

在文章模板<head>中引入：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
$.get('/plus/wxsign.php',function(res){
    wx.config({
        debug:false,
        appId:res.appid,
        timestamp:res.timestamp,
        nonceStr:res.noncestr,
        signature:res.signature,
        jsApiList:['onMenuShareAppMessage','onMenuShareTimeline']
    });
    wx.ready(function(){
        var shareData={
            title:'{dede:field.title/}',
            desc:'{dede:field.description function="html2text(@me)"/}',
            link:location.href,
            imgUrl:'{dede:global.cfg_cmshost/}{dede:field.litpic/}'
        };
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareTimeline(shareData);
    });
},'json');
</script>

缩略图预览

缩略图URL处理要点

拼接绝对路径

织梦{dede:field.litpic/}输出形如/uploads/allimg/2024/01/xxx.jpg，需拼上域名：

imgUrl:'{dede:global.cfg_cmshost/}{dede:field.litpic/}'
// 结果：https://www.example.com/uploads/allimg/2024/01/xxx.jpg

也可以用{dede:global.cfg_basehost/}变量，注意它是否已包含https://前缀。

无缩略图时给默认图

文章未设置缩略图时litpic为空，需兜底：

var pic='{dede:field.litpic/}';
if(!pic || pic.indexOf('http')===-1 && pic.length<10){
    pic='/images/wx-default.jpg';
}
var imgUrl='{dede:global.cfg_cmshost/}' + pic;

常见故障排查

signature签名无效

用微信官方的JS-SDK签名校验工具对比。最常见原因是url参数取错——必须取当前页面URL（含?后面的参数），且不能encode。建议用$_SERVER['HTTP_REFERER']或前端传location.href.split('#')[0]给后端。

缩略图仍不显示

用浏览器直接访问imgUrl，确认能打开。微信对图片有白名单限制，imgUrl的域名必须与JS接口安全域名一致。CDN域名需在公众号后台额外配置。

debug模式报错invalid domain

安全域名配置有误或未生效。注意域名不带http://，且校验文件必须能通过http(s)://域名/校验文件名访问到。

后续优化方向

新版本微信已推出updateAppMessageShareData和updateTimelineShareData接口替代旧版API，建议优先使用新接口以兼容未来版本。同时为不同分类的文章预设专属分享缩略图模板，统一品牌视觉，提升分享时的识别度与点击率。