【移動應(yīng)用開發(fā)技術(shù)】如何實現(xiàn)微信自定義分享標(biāo)題、圖片、描述等信息

必要的前提準備PS：本文的方法只適合8以及更高版本的微信客戶端。舊版參考這個非官方的API這幾個是超越代碼之上的存在，沒有這幾個認證，即使配置全正確也不能獲得正常的分享卡片：微信認證過的公共號必須是認證過的，未認證或者認證過期都不行一個域名需要備案過的一臺服務(wù)器因為前端頁面需要的appId、signature是需要后臺傳遞過來的。官方默認后臺程序有PHP、Python、Node、Java版本，不過我這里以PHP作為演示（后臺其實不在本文的解釋范圍內(nèi)，超綱了配置過程1.綁定域名先登錄微信公眾平臺進入“公眾號設(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（必須。因為后臺不完善所以不能直接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();

?>這里的后臺代碼都是直接拿的官方，小站點可以直接利用，但是大站點請勿直接使用，因為官方的后臺代碼沒有緩存access_token，很容易觸發(fā)每日的2k次API調(diào)用上限，一旦到了上限，當(dāng)天就無法繼續(xù)認證。所以建議有能力的不要直接用官方的示例代碼。AppID和AppSecret可在微信公眾平臺官網(wǎng)-開發(fā)者中心頁中獲得（需要已經(jīng)成為開發(fā)者，且?guī)ぬ枦]有異常狀態(tài)）3.前端配置驗證權(quán)限這里是前端的工作，主要是利用前一步得到的access_token來獲取簽名等認證信息，只有正確的配置才可以正常獲取到使用官方j(luò)s-sdk的權(quán)限。1.引入JS文件在index.php文件里添加一個script標(biāo)簽，引用官方j(luò)s：<script

src="/open/js/jweixin-1.0.0.js"></script>

1.通過config接口注入權(quán)限驗證配置<script>

wx.config({

debug:

false,//

開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。移動端會通過彈窗來提示相關(guān)信息。如果分享信息配置不正確的話，可以開了看對應(yīng)報錯信息

appId:

'<?php

echo

$signPackage["appId"];?>',

timestamp:

'<?php

echo

$signPackage["timestamp"];?>',

nonceStr:

'<?php

echo

$signPackage["nonceStr"];?>',

signature:

'<?php

echo

$signPackage["signature"];?>',

jsApiList:

[//需要使用的JS接口列表,分享默認這幾個，如果有其他的功能比如圖片上傳之類的，需要添加對應(yīng)api進來

'checkJsApi',

'onMenuShareTimeline',//

'onMenuShareAppMessage',

'onMenuShareQQ',

'onMenuShareWeibo'

]

});

</script>上面的屬性都是必須的，不過都不需要自行填寫。這里只使用了幾個分享相關(guān)的jsApiList，完整列表見官網(wǎng)說明2.配置分享信息并通過ready接口處理<script>

window.share_config

=

{

"share":

{

"imgUrl":

"/GetwxLink/",//分享圖，默認當(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);//分享給手機QQ

});

</script>share_config里的四個屬性在分享卡片里代表的含義如下圖所示：到這里配置完成。正常情況下的話分享出去是會有摘要和分享圖的。分享信息配置失敗的調(diào)試方法有時候設(shè)置好之后發(fā)現(xiàn)分享出去只有標(biāo)題和一張和設(shè)置不一樣的圖片，摘要變成了頁面鏈接。這就說明配置失敗了。對于沒有正確配置的頁面，微信默認抓取網(wǎng)頁標(biāo)題和頁面內(nèi)第一張分辨率大于300*300的圖片做分享圖，而摘要則是替換成頁面鏈接——這種情況從用戶的角度看來并不友好。所幸對于配置失敗的頁面，微信也給了調(diào)試接口，官方也有部分說明。打開wx.config里的debug將debug設(shè)置為true之后，手機進入頁面，會彈出錯誤信息(PC不管有沒有配置正確都會在開發(fā)者工具中打印出對應(yīng)的分享信息，參考意義不是很大——不過可以拿來查看鏈接是否有誤)。如果正確的話，會提示{"errMsg"："config:ok"}。提示{"errMsg"："config:invalidurldomain"}這個最常見，主要是域名沒有被添加為js接口安全域名。官方的說明里是要域名和使用的APPID對應(yīng)的公共號綁定，不過我實際使用中發(fā)現(xiàn)應(yīng)該也可以分離。另外如果使用了端口號，則配置的綁定域名也要加上端口號（一個appid可以綁定三個有效域名)提示{"errMsg"："config:invalidsignature"}造成這個情況的可能性比較多。不過主要有以下三個原因：APPID和APPSECRET填錯了?？梢缘焦俜降恼{(diào)試頁面獲取access_token看看是否是正確的超過了每日的access_token獲取上限官方限定每日2k次請求。所以如果沒有緩存access_token的話，還是比較容易過限的。微信公共號狀態(tài)不正常。比如驗證過期了，被封禁了等等。常用的接口調(diào)試鏈接以及說明文檔：獲取access_token/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ù)返