利用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" >
    <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做了修復和升級

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270876.html

標籤：JavaScript

上一篇：超詳細html5登錄注冊頁面總結

下一篇：建構式及實體化原理+包裝類

利用JS-SDK給Typecho微信分享鏈接帶上自定義封面和簡介

引言