DedeCMS微信分享文章带缩略图和描述

通过微信进行文章的分享可以获得一定的流量，帮助提升网站IP、PV，特别对新网站来说还是比较重要的。当然，想获得较多的数据的前提是你的圈子有相应的用户群体。

在靠转发、点赞获得收益的订阅号时代，活跃在朋友圈分享的文章大都来自微信公众号，个人、机构纷纷开通自己的公众号，赚得盆满钵满。随着新兴自媒体的兴起（微信公众号其实也是自媒体），流量开始往更开放的自媒体平台倾斜，依靠大数据的支持头条系、百度系纷纷占领了诸多流量。

自媒体和传统的公众号由于内容分发机制不同，只要符合平台的规则，自媒体创作的内容（文章、视频）就可以推送给对该领域感兴趣的个人读者、观众，并不需要“中间人”的分享转发，因此一些头部作者或者所谓的大V在自媒体时代的不再是主导。

作者们可以在自有网站/博客、新浪博客/微博，抑或是其他自媒体平台上创作内容，都可以通过朋友圈进行分享。微信公众号本身的分享功能比较强大，但一般的自有网站分享的时候没有缩略图、描述等，需要接入微信系统是需要做JSSDK。下面介绍一下采用DedeCMS织梦做的网站接入JSSDK的方法。

网上有很多种解决方案，大家可以根据自己需求选择方案，官方的说明比较简单，参考着做就行了。

注意：目前个人账号无法进行实名认证，因此要用企业账号进行以下操作

1.绑定域名

微信公众平台 -> 公众号设置  -> 功能设置 ->JS接口安全域名

填写所对应的域名即可，可以填写多个，注意带www或者不带是不同的域名，按实际情况填写，不能频繁修改安全域名。

2.引入JS文件

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

目前最新版的是1.6.0版本的JS，支持 "updateTimelineShareData" 和 "updateAppMessageShareData" 接口，但1.0.1版本附录并不支持，老的 "onMenuShareTimeline" 和 "onMenuShareAppMessage" 即将即将被弃用。但经过测试后，还是1.4.0版本的JS和老的接口能正常使用，另外一些“摇一摇周边”的功能还要沿用1.1.0版本，估计是新老接口的更新换代还是需要一段时间。

建议大家采用1.4.0版本，在引入之前还需要引入JQ库，至于什么版本大家自己试一下即可，吖七采用的如下引入办法，经测试，以下JS引入放在</head>前或</body>前其实都没多大问题。

3.配置文件

HTTPS对HTTP文件不信任，因此引入文件采用“//”的用法，普通网站HTTP协议的可以直接写“http://”，支持HTTPS可以用“//”或“https://”的写法。

<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
 var url = encodeURIComponent(location.href.split("#")[0]);
 $.ajax({
   type: "get",
   url: "{dede:global.cfg_basehost/}/wechat.php?link=" + url, //{dede:global.cfg_basehost/}也可以不要，wechat.php文件放在根目录即可
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   success: function(e) {
   var d = e.appid,
   i = e.timestamp,
   t = e.noncestr,
   n = e.signature;
   wx.config({
     debug: 0,//如果分享失败，把0改成1开启查看错误提示
     appId: d,
     timestamp: i,
     nonceStr: t,
     signature: n,
     jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"]
    }), 
    wx.ready(function() {
     wx.onMenuShareTimeline({
     title: "{dede:field.title function=html2text(@me)/}",
     desc: "{dede:field.description function=html2text(@me)/}",
     link: "{dede:field.id runphp='yes'}$result=GetOneArchive(@me);@me=$result['arcurl'];{/dede:field.id}",
     imgUrl: "{dede:field.litpic/}"
    }), 
    wx.onMenuShareAppMessage({
     title: "{dede:field.title function=html2text(@me)/}",
     desc: "{dede:field.description function=html2text(@me)/}",
     link: "{dede:field.id runphp='yes'}$result=GetOneArchive(@me);@me=$result['arcurl'];{/dede:field.id}",
     imgUrl: "{dede:field.litpic/}"
    })
   })
  }
 });
</script>

如果你的移动端和PC端分离，图片、链接应该用对应的移动端绝对路径。在网站根目录新建一个wechat.php的文件，内容如下

<?php
error_reporting(0);
$appid = 'xxxx'; //此处填写绑定的微信公众号的APPID
$appsecret = 'xxxxxx'; //此处填写绑定的微信公众号的密钥APPSECRET
function getJsApiTicket($appid, $appsecret)
{
    $data = json_decode(file_get_contents("jsapi_ticket.json"));
    if (is_null($data) || $data->expire_time < time()) {
        $access_token = getAccessToken($appid, $appsecret);
        // 如果是企业号用以下 URL 获取 ticket
        $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$access_token}";
        $res = json_decode(httpGet($url));
        if (!is_null($res)) {
            $ticket = $res->ticket;
            if ($ticket) {
                $newRes = array();
                $newRes['expire_time'] = time() + 7000;
                $newRes['jsapi_ticket'] = $ticket;
                $fp = fopen("jsapi_ticket.json", "w");
                fwrite($fp, json_encode($newRes));
                fclose($fp);
            }
        }
    } else {
        $ticket = $data->jsapi_ticket;
    }
    return $ticket;
}
function getAccessToken($appid, $appsecret)
{
    $data = json_decode(file_get_contents("access_token.json"));
    if (is_null($data) || $data->expire_time < time()) {
        $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$appsecret}";
        $res = json_decode(httpGet($url));
        $access_token = $res->access_token;
        if ($access_token) {
            $newRes = array();
            $newRes['expire_time'] = time() + 7000;
            $newRes['access_token'] = $access_token;
            $fp = fopen("access_token.json", "w");
            fwrite($fp, json_encode($newRes));
            fclose($fp);
        }
    } else {
        $access_token = $data->access_token;
    }
    return $access_token;
}
function httpGet($url)
{
    $oCurl = curl_init();
    if (stripos($url, "https://") !== FALSE) {
        curl_setopt($oCurl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($oCurl, CURLOPT_SSL_VERIFYHOST, FALSE);
        curl_setopt($oCurl, CURLOPT_SSLVERSION, 1); //CURL_SSLVERSION_TLSv1
    }
    curl_setopt($oCurl, CURLOPT_URL, $url);
    curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($oCurl, CURLOPT_TIMEOUT, 500);
    $sContent = curl_exec($oCurl);
    $aStatus = curl_getinfo($oCurl);
    curl_close($oCurl);
    if (intval($aStatus["http_code"]) == 200) {
        return $sContent;
    } else {
        return false;
    }
}

function createNonceStr($length = 16)
{
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    $str = "";
    for ($i = 0; $i < $length; $i++) {
        $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }
    return $str;
}

function getSignPackage($appid, $appsecret, $url)
{
    $ticket = getJsApiTicket($appid, $appsecret);
    $timestamp = time();
    $nonceStr = createNonceStr();
    $string = "jsapi_ticket={$ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
    $signature = sha1($string);
    $signPackage = array(
        "appid" => $appid,
        "noncestr" => $nonceStr,
        "timestamp" => $timestamp,
        "url" => $url,
        "signature" => $signature,
        "concat" => $string,
    );
    return $signPackage;
}

$signPackage = getSignPackage($appid, $appsecret, $_GET['link']);
echo json_encode($signPackage);

建议大家先打开上面的dbug，可以方便查看接口是否正确配置，常见的错误可以参考官方说明附录5，比如前面出现的新接口未能使用就出现了

“permission deied”是公众号没有权限使用这个JSAPI，或者是调用的JSAPI没有传入config的jsApiList参数中（部分接口需要认证后才能使用）

这就是为什么个人公众号分享后无法显示缩略图和描述的原因了，另外微信分享文章的缩率图必须是本地的图片，站外图片识别失败。

扩展阅读