摘要：博客地址產(chǎn)品希望我們在微信分享出去的鏈接，有自己的樣式，而不是僅僅一個鏈接。接口更新的雖然微信文檔上有接口更新的說明請注意，原有的接口，即將廢棄。微信分享自定義樣式微信分享圖標設(shè)置，以及配置

博客地址

產(chǎn)品希望我們在微信分享出去的鏈接，有自己的樣式，而不是僅僅一個鏈接。用產(chǎn)品的話來說，你發(fā)給客戶一個鏈接，客戶敢點么？？？

聽著比較有意思，不過也不能說完全沒有道理，畢竟各種各樣的詐騙大家也是有所耳聞，經(jīng)確認，產(chǎn)品想要：

而我們當前分享是：

總監(jiān)給我提示說，微信有 js-sdk ，可以在 js 里設(shè)置這個樣式。

于是，我找到了微信 JS-SDK 說明文檔，基本上就是根據(jù)文檔走些配置，這個要和產(chǎn)品那邊要些賬號密碼，改些東西之類，根據(jù)文檔來，沒什么好說的。

大體流程如下：

步驟一：綁定域名

步驟二：引入 JS 文件

步驟三：通過 config 接口注入權(quán)限驗證配置

wx.config({}) //傳入一些初始化參數(shù)

步驟四：通過 ready 接口處理成功驗證

wx.ready(function() {}) //傳入成功回調(diào)

步驟五：通過 error 接口處理失敗驗證

wx.error(function() {}) //傳入失敗回調(diào)

實際操作的時候，遇到了幾點麻煩，這里需要提一下：

wx.config({ debug: true /*其他參數(shù)*/ })

這個是文檔說的，反正就是給后臺處理了，最終前端初始化需要的幾個字段，除了 debug 和 jsApiList ，都是從后臺拿的。

wx.config({
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
    appId: "", // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: "", // 必填，生成簽名的隨機串
    signature: "",// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

后臺在實現(xiàn)的時候，可能需要注意文檔提示的兩點：

access_token（有效期 7200 秒，開發(fā)者必須在自己的服務(wù)全局緩存 access_token）

jsapi_ticket（有效期 7200 秒，開發(fā)者必須在自己的服務(wù)全局緩存 jsapi_ticket）

因為這會導致一開始生成的簽名沒錯，但是兩個小時后就失效了。

通常的邏輯都是前端從后臺拿到上面的幾個字段，在前端完成初始化，然后添加初始化成功和失敗的回調(diào)。

示例：

var link = location.href
$.ajax({
  url: "your_url", //后臺給你提供的接口
  type: "GET",
  data: { url: link },
  async: true,
  dataType: "json",
  success: function(data) {
    wx.config({
      debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來
      appId: data.configMap.appId, // 必填，公眾號的唯一標識
      timestamp: data.configMap.timestamp, // 必填，生成簽名的時間戳
      nonceStr: data.configMap.nonceStr, // 必填，生成簽名的隨機串
      signature: data.configMap.signature, // 必填，簽名，見附錄1
      jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
    })
    wx.ready(function(res) {
      wx.onMenuShareAppMessage({
        title: document.title,
        desc: document.title,
        link: link,
        imgUrl: Imgurl,
        trigger: function(res) {},
        success: function(res) {},
        cancel: function(res) {},
        fail: function(res) {}
      })
      wx.onMenuShareTimeline({
        title: document.title,
        link: link,
        imgUrl: Imgurl,
        trigger: function(res) {},
        success: function(res) {},
        cancel: function(res) {},
        fail: function(res) {}
      })
    })
    wx.error(function(res) {
      alert(res)
    })
  },
  error: function(error) {
    alert(error)
  }
})

我司稍微特殊些，直接把初始化的代碼放在前面需要引入微信的 js 文件后面了，所以我直接引入這個文件就完成了初始化操作。不過，我還是需要在引入后監(jiān)聽初始化成功和失敗的回調(diào)。

我司代碼：

setWeChatShareStyle(product, imgUrl)
function setWeChatShareStyle(product, imgUrl) {
  var success = function(res) {}
  var fail = function(res) {}
  var desc =
    product.description && product.description !== ""
      ? product.description
      : "后備描述"
  wx.ready(function() {
    var eventConf = {
      title: product.name,
      desc: desc,
      imgUrl: imgUrl,
      link: window.location.href,
      success: success
    }
    if (pubMethods.isAndroid()) {
      // 安卓適用于老接口，新接口不行
      wx.onMenuShareAppMessage(eventConf)
      wx.onMenuShareTimeline(eventConf)
      wx.onMenuShareQQ(eventConf)
      wx.onMenuShareQZone(eventConf)
    }
    if (pubMethods.isIOS()) {
      // iOS 適用于新接口，老接口不行
      wx.updateAppMessageShareData(eventConf, success)
      wx.updateTimelineShareData(eventConf, success)
    }
  })
  wx.error(fail)
}

最初我擔心，這樣可能會監(jiān)聽不到 wx.config 初始化的結(jié)果，結(jié)果發(fā)現(xiàn)還是可以監(jiān)聽到的，說明 wx.config 里面的操作是個異步操作。

統(tǒng)一傳參

如上面代碼所示，雖然根據(jù)微信的文檔，對于不同的接口，傳的參數(shù)稍有區(qū)別，但是我為了方便，都放在 eventConf 里面了，事實證明也是可以的（不可以我就要吐槽了，畢竟傳入的是對象）。

接口更新的 bug

雖然微信文檔上有接口更新的說明：

請注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即將廢棄。請盡快遷移使用客戶端 6.7.2 及 JSSDK 1.4.0 以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口。

但我實際上測試的結(jié)果是，安卓不支持新接口，iOS 支持，但是我如果把新老接口全用上，有一端會失敗，所以最終才有上面那個機型判斷的結(jié)果，對于不同的機型采用了不同的接口。

if (pubMethods.isAndroid()) {
  // 安卓適用于老接口，新接口不行
  wx.onMenuShareAppMessage(eventConf)
  wx.onMenuShareTimeline(eventConf)
  wx.onMenuShareQQ(eventConf)
  wx.onMenuShareQZone(eventConf)
}
if (pubMethods.isIOS()) {
  // iOS 適用于新接口，老接口不行
  wx.updateAppMessageShareData(eventConf, success)
  wx.updateTimelineShareData(eventConf, success)
}

分享的圖片不能是 base64

由于我司需要對圖片進行處理再去分享，所以當我用 canvas 導出 base64 作為 imgUrl 的時候，我發(fā)現(xiàn)是沒有效果的。

微信分享自定義樣式

微信分享圖標設(shè)置，以及 wx.config 配置