dede 微信转发带图-DEDE建站-盈思创科技

这个功能并非由DedeCMS后台直接设置,而是通过在文章页面的模板文件中添加特定的微信JS-SDK代码来实现的。

下面是详细的实现步骤,分为“简单实现”和“完整实现”两种方案。

简单实现（推荐新手）

这个方案不需要复杂的配置,通过修改模板文件，让微信自动抓取文章中的图片作为分享图，虽然自定义性稍弱，但胜在简单易用。

核心原理： 微信会自动抓取HTML <body> 标签后的第一张 <img> 标签作为分享图，我们只需要在文章内容的最前面放一张我们指定的图片即可。

操作步骤：

准备一张分享图
- 找一张你希望作为默认分享的图片,例如你的网站Logo、文章封面图等。
- 将图片上传到你的网站服务器上,记住它的完整路径，/images/wechat-share-default.jpg。
修改文章模板文件
- 登录你的DedeCMS后台。
- 进入 后台 -> 模板 -> 默认模板管理。
- 找到并打开你当前使用的文章内容页模板,通常是 article_article.htm。
- 在模板代码中,找到 <?php echo $body;?> 这一行，这行代码的作用是输出文章的正文内容。
- 在 <?php echo $body;?> 之前，插入你准备好的图片代码。
修改前（示例）：
```
<div class="article-content">
    <?php echo $body;?>
</div>
```
修改后（示例）：
```

<img src="/images/wechat-share-default.jpg" style="display:none;" />
<div class="article-content">
    <?php echo $body;?>
</div>
```
更新生成HTML

保存模板文件后,去“生成”栏目，重新生成一下这篇文章或者整个网站的HTML文件。

完成！ 当用户用微信打开这篇文章时，分享出去的卡片就会显示你设置的这张默认图片，文章的标题和描述会默认使用文章的标题和摘要。

优点：

非常简单,只需修改一个模板文件。
不需要申请微信JS-SDK的权限。

缺点：

所有文章都使用同一张默认图,无法根据文章内容动态变化。
无法自定义分享描述。

完整实现（推荐专业用户）

这个方案使用微信官方的JS-SDK，可以实现完全自定义分享标题、描述和图片，并且可以根据文章内容动态设置，体验更好。

核心原理：

在微信公众平台（服务号或订阅号）中获取开发者凭证（AppID和AppSecret）。
在DedeCMS中搭建一个服务端,用于向微信服务器请求JS-SDK权限签名。
在文章页模板中引入微信JS-SDK，并调用其接口设置分享参数。

详细步骤：

第1步：微信公众平台配置

登录你的微信公众平台。
进入“设置” -> “公众号设置” -> “开发” -> “基本配置”。
记录下你的 AppID 和 AppSecret（注意保密）。
在“网页授权”中，设置你的 授权回调域名，这个域名必须是你网站所在的域名，www.yourdomain.com。不要加 http:// 或 https://。

第2步：在DedeCMS中创建JS-SDK服务文件

我们需要创建一个PHP文件来处理签名逻辑,这个文件可以放在你网站的任意位置，/include/wechat_jsdk.php。

安装微信SDK库
- 最简单的方式是使用Composer,如果你的网站支持，在项目根目录运行：
```
composer require overtrue/wechat
```
- 或者直接下载 [EasyWeChat](https://github.com overtrue/wechat) 库，将 src 目录解压到你的网站，/vendor/overtrue/wechat/src。

创建签名服务文件 /include/wechat_jsdk.php

将下面的代码保存为 wechat_jsdk.php 文件，并根据你的信息修改配置。

<?php
/**
 * 微信JS-SDK签名服务文件
 * 文件路径: /include/wechat_jsdk.php
 */
// 引入Composer自动加载器，如果使用Composer的话
// require __DIR__ . '/../vendor/autoload.php';
// 如果手动下载了EasyWeChat，可以这样引入
require_once __DIR__ . '/../vendor/overtrue/wechat/src/Core/AccessToken.php';
require_once __DIR__ . '/../vendor/overtrue/wechat/src/Js/Js.php';
// ...根据你的文件结构引入所需的类，或者直接使用一个完整的SDK文件
// --- 配置开始 ---
$wechatConfig = [
    'app_id'     => '你的AppID',
    'app_secret' => '你的AppSecret',
    // 如果你的公众号有多个，可以在这里配置
];
// --- 配置结束 ---
// 获取当前页面的URL，必须为完整URL，包括协议和域名
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$currentUrl = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
try {
    // 初始化EasyWeChat的Js实例
    // $app = new \EasyWeChat\OfficialAccount\Application($wechatConfig);
    // $js = $app->jssdk;
    // 如果使用更底层的SDK或自己实现签名，逻辑类似
    // 这里我们假设你有一个获取签名的方法
    $js = new \Your\JsSdkClass($wechatConfig['app_id'], $wechatConfig['app_secret']); // 替换成你自己的SDK类
    // 获取签名包
    $signPackage = $js->getConfig([
        'onMenuShareTimeline', // 分享到朋友圈
        'onMenuShareAppMessage', // 分享给朋友
        // 'onMenuShareQQ', // 分享到QQ
        // 'onMenuShareWeibo', // 分享到微博
    ]);
    // 将签名包输出为JSON，供前端调用
    header('Content-Type: application/json');
    echo json_encode($signPackage);
} catch (Exception $e) {
    // 出错时返回空，或记录日志
    // error_log($e->getMessage());
    echo json_encode([]);
}

注意： 上述代码中的 Your\JsSdkClass 是一个占位符，你需要根据你使用的具体SDK（如EasyWeChat）来正确初始化和调用，EasyWeChat的使用方式更简单，如注释掉的代码所示。

第3步：修改文章模板文件

再次打开你的文章模板文件 article_article.htm。

在 <head> 标签内，引入微信的JS文件，并添加一个 <script> 标签来调用我们的服务端。

<head>
    <meta charset="utf-8">
    <title>{dede:field.title/} - {dede:global.cfg_webname/}</title>
    <!-- ... 其他head内容 ... -->
    <!-- 引入微信JS-SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        // 1. 获取当前文章的封面图
        // 我们从文章附加表里获取，或者从正文第一张图获取
        var shareImageUrl = '';
        {dede:field name='litpic'/} // 如果有设置文章封面图，优先使用
        {dede:php}
            if(empty($fields['litpic'])) {
                // 如果没有封面图，尝试从正文中提取第一张图
                $body = $fields['body'];
                $preg = "/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/i";
                preg_match_all($preg, $body, $match);
                if(!empty($match[1][0])) {
                    echo 'shareImageUrl = "'.$match[1][0].'";';
                } else {
                    // 如果正文也没有，使用一个默认图
                    echo 'shareImageUrl = "/images/wechat-share-default.jpg";';
                }
            } else {
                echo 'shareImageUrl = "'.$fields['litpic'].'";';
            }
        {/dede:php}
        // 2. 获取JS-SDK签名
        $.ajax({
            url: "/include/wechat_jsdk.php", // 指向你刚才创建的PHP文件
            type: "GET",
            dataType: "json",
            success: function (res) {
                if (res.appId && res.timestamp && res.nonceStr && res.signature) {
                    // 3. 初始化并调用微信JS-SDK
                    wx.config({
                        beta: true,
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.appId,
                        timestamp: res.timestamp,
                        nonceStr: res.nonceStr,
                        signature: res.signature,
                        jsApiList: [
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage'
                        ]
                    });
                    wx.ready(function () {
                        // 分享到朋友圈
                        wx.onMenuShareTimeline({
                            title: '{dede:field.title/}', // 分享标题
                            link: '{dede:field.arcurl/}', // 分享链接
                            imgUrl: shareImageUrl, // 分享图标
                            success: function () {
                                // alert('分享成功');
                            },
                            cancel: function () {
                                // alert('分享取消');
                            }
                        });
                        // 分享给朋友
                        wx.onMenuShareAppMessage({
                            title: '{dede:field.title/}', // 分享标题
                            desc: '{dede:field.description function='html2text(@me)'/}', // 分享描述，使用文章摘要
                            link: '{dede:field.arcurl/}', // 分享链接
                            imgUrl: shareImageUrl, // 分享图标
                            type: '', // 分享类型,music、video或link，不填默认为link
                            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                            success: function () {
                                // alert('分享成功');
                            },
                            cancel: function () {
                                // alert('分享取消');
                            }
                        });
                    });
                }
            },
            error: function (err) {
                console.log("获取微信签名失败", err);
            }
        });
    </script>
</head>

第4步：更新生成HTML

保存模板文件,并重新生成文章的HTML页面。

完成！ 当用户用微信打开文章时，点击分享，就会显示你自定义的标题、描述和动态获取的文章封面图了。

总结与对比

特性	方案一（简单实现）	方案二（完整实现）
实现难度	非常简单，只需改模板	较高，需要配置后台、创建服务文件、改模板
自定义程度	低，只能设置一张默认图	高，可自定义标题、描述、图片，且图片可动态获取
依赖性	无需任何外部服务	依赖微信公众平台和服务器端PHP环境
推荐场景	个人博客、对分享要求不高的网站	商业网站、企业官网、追求用户体验的公众号文章

对于大多数网站来说,方案一已经足够，如果你的网站对品牌形象和用户体验有较高要求，方案二是更专业、更强大的选择。

dede 微信转发带图