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

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

為包河等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及包河網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、包河網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

微信認(rèn)證過(guò)的公共號(hào)

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

一個(gè)域名

需要備案過(guò)的

一臺(tái)服務(wù)器

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

配置過(guò)程

1. 綁定域名

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

2. 獲取access_token

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

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

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

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

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

這里是前端的工作，主要是利用前一步得到的access_token來(lái)獲取簽名等認(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.通過(guò)config接口注入權(quán)限驗(yàn)證配置

<script>
????wx.config({
????????debug:?false,//?開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。移動(dòng)端會(huì)通過(guò)彈窗來(lái)提示相關(guān)信息。如果分享信息配置不正確的話(huà)，可以開(kāi)了看對(duì)應(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è)，如果有其他的功能比如圖片上傳之類(lèi)的，需要添加對(duì)應(yīng)api進(jìn)來(lái)
????????????'checkJsApi',
????????????'onMenuShareTimeline',//
????????????'onMenuShareAppMessage',
????????????'onMenuShareQQ',
????????????'onMenuShareWeibo'
????????]
????});
</script>

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

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

<script>
window.share_config?=?{
?????"share":?{
????????"imgUrl":?"http://www.gettool.cn/GetwxLink/",//分享圖，默認(rèn)當(dāng)相對(duì)路徑處理，所以使用絕對(duì)路徑的的話(huà)，“http://”協(xié)議前綴必須在。
????????"desc"?:?"你對(duì)頁(yè)面的描述",//摘要,如果分享到朋友圈的話(huà)，不顯示摘要。
????????"title"?:?'分享卡片的標(biāo)題',//分享卡片標(biāo)題
????????"link":?window.location.href,//分享出去后的鏈接，這里可以將鏈接設(shè)置為另一個(gè)頁(yè)面。
????????"success":function(){//分享成功后的回調(diào)函數(shù)
????????},
????????'cancel':?function?()?{?
????????????//?用戶(hù)取消分享后執(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à)分享出去是會(huì)有摘要和分享圖的。

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

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

打開(kāi)wx.config里的debug

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

如果正確的話(huà)，會(huì)提示{"errMsg"："config:ok"}。

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

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

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

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

APPID和APPSECRET填錯(cuò)了。

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

超過(guò)了每日的access_token獲取上限

官方限定每日2k次請(qǐng)求。所以如果沒(méi)有緩存access_token的話(huà)，還是比較容易過(guò)限的。

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

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

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

獲取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é)果可以判斷頁(yè)面內(nèi)的APPID和APPSECRET有沒(méi)有出錯(cuò)

?獲取jsapi_ticket

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

利用前面拿到的access_token 采用http GET方式請(qǐng)求獲得jsapi_ticket，如果出錯(cuò)的話(huà)會(huì)返回對(duì)應(yīng)的說(shuō)明。

GetwxLink

文章名稱(chēng)：如何實(shí)現(xiàn)微信自定義分享標(biāo)題、圖片、描述等信息
文章位置：http://bm7419.com/article40/pcodeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、標(biāo)簽優(yōu)化、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、Google、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)