一、背景介紹

在微信中打開自己網站的鏈接，經常會變成下面這樣

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

這就需要用到微信的分享SDK，文檔鏈接：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

二、微信SDK使用說明第一步

第一步

先要在微信公眾平臺上注冊一個微信公眾號，還必須要是認證的企業(yè)或組織，流程走下來大概要個兩三天的時間吧，只有認證了的公眾號才有分享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為請求簽名接口返回數(shù)據(jù)
    timestamp: res.data.timestamp,
    nonceStr: res.data.nonceStr,
    signature: res.data.signature,
    jsApiList: [
      'checkJsApi',
      'updateAppMessageShareData',
      'updateTimelineShareData'
    ]
  });
  const shareConfig = {
    'imgUrl': '你想展現(xiàn)的圖標',
    'desc': '你想展現(xiàn)的描述',
    'title': '你想展現(xiàn)的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！大功告成，現(xiàn)在就可以按你的想法分享內容了，但是如何在本地測試是否成功呢？我們剛才也說了只能在安全域名下才能調用成功，所以Charles就派上大用場了。。。把安全域名代理到本地，然后可以在微信開發(fā)者工具上面自測一下，沒問題了上真機，iOS和安裝都要試一下，會有驚喜。

三、坑及總結

在自測了沒問題之后上線了。。。結果發(fā)現(xiàn)iOS的手機獲取簽名失敗，報invalid signature,后來排查發(fā)現(xiàn)在iOS的微信里面如果從其他頁面跳轉到你要分享的頁面window.location.href是不會變的。。。也就是說你發(fā)請求去獲取簽名時候傳給后端的URL和你當前的URL是不一致的，所以導致簽名獲取失敗。這個解決辦法很多，可以把前一個頁面的URL拿去獲取簽名，只要保持一致就是OK的。

好了 先寫這么多。。。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論