導語：使用微信自定義分享，可設定個性化的分享圖片、標題、描述等，從而使分享的內容更生動有趣，以獲得更好的傳播效果。

微信現在是眾多公司營銷的重點。遍佈朋友圈和訊息群組裡的html5各位可能也是天天見了，不過自從微信更新了官方api後，對整個微信內的頁面管控都嚴格了不少。而官方的分享卡片，是眾多在微信生態中傳播的html5靜態頁面的一個重點。不過很多人會發現分享的圖片和摘要達不到預期。這篇文章就講下這個，供初次接觸微信開發的前端參考。（其實官方的文件也蠻詳細的了，不過有些地方官方沒忽略了，容易給新人造成坑）

必要的前提準備

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

1. 微信認證過的公共號
   

   必須是認證過的，未認證或者認證過期都不行

2. 一個域名
   

   需要備案過的

3. 一臺伺服器
   

   因為前端頁面需要的appId、signature是需要後臺傳遞過來的。官方預設後臺程式有PHP、Python、Node、Java版本，不過我這裡以PHP作為演示（後臺其實不在本文的解釋範圍內，超綱了╮(╯▽╰)╭）

配置過程

1. 繫結域名

先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”（就是釋出用的那個域名）

2. 獲取access_token

這部分工作屬於後臺開發，主要功能是利用公共號APPID、APPSECRET從微信伺服器獲取對應的access_token。由於這部分程式碼官方有demo，所以直接用官方的sample例子做演示。
下載官方示例程式碼後，根據自己的情況選擇對應的後臺語言(這裡以PHP為例)。

1. 將下載得到的壓縮包解壓後複製php資料夾到網站根目錄，然後將需要分享出去的html檔案的字尾名改為.php（必須。因為後臺不完善所以不能直接ajax獲得access_token的值，這裡假設需要分享的html頁面是index.php）
2. 開啟index.php，在html的DOCTYPE宣告之前新增一段PHP程式碼：

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

這裡的後臺程式碼都是直接拿的官方，小站點可以直接利用，但是大站點請勿直接使用，因為官方的後臺程式碼沒有快取access_token，很容易觸發每日的2k次API呼叫上限，一旦到了上限，當天就無法繼續認證。所以建議有能力的不要直接用官方的示例程式碼。AppID和AppSecret可在微信公眾平臺官網-開發者中心頁中獲得（需要已經成為開發者，且帳號沒有異常狀態）

3. 前端配置驗證許可權

這裡是前端的工作，主要是利用前一步得到的access_token來獲取簽名等認證資訊，只有正確的配置才可以正常獲取到使用官方js-sdk的許可權。
1.引入JS檔案
在index.php檔案裡新增一個script標籤，引用官方js：

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

1. 通過config介面注入許可權驗證配置

   <script>
       wx.config({
           debug: false,// 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。移動端會通過彈窗來提示相關資訊。如果分享資訊配置不正確的話，可以開了看對應報錯資訊
           appId: '<?php echo $signPackage["appId"];?>',
           timestamp: '<?php echo $signPackage["timestamp"];?>',
           nonceStr: '<?php echo $signPackage["nonceStr"];?>',
           signature: '<?php echo $signPackage["signature"];?>',
           jsApiList: [//需要使用的JS介面列表,分享預設這幾個，如果有其他的功能比如圖片上傳之類的，需要新增對應api進來
               'checkJsApi',
               'onMenuShareTimeline',//
               'onMenuShareAppMessage',
               'onMenuShareQQ',
               'onMenuShareWeibo'
           ]
       });
   </script>

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

2. 配置分享資訊並通過ready介面處理

   <script>
   window.share_config = {
        "share": {
           "imgUrl": "http://www.yourwebsite.com/share.png",//分享圖，預設當相對路徑處理，所以使用絕對路徑的的話，“http://”協議字首必須在。
           "desc" : "你對頁面的描述",//摘要,如果分享到朋友圈的話，不顯示摘要。
           "title" : '分享卡片的標題',//分享卡片標題
           "link": window.location.href,//分享出去後的連結，這裡可以將連結設定為另一個頁面。
           "success":function(){//分享成功後的回撥函式
           },
           'cancel': function () { 
               // 使用者取消分享後執行的回撥函式
           }
       }
   };  
       wx.ready(function () {
       wx.onMenuShareAppMessage(share_config.share);//分享給好友
       wx.onMenuShareTimeline(share_config.share);//分享到朋友圈
       wx.onMenuShareQQ(share_config.share);//分享給手機QQ
   });
   </script>

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

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

分享資訊配置失敗的除錯方法

有時候設定好之後發現分享出去只有標題和一張和設定不一樣的圖片，摘要變成了頁面連結。這就說明配置失敗了。對於沒有正確配置的頁面，微信預設抓取網頁標題和頁面內第一張解析度大於300*300的圖片做分享圖，而摘要則是替換成頁面連結——這種情況從使用者的角度看來並不友好。所幸對於配置失敗的頁面，微信也給了除錯介面，官方也有部分說明。

1. 開啟wx.config裡的debug
   將debug設定為true之後，手機進入頁面，會彈出錯誤資訊(PC不管有沒有配置正確都會在開發者工具中打印出對應的分享資訊，參考意義不是很大——不過可以拿來檢視連結是否有誤)。
   如果正確的話，會提示{"errMsg"："config:ok"}。

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

   這個最常見，主要是域名沒有被新增為js介面安全域名。官方的說明裡是要域名和使用的APPID對應的公共號繫結，不過我實際使用中發現應該也可以分離。另外如果使用了埠號，則配置的繫結域名也要加上埠號（一個appid可以繫結三個有效域名)

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

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

   1. APPID和APPSECRET填錯了。
      可以到官方的除錯頁面獲取access_token看看是否是正確的
   2. 超過了每日的access_token獲取上限
      官方限定每日2k次請求。所以如果沒有快取access_token的話，還是比較容易過限的。
   3. 微信公共號狀態不正常。
      比如驗證過期了，被封禁了等等。