記錄一次vue2.0（history模式）下微信自定義分享的坑

One day,發表於2018-09-04
Vue模式

吐槽：關於微信自定義分享前前後後翻了文件兩三遍，感覺大佬們寫文件都是這麼瀟灑麼？躲在角落裡的我瑟瑟發抖了兩天.....

下面我們（帶著憤怒）來看微信文件來進行開發：傳送門

1. 根據文件來配置（公眾號安全域名，引入官方微信js）

2. 配置許可權，根據微信文件描述：所有需要使用JS-SDK的頁面必須先注入配置資訊

wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
    appId: '', // 必填，公眾號的唯一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS介面列表
});

----->>>>>  通過呼叫後臺介面來獲取上面的 （* 必填項）, 並在mounted開始配置初始化複製程式碼

3. 通過ready介面處理成功驗證（直接在ready方法內寫分享朋友以及朋友圈）

wx.ready(function(){

  // 分享到朋友圈
  wx.onMenuShareTimeline ({
    title: `title`,
    desc: `desc`,                           //  分享描述
    link:  `自己分享的路由地址`, 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致複製程式碼
    imgUrl: `自定義圖示`, // 分享圖示
    success: function () {
    },
    cancel: function () { 
    }
  });

  // 分享給朋友
  wx.onMenuShareAppMessage({
    title: `title`,
    desc: `desc`,
    link:  `自己分享的路由地址`, 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
    imgUrl: `自定義圖示`, // 分享圖示複製程式碼
    success: function () {
    },
    cancel: function () { 
    }
  });

  wx.error(function(){
    salert('驗證失敗');
  });
});複製程式碼

通過以上三個步驟，微信分享朋友以及朋友圈功能完成，很高興的開啟本地微信開發者工具除錯 >>> 成功了！！！！

帶著自豪的心情告訴PR功能開發完上線。

過兩天PR過來跟我說，微信分享有問題，WTF？？前兩天還可以，突然就出問題了，下面是線上分享的截圖：

記錄一次vue2.0（history模式）下微信自定義分享的坑

接下來開始逐一來排查到底是哪出了問題，首先檢查微信白名單、wx.config配置項、後臺資料、以及非同步初始化，然後又去開發者工具看了一下，並沒有任何問題。於是又推上去了，發現還是分享不出來，又去微信看了一下文件，發現並沒有違規字型以及任何違反微信文件的內容。反覆分享發現一個規律。

重點來了！！！

只有在第一次分享出現標題以及連線丟失，重新整理一次當前頁面後再去分享就成功了，於是谷歌搜了一下，發現微信對SPA單頁面分享並不是那麼友好（突然讓我想起了以前的IE...），在ios下面第一次分享的連結永遠都是你第一次訪問的url。看下圖：

記錄一次vue2.0（history模式）下微信自定義分享的坑

在ios系統要重新整理一次來才能正確分享，並且要儲存當前url

解決辦法：

在src/assets/js目錄下面新建一個share.js，並在main.js進行全域性註冊，在每個元件進行呼叫的同時通過beforeRouteEnter鉤子判斷ios終端，然後通過assign()方法載入一個新的文件，自此微信自定義分享結束啦...........,來看一下自定義分享成功之後的成果:

記錄一次vue2.0（history模式）下微信自定義分享的坑

beforeRouteEnter具體實現方法：

beforeRouteEnter (to, from, next) {
  var u = navigator.userAgent;
  var IOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
  // 修復iOS版微信HTML5 History相容性問題
  if (IOS && to.path !== location.pathname) {
    // 此處不能用location.replace
    location.assign(to.fullPath)
  } else {
    next()
  }
}複製程式碼

下面share.js是具體實現方法：

  // ajax來請求wexin 
  function getWxChat() {
     return new Promise((resolve, reject) => {
       $.ajax({
         url: 'https://res.wx.qq.com/open/js/jweixin-1.0.0.js',
         dataType: "script",
         cache: true,
      })
      .done(function () {
       resolve(window.wx)
      })
      .fail(function (error) {
        reject(error);
      });
    })
 }

 // 後臺索要簽名演算法
  function backAround() {
    return new Promise((resolve, reject) => {
      $.ajax({
        url: `XXX.com`,//後臺索要的演算法簽名
        method: 'POST',
        data: {
          url: window.location.href.split('#')[0],
        },
        type : 'json'
      }).done(function(ret) {
        resolve(ret)
      }).fail(function(ret) {
        reject( ret );
      })
    })
  }
export function wechatShare(shareDate) {
  return new Promise(async function(resolve, reject) {
    try{
      let isWechat=navigator.userAgent.indexOf('MicroMessenger')>-1 //判斷為微信瀏覽器

      if(!isWechat){
        return resolve('not weichat')
      }
      if(!window.wx){
        await getWxChat();
      }

      var defaultData = {
        title: `分享的標題`,
        content: `內容`,
        link: `${window.location.href}`,
        logo: ``, //分享出來的圖片的
        success: function (res) {
        },
      }

      let data = { ...defaultData, ...shareDate }
      let ret = JSON.parse(await backAround())

      wx.config({
        debug: false, // 開啟除錯模式,
        appId: 'XXXXX', // 必填，公眾號的唯一標識
        timestamp: ret.timestamp, // 必填，生成簽名的時間戳
        nonceStr: ret.nonce_str, // 必填，生成簽名的隨機串
        signature: ret.signature,// 必填，簽名，見附錄1
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
      })

      wx.ready(function () {

        wx.onMenuShareTimeline({
          title: data.title,
          desc: data.content,
          link: data.link,
          imgUrl: data.logo,
          dataUrl: '',
          success: data.success,
          cancel: function () {}
        })

        wx.onMenuShareAppMessage({
          title: data.title,
          desc: data.content,
          link: data.link,
          imgUrl: data.logo,
          dataUrl: '',
          success: data.success,
          cancel: function () {}
        })
      
      })
    }catch(error){
      reject( error );
    }
  })
}

複製程式碼

最後想說下寫內容的時候其實是在記錄自己的血淚史,也給大家分享下微信自定義分享的坑,微信的文件有時候會讓人懷疑人生，懷疑codeing,如果大家有什麼更好的解決方法可以交流下。

相關文章