自定義微信分享樣式

博客地址

Preface

產品但願咱們在微信分享出去的連接，有本身的樣式，而不是僅僅一個連接。用產品的話來講，你發給客戶一個連接，客戶敢點麼？？？

聽着比較有意思，不過也不能說徹底沒有道理，畢竟各類各樣的詐騙你們也是有所耳聞，經確認，產品想要：

而咱們當前分享是：

Main

總監給我提示說，微信有 js-sdk ，能夠在 js 裏設置這個樣式。

因而，我找到了微信 JS-SDK 說明文檔，基本上就是根據文檔走些配置，這個要和產品那邊要些帳號密碼，改些東西之類，根據文檔來，沒什麼好說的。

大致流程以下：

1. 步驟一：綁定域名
2. 步驟二：引入 JS 文件
3. 步驟三：經過 config 接口注入權限驗證配置

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

1. 步驟四：經過 ready 接口處理成功驗證

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

1. 步驟五：經過 error 接口處理失敗驗證

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

實際操做的時候，遇到了幾點麻煩，這裏須要提一下：

測試的時候，注意開啓 debug 模式，方便定位問題。

wx.config({ debug: true /*其餘參數*/ })

出於安全考慮，開發者必須在服務器端實現簽名的邏輯。

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

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，須要使用的JS接口列表
});

後臺在實現的時候，可能須要注意文檔提示的兩點：

1. access_token（有效期 7200 秒，開發者必須在本身的服務全局緩存 access_token）
2. jsapi_ticket（有效期 7200 秒，開發者必須在本身的服務全局緩存 jsapi_ticket）

由於這會致使一開始生成的簽名沒錯，可是兩個小時後就失效了。

代碼邏輯

一般的邏輯都是前端從後臺拿到上面的幾個字段，在前端完成初始化，而後添加初始化成功和失敗的回調。

示例：

var link = location.href
$.ajax({
  url: 'your_url', //後臺給你提供的接口
  type: 'GET',
  data: { url: link },
  async: true,
  dataType: 'json',
  success: function(data) {
    wx.config({
      debug: false, // 開啓調試模式,調用的全部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 文件後面了，因此我直接引入這個文件就完成了初始化操做。不過，我仍是須要在引入後監聽初始化成功和失敗的回調。

我司代碼：

<script src="./js/shareInWeChat.js?debug=1"></script>
<!-- 裏面包含了 wx.config({}) 的代碼-->
<!-- 經過 debug 參數來切換調試模式  -->

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)
}

最初我擔憂，這樣可能會監聽不到 wx.config 初始化的結果，結果發現仍是能夠監聽到的，說明 wx.config 裏面的操做是個異步操做。

代碼兼容性

• 統一傳參

如上面代碼所示，雖然根據微信的文檔，對於不一樣的接口，傳的參數稍有區別，可是我爲了方便，都放在 eventConf 裏面了，事實證實也是能夠的（不能夠我就要吐槽了，畢竟傳入的是對象）。

• 接口更新的 bug

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

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

但我實際上測試的結果是，安卓不支持新接口，iOS 支持，可是我若是把新老接口全用上，有一端會失敗，因此最終纔有上面那個機型判斷的結果，對於不一樣的機型採用了不一樣的接口。

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 的時候，我發現是沒有效果的。

Ending

Reference

• 微信分享自定義樣式
• 微信分享圖標設置，以及 wx.config 配置