必要的前提準(zhǔn)備
PS：本文的方法只適合6.0.2.58以及更高版本的微信客戶端。舊版參考這個(gè)非官方的API
這幾個(gè)是超越代碼之上的存在扬跋，沒有這幾個(gè)認(rèn)證阶捆，即使配置全正確也不能獲得正常的分享卡片：
微信認(rèn)證過的公共號(hào)
必須是認(rèn)證過的，未認(rèn)證或者認(rèn)證過期都不行
一個(gè)域名
需要備案過的
一臺(tái)服務(wù)器
因?yàn)榍岸隧撁嫘枰腶ppId钦听、signature是需要后臺(tái)傳遞過來的洒试。官方默認(rèn)后臺(tái)程序有PHP、Python朴上、Node垒棋、Java版本，不過我這里以PHP作為演示（后臺(tái)其實(shí)不在本文的解釋范圍內(nèi)余指，超綱了
實(shí)現(xiàn)工具：GetwxLink
配置過程
1. 綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”（就是發(fā)布用的那個(gè)域名）
2. 獲取access_token
這部分工作屬于后臺(tái)開發(fā)，主要功能是利用公共號(hào)APPID、APPSECRET從微信服務(wù)器獲取對應(yīng)的access_token酵镜。由于這部分代碼官方有demo碉碉，所以直接用官方的sample例子做演示。
下載官方示例代碼后淮韭，根據(jù)自己的情況選擇對應(yīng)的后臺(tái)語言(這里以PHP為例)垢粮。
將下載得到的壓縮包解壓后復(fù)制php文件夾到網(wǎng)站根目錄，然后將需要分享出去的html文件的后綴名改為.php（必須靠粪。因?yàn)楹笈_(tái)不完善所以不能直接ajax獲得access_token的值蜡吧，這里假設(shè)需要分享的html頁面是index.php）
打開index.php，在html的DOCTYPE聲明之前添加一段PHP代碼：
<?php
require_once "../php/jssdk.php";/* 這里的文件路徑視`php`文件夾所在路徑而定占键。不一定都要一樣昔善，個(gè)人建議扔到一個(gè)所有html文件夾都可以引用的目錄*/
$jssdk = new JSSDK("你的APPID", "你的APPSECRET");
$signPackage = $jssdk->GetSignPackage();
?>
這里的后臺(tái)代碼都是直接拿的官方，小站點(diǎn)可以直接利用畔乙，但是大站點(diǎn)請勿直接使用君仆，因?yàn)楣俜降暮笈_(tái)代碼沒有緩存access_token，很容易觸發(fā)每日的2k次API調(diào)用上限牲距，一旦到了上限返咱，當(dāng)天就無法繼續(xù)認(rèn)證。所以建議有能力的不要直接用官方的示例代碼牍鞠。AppID和AppSecret可在微信公眾平臺(tái)官網(wǎng)-開發(fā)者中心頁中獲得（需要已經(jīng)成為開發(fā)者咖摹，且?guī)ぬ?hào)沒有異常狀態(tài)）
3. 前端配置驗(yàn)證權(quán)限
這里是前端的工作，主要是利用前一步得到的access_token來獲取簽名等認(rèn)證信息难述，只有正確的配置才可以正常獲取到使用官方j(luò)s-sdk的權(quán)限萤晴。
1.引入JS文件
在index.php文件里添加一個(gè)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的返回值會(huì)在客戶端alert出來龄广，若要查看傳入的參數(shù)硫眯，可以在pc端打開，參數(shù)信息會(huì)通過log打出择同，僅在pc端時(shí)才會(huì)打印两入。移動(dòng)端會(huì)通過彈窗來提示相關(guān)信息。如果分享信息配置不正確的話敲才，可以開了看對應(yīng)報(bào)錯(cuò)信息
? ? ? ? appId: '<?php echo $signPackage["appId"];?>',
? ? ? ? timestamp: '<?php echo $signPackage["timestamp"];?>',
? ? ? ? nonceStr: '<?php echo $signPackage["nonceStr"];?>',
? ? ? ? signature: '<?php echo $signPackage["signature"];?>',
? ? ? ? jsApiList: [//需要使用的JS接口列表,分享默認(rèn)這幾個(gè)裹纳，如果有其他的功能比如圖片上傳之類的，需要添加對應(yīng)api進(jìn)來
? ? ? ? ? ? 'checkJsApi',
? ? ? ? ? ? 'onMenuShareTimeline',//
? ? ? ? ? ? 'onMenuShareAppMessage',
? ? ? ? ? ? 'onMenuShareQQ',
? ? ? ? ? ? 'onMenuShareWeibo'
? ? ? ? ]
? ? });
</script>
上面的屬性都是必須的紧武，不過都不需要自行填寫剃氧。這里只使用了幾個(gè)分享相關(guān)的jsApiList，完整列表見官網(wǎng)說明
2.配置分享信息并通過ready接口處理
<script>
window.share_config = {
? ? "share": {
? ? ? ? "imgUrl": "http://www.yourwebsite.com/share.png",//分享圖阻星，默認(rèn)當(dāng)相對路徑處理朋鞍，所以使用絕對路徑的的話已添，“http://”協(xié)議前綴必須在。
? ? ? ? "desc" : "你對頁面的描述",//摘要,如果分享到朋友圈的話滥酥，不顯示摘要更舞。
? ? ? ? "title" : '分享卡片的標(biāo)題',//分享卡片標(biāo)題
? ? ? ? "link": window.location.href,//分享出去后的鏈接，這里可以將鏈接設(shè)置為另一個(gè)頁面坎吻。
? ? ? ? "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里的四個(gè)屬性在分享卡片里代表的含義如下圖所示：
到這里配置完成缆蝉。正常情況下的話分享出去是會(huì)有摘要和分享圖的。
分享信息配置失敗的調(diào)試方法
有時(shí)候設(shè)置好之后發(fā)現(xiàn)分享出去只有標(biāo)題和一張和設(shè)置不一樣的圖片瘦真，摘要變成了頁面鏈接刊头。這就說明配置失敗了。對于沒有正確配置的頁面诸尽，微信默認(rèn)抓取網(wǎng)頁標(biāo)題和頁面內(nèi)第一張分辨率大于300*300的圖片做分享圖原杂，而摘要?jiǎng)t是替換成頁面鏈接——這種情況從用戶的角度看來并不友好。所幸對于配置失敗的頁面弦讽，微信也給了調(diào)試接口污尉，官方也有部分說明。
打開wx.config里的debug
將debug設(shè)置為true之后往产，手機(jī)進(jìn)入頁面被碗，會(huì)彈出錯(cuò)誤信息(PC不管有沒有配置正確都會(huì)在開發(fā)者工具中打印出對應(yīng)的分享信息，參考意義不是很大——不過可以拿來查看鏈接是否有誤)仿村。
如果正確的話锐朴，會(huì)提示{"errMsg"："config:ok"}。
提示{"errMsg"："config:invalid url domain"}
這個(gè)最常見蔼囊，主要是域名沒有被添加為js接口安全域名焚志。官方的說明里是要域名和使用的APPID對應(yīng)的公共號(hào)綁定，不過我實(shí)際使用中發(fā)現(xiàn)應(yīng)該也可以分離畏鼓。另外如果使用了端口號(hào)酱酬，則配置的綁定域名也要加上端口號(hào)（一個(gè)appid可以綁定三個(gè)有效域名)
提示{"errMsg"："config:invalid signature"}
造成這個(gè)情況的可能性比較多。不過主要有以下三個(gè)原因：
APPID和APPSECRET填錯(cuò)了云矫。
可以到官方的調(diào)試頁面獲取access_token看看是否是正確的
超過了每日的access_token獲取上限
官方限定每日2k次請求膳沽。所以如果沒有緩存access_token的話，還是比較容易過限的让禀。
微信公共號(hào)狀態(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有沒有出錯(cuò)
?獲取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
利用前面拿到的access_token 采用http GET方式請求獲得jsapi_ticket痛阻，如果出錯(cuò)的話會(huì)返回對應(yīng)的說明。
