引言
將自建的網站鏈接分享給朋友/分享到朋友圈的時候，默認是沒有縮略圖封面的，也沒有鏈接的描述，顯得很不正規，就像下面這樣：
這是因為微信的網頁鏈接需要調用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做了修復和升級