使用微信SDK自定義分享

1、背景介紹

在微信中打開本身網站的連接，常常會變成下面這樣

不太好看有木有，若是你想在分享出來的東西帶上你的logo，帶上你想要的描述，怎麼辦，像下面這樣

這就須要用到微信的分享SDK，文檔連接：https://developers.weixin.qq....

2、微信SDK使用說明

第一步

第一步先要在微信公衆平臺上註冊一個微信公衆號，還必需要是認證的企業或組織，流程走下來大概要個兩三天的時間吧，只有認證了的公衆號纔有分享SDK的權限，我的的不行，這個比較麻煩。帳號申請成功後會有AppID和AppSecret，這個至關於你公衆號的祕鑰，第二步須要用到。而後在JS接口安全域名中加入你調微信SDK時的頁面的地址，不支持IP地址、端口號及短鏈域名，只能寫域名，不用加http啥的，在設置了安全域名的路徑下才可以成功調SDK。

第二步

須要一個獲取簽名的接口，這個能夠找RD幫忙操做，請求接口的時候帶上URL（必須和你當前的URL一致），而後讓RD好好研讀下如何經過公衆號的AppID和AppSecret獲取到token及簽名等信息，接下來就能夠愉快的調用微信的分享SDK了。

第三步

獲取到簽名以後在HTML中引入

<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

引入後在代碼中調用分享SDK

window.wx.config({
        appId: res.data.appId, //res.data爲請求籤名接口返回數據
        timestamp: res.data.timestamp,
        nonceStr: res.data.nonceStr,
        signature: res.data.signature,
        jsApiList: [
            'checkJsApi',
            'updateAppMessageShareData',
            'updateTimelineShareData'
        ]
    });
    const shareConfig = {
        'imgUrl': '你想展示的圖標',
        'desc': '你想展示的描述',
        'title': '你想展示的title',
        'link': window.location.href,
        'success': function () {
            console.log('成功了！');
        },
        'cancel': function () {
            console.log('取消');
        }
    };
    window.wx.ready(function () {
        window.wx.updateAppMessageShareData(shareConfig);
        window.wx.updateTimelineShareData(shareConfig);
    });

OK！大功告成，如今就能夠按你的想法分享內容了，可是如何在本地測試是否成功呢？咱們剛纔也說了只能在安全域名下才能調用成功，因此Charles就派上大用場了。。。把安全域名代理到本地，而後能夠在微信開發者工具上面自測一下，沒問題了上真機，iOS和安裝都要試一下，會有驚喜。

3、坑及總結

在自測了沒問題以後上線了。。。結果發現iOS的手機獲取簽名失敗，報invalid signature,後來排查發如今iOS的微信裏面若是從其餘頁面跳轉到你要分享的頁面window.location.href是不會變的。。。也就是說你發請求去獲取簽名時候傳給後端的URL和你當前的URL是不一致的，因此致使簽名獲取失敗。這個解決辦法不少，能夠把前一個頁面的URL拿去獲取簽名，只要保持一致就是OK的。
好了 先寫這麼多。。。