利用JS-SDK给Typecho微信分享链接带上自定义封面和简介

引言

将自建的网站链接分享给朋友/分享到朋友圈的时候，默认是没有缩略图封面的，也没有链接的描述，显得很不正规，就像下面这样：

这是因为微信的网页链接需要调用SDK进行配置。

使用JS-SDK

微信js-sdk是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。

我们可以使用js-sdk来自定义链接的封面，描述等信息。

我们需要在网页中引入http://res.wx.qq.com/open/js/jweixin-1.6.0.js

然后使用如下代码进行配置：

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
}); 

在这之前，还需要调用API获取SDK接口的调用权限，本文不是一个使用js-sdk的教程，因此省略这些步骤，更多信息请参阅：微信官方文档

WechatShare插件

WechatShare是一个封装了js-sdk的Typecho插件，使用此插件可以自定义Typecho博客微信分享链接中的标题、描述、小图标和URL，包括分享给朋友/分享到朋友圈，效果如下：

左边是原始的链接样式，右边是自定义后的链接样式。

安装插件

• 至releases中下载最新版本插件
• 将下载的压缩包进行解压，文件夹重命名为WeChatShare，上传至Typecho插件目录usr/plugins中
• 检查WeChatShare插件目录文件是否有读写权限，如果没有请增加
• 后台激活插件
• 到插件配置页面填写插件配置信息

配置插件

配置插件需要下面几个步骤：

• 您需要有一个公众号，并且公众号通过微信认证
• 在插件中填写微信公众号平台中获取到的 AppID 和 AppSecret ，并设置IP白名单（开发 > 基本配置）
• 添加博客域名到JS安全域名中（设置 > 公众号设置 > 功能设置 > JS接口安全域名）
• 配置完成后，可以在每篇博客的编辑页面配置微信分享，设置标题、描述、小图标和URL等信息

注册微信公众号并通过微信认证

• 前往微信开放平台注册
• 填写信息并进行认证，我记得微信的认证是很快，应该是机器认证

获取 AppID 和 AppSecret

• 将图中所示的 AppID 和 AppSecret填入插件配置中
• 启用开发者密码后，会出现IP白名单的功能，将服务器IP设置进去

JS接口安全域名

将网站域名设置为JS接口安全域名

配置文章的微信分享信息

配置好插件之后，在文章的编辑页面可以看到下面的配置框：

填入你想配置的信息即可，链接项留空的时候会自动获取本文链接。

如何支持Pjax？

如果你的网站使用了pjax技术，则需要进行下一步的设置，否则在页面发生跳转后插件将无法正常工作。

在你的pjax-container中添加以下代码

下面代码的作用是在完成pjax刷新之后，替换成新的文章信息

    <script>
        var pageInfo = {
            title: '<?php echo $this->title; ?>',
            parameter_type: '<?php echo $this->parameter->type; ?>',
            cid: '<?php echo $this->cid; ?>',
            signature_url: '<?php
                $http_type = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on')
                    || (isset($_SERVER['HTTP_X_FORWARDED_PROTO'])
                        && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')) ? 'https://' : 'http://';
                $signature_url = $http_type . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
                // pjax
                $signature_url = preg_replace('/?_pjax=.*/','',$signature_url);
                echo $signature_url; ?>'
        };
    </script>

在你的pjax回调函数中添加以下代码

下面代码的作用是在pjax刷新之后重新调用wx.config

new WX_Custom_Share().init();

我的pjax代码示例

我的pjax代码如下：

$(document).pjax('a[href*="<?php Helper::options()->siteUrl()?>"]:not(a[target="_blank"], a[no-pjax])', {
        container: '#content',
        fragment: '#content',
        timeout: 8000
}).on('pjax:send', function () {
        // some animate code......
}).on('pjax:complete',
        function () {
        // 微信分享插件
        new WX_Custom_Share().init();
});

其中设置了#content为pjax容器，因此我向该div中添加代码：

<div id="content" class="app-content">
    <script>
        // 第一步中给出的代码
    </script>

然后我在上面的pjax回调中添加了new WX_Custom_Share().init();，即可完成pjax的配置

FAQ

• Q：我暂时没有可用的微信公众号，怎么快速试用？
• A：可以使用开发者工具里面的公众平台测试账号，注意需要关注测试公众号才能生效
• Q：如何调试我的网页，确认我的配置正确？
• A：推荐下载官方的web开发者工具，查看控制台信息
• Q：在插件填写的配置信息为什么没有保存？
• A：先禁用，重新启用插件后再填写。这是原作者留下的BUG......我没去fix。

项目地址

Github地址：WeChatShare

插件下载地址：https://github.com/misterchaos/WeChatShare/releases/

测试网站地址：https://hellochaos.cn/

鸣谢

本插件的原始代码来源于：fuzqing/WeChatShare

原作者已不再维护，我针对最新的微信开放平台API做了修复和升级