使用微信SDK自定義分享的方法

一、背景介紹

在微信中打開自己網(wǎng)站的鏈接，經(jīng)常會(huì)變成下面這樣

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

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

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

第一步

先要在微信公眾平臺(tái)上注冊(cè)一個(gè)微信公眾號(hào)，還必須要是認(rèn)證的企業(yè)或組織，流程走下來大概要個(gè)兩三天的時(shí)間吧，只有認(rèn)證了的公眾號(hào)才有分享SDK的權(quán)限，個(gè)人的不行，這個(gè)比較麻煩。賬號(hào)申請(qǐng)成功后會(huì)有AppID和AppSecret，這個(gè)相當(dāng)于你公眾號(hào)的秘鑰，第二步需要用到。然后在JS接口安全域名中加入你調(diào)微信SDK時(shí)的頁面的地址，不支持IP地址、端口號(hào)及短鏈域名，只能寫域名，不用加http啥的，在設(shè)置了安全域名的路徑下才能夠成功調(diào)SDK。

第二步

需要一個(gè)獲取簽名的接口，這個(gè)可以找RD幫忙操作，請(qǐng)求接口的時(shí)候帶上URL（必須和你當(dāng)前的URL一致），然后讓RD好好研讀下如何通過公眾號(hào)的AppID和AppSecret獲取到token及簽名等信息，接下來就可以愉快的調(diào)用微信的分享SDK了。

第三步

獲取到簽名之后在HTML中引入

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

引入后在代碼中調(diào)用分享SDK

  window.wx.config({
    appId: res.data.appId, //res.data為請(qǐng)求簽名接口返回?cái)?shù)據(jù)
    timestamp: res.data.timestamp,
    nonceStr: res.data.nonceStr,
    signature: res.data.signature,
    jsApiList: [
      'checkJsApi',
      'updateAppMessageShareData',
      'updateTimelineShareData'
    ]
  });
  const shareConfig = {
    'imgUrl': '你想展現(xiàn)的圖標(biāo)',
    '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)在就可以按你的想法分享內(nèi)容了，但是如何在本地測(cè)試是否成功呢？我們剛才也說了只能在安全域名下才能調(diào)用成功，所以Charles就派上大用場了。。。把安全域名代理到本地，然后可以在微信開發(fā)者工具上面自測(cè)一下，沒問題了上真機(jī)，iOS和安裝都要試一下，會(huì)有驚喜。

三、坑及總結(jié)

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

好了 先寫這么多。。。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。