如何實(shí)現(xiàn)微信自定義分享標(biāo)題、圖片、描述等信息

必要的前提準(zhǔn)備

PS：本文的方法只適合6.0.2.58以及更高版本的微信客戶端。舊版參考這個非官方的API

這幾個是超越代碼之上的存在，沒有這幾個認(rèn)證，即使配置全正確也不能獲得正常的分享卡片：

微信認(rèn)證過的公共號

必須是認(rèn)證過的，未認(rèn)證或者認(rèn)證過期都不行

一個域名

需要備案過的

一臺服務(wù)器

因?yàn)榍岸隧撁嫘枰腶ppId、signature是需要后臺傳遞過來的。官方默認(rèn)后臺程序有PHP、Python、Node、Java版本，不過我這里以PHP作為演示（后臺其實(shí)不在本文的解釋范圍內(nèi)，超綱了

配置過程

1. 綁定域名

先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”（就是發(fā)布用的那個域名）

2. 獲取access_token

這部分工作屬于后臺開發(fā)，主要功能是利用公共號APPID、APPSECRET從微信服務(wù)器獲取對應(yīng)的access_token。由于這部分代碼官方有demo，所以直接用官方的sample例子做演示。

下載官方示例代碼后，根據(jù)自己的情況選擇對應(yīng)的后臺語言(這里以PHP為例)。

將下載得到的壓縮包解壓后復(fù)制php文件夾到網(wǎng)站根目錄，然后將需要分享出去的html文件的后綴名改為.php（必須。因?yàn)楹笈_不完善所以不能直接ajax獲得access_token的值，這里假設(shè)需要分享的html頁面是index.php）

打開index.php，在html的DOCTYPE聲明之前添加一段PHP代碼：

<?php
require_once?"../php/jssdk.php";/*?這里的文件路徑視`php`文件夾所在路徑而定。不一定都要一樣，個人建議扔到一個所有html文件夾都可以引用的目錄*/
$jssdk?=?new?JSSDK("你的APPID",?"你的APPSECRET");
$signPackage?=?$jssdk->GetSignPackage();
?>

這里的后臺代碼都是直接拿的官方，小站點(diǎn)可以直接利用，但是大站點(diǎn)請勿直接使用，因?yàn)楣俜降暮笈_代碼沒有緩存access_token，很容易觸發(fā)每日的2k次API調(diào)用上限，一旦到了上限，當(dāng)天就無法繼續(xù)認(rèn)證。所以建議有能力的不要直接用官方的示例代碼。AppID和AppSecret可在微信公眾平臺官網(wǎng)-開發(fā)者中心頁中獲得（需要已經(jīng)成為開發(fā)者，且?guī)ぬ枦]有異常狀態(tài)）

3. 前端配置驗(yàn)證權(quán)限

這里是前端的工作，主要是利用前一步得到的access_token來獲取簽名等認(rèn)證信息，只有正確的配置才可以正常獲取到使用官方j(luò)s-sdk的權(quán)限。

1.引入JS文件

在index.php文件里添加一個script標(biāo)簽，引用官方j(luò)s：

<script?src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

?1.通過config接口注入權(quán)限驗(yàn)證配置

<script>
????wx.config({
????????debug:?false,//?開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。移動端會通過彈窗來提示相關(guān)信息。如果分享信息配置不正確的話，可以開了看對應(yīng)報(bào)錯信息
????????appId:?'<?php?echo?$signPackage["appId"];?>',
????????timestamp:?'<?php?echo?$signPackage["timestamp"];?>',
????????nonceStr:?'<?php?echo?$signPackage["nonceStr"];?>',
????????signature:?'<?php?echo?$signPackage["signature"];?>',
????????jsApiList:?[//需要使用的JS接口列表,分享默認(rèn)這幾個，如果有其他的功能比如圖片上傳之類的，需要添加對應(yīng)api進(jìn)來
????????????'checkJsApi',
????????????'onMenuShareTimeline',//
????????????'onMenuShareAppMessage',
????????????'onMenuShareQQ',
????????????'onMenuShareWeibo'
????????]
????});
</script>

上面的屬性都是必須的，不過都不需要自行填寫。這里只使用了幾個分享相關(guān)的jsApiList，完整列表見官網(wǎng)說明

2.配置分享信息并通過ready接口處理

<script>
window.share_config?=?{
?????"share":?{
????????"imgUrl":?"http://www.gettool.cn/GetwxLink/",//分享圖，默認(rèn)當(dāng)相對路徑處理，所以使用絕對路徑的的話，“http://”協(xié)議前綴必須在。
????????"desc"?:?"你對頁面的描述",//摘要,如果分享到朋友圈的話，不顯示摘要。
????????"title"?:?'分享卡片的標(biāo)題',//分享卡片標(biāo)題
????????"link":?window.location.href,//分享出去后的鏈接，這里可以將鏈接設(shè)置為另一個頁面。
????????"success":function(){//分享成功后的回調(diào)函數(shù)
????????},
????????'cancel':?function?()?{?
????????????//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
????????}
????}
};??
????wx.ready(function?()?{
????wx.onMenuShareAppMessage(share_config.share);//分享給好友
????wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
????wx.onMenuShareQQ(share_config.share);//分享給手機(jī)QQ
});
</script>

share_config里的四個屬性在分享卡片里代表的含義如下圖所示：

到這里配置完成。正常情況下的話分享出去是會有摘要和分享圖的。

分享信息配置失敗的調(diào)試方法

有時候設(shè)置好之后發(fā)現(xiàn)分享出去只有標(biāo)題和一張和設(shè)置不一樣的圖片，摘要變成了頁面鏈接。這就說明配置失敗了。對于沒有正確配置的頁面，微信默認(rèn)抓取網(wǎng)頁標(biāo)題和頁面內(nèi)第一張分辨率大于300*300的圖片做分享圖，而摘要則是替換成頁面鏈接——這種情況從用戶的角度看來并不友好。所幸對于配置失敗的頁面，微信也給了調(diào)試接口，官方也有部分說明。

打開wx.config里的debug

將debug設(shè)置為true之后，手機(jī)進(jìn)入頁面，會彈出錯誤信息(PC不管有沒有配置正確都會在開發(fā)者工具中打印出對應(yīng)的分享信息，參考意義不是很大——不過可以拿來查看鏈接是否有誤)。

如果正確的話，會提示{"errMsg"："config:ok"}。

提示{"errMsg"："config:invalid url domain"}

這個最常見，主要是域名沒有被添加為js接口安全域名。官方的說明里是要域名和使用的APPID對應(yīng)的公共號綁定，不過我實(shí)際使用中發(fā)現(xiàn)應(yīng)該也可以分離。另外如果使用了端口號，則配置的綁定域名也要加上端口號（一個appid可以綁定三個有效域名)

提示{"errMsg"："config:invalid signature"}

造成這個情況的可能性比較多。不過主要有以下三個原因：

APPID和APPSECRET填錯了。

可以到官方的調(diào)試頁面獲取access_token看看是否是正確的

超過了每日的access_token獲取上限

官方限定每日2k次請求。所以如果沒有緩存access_token的話，還是比較容易過限的。

微信公共號狀態(tài)不正常。

比如驗(yàn)證過期了，被封禁了等等。

常用的接口調(diào)試鏈接以及說明文檔：

獲取access_token

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token

根據(jù)返回的結(jié)果可以判斷頁面內(nèi)的APPID和APPSECRET有沒有出錯

?獲取jsapi_ticket

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

利用前面拿到的access_token 采用http GET方式請求獲得jsapi_ticket，如果出錯的話會返回對應(yīng)的說明。

GetwxLink