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

以下來自：微信分享自定義圖片和摘要

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

必要的前提準備

PS：本文的方法只適合6.0.2.58以及更高版本的微信客戶端。舊版參考這個非官方的API
這幾個是超越代碼之上的存在，沒有這幾個認證，即使配置全正確也不能獲得正常的分享卡片：

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. 微信公共號狀態不正常。
      比如驗證過期了，被封禁了等等。

4. 常用的接口調試鏈接以及說明文檔：

   獲取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

   根據返回的結果可以判斷頁面內的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，如果出錯的話會返回對應的說明。

   全局返回碼說明
   http://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html

   接口頻率限制說明
   http://mp.weixin.qq.com/wiki/0/2e2239fa5f49388d5b5136ecc8e0e440.html

分享到微信朋友圈和微信好友的區別

wx.ready(function () {
        var link = window.location.href;
        var protocol = window.location.protocol;
        var host = window.location.host;
        //分享朋友圈
        wx.onMenuShareTimeline({
            title: '這是一個自定義的標題！',
            link: link,
            imgUrl: protocol+'//'+host+'/resources/images/icon.jpg',// 自定義圖標
            trigger: function (res) {
                // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回.
                //alert('click shared');
            },
            success: function (res) {
                //alert('shared success');
                //some thing you should do
            },
            cancel: function (res) {
                //alert('shared cancle');
            },
            fail: function (res) {
                //alert(JSON.stringify(res));
            }
        });
        //分享給好友
        wx.onMenuShareAppMessage({
            title: '這是一個自定義的標題！', // 分享標題
            desc: '這是一個自定義的描述！', // 分享描述
            link: link, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
            imgUrl: protocol+'//'+host+'/resources/images/icon.jpg', // 自定義圖標
            type: 'link', // 分享類型,music、video或link，不填默認為link
            dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
            success: function () {
                // 用戶確認分享后執行的回調函數
            },
            cancel: function () {
                // 用戶取消分享后執行的回調函數
            }
        });
        wx.error(function (res) {
            alert(res.errMsg);
        });
    });

總結

以上是生活随笔為你收集整理的微信自定义分享链接和图文的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。