一、背景介紹

專注于為中小企業(yè)提供做網(wǎng)站、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)陜西免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

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

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

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

第一步

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

第二步

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

第三步

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

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

  window.wx.config({
    appId: res.data.appId, //res.data為請求簽名接口返回?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)容了，但是如何在本地測試是否成功呢？我們剛才也說了只能在安全域名下才能調(diào)用成功，所以Charles就派上大用場了。。。把安全域名代理到本地，然后可以在微信開發(fā)者工具上面自測一下，沒問題了上真機(jī)，iOS和安裝都要試一下，會有驚喜。

三、坑及總結(jié)

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

好了 先寫這么多。。。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。