公衆號微信分享踩坑記錄

產品需求

在微信內分享須要手動配置的分享地址、分享圖片與內容描述，引導用戶分享，並在微信分享成功回調內進行相應的操做。

開工

1. 導入微信jssdk

import wx from 'weixin-js-sdk'
複製代碼

2. 封裝函數獲取微信分享必填參數

function wxConfig(url){
  let config = {
    debug: false, // 開啓調試模式
    appId: opt.appId, // 必填，公衆號的惟一標識
    timestamp: opt.timestamp, // 必填，生成簽名的時間戳
    nonceStr: opt.nonceStr, // 必填，生成簽名的隨機串
    signature: opt.signature,// 必填，簽名
    jsApiList: [
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareQZone'
    ] // 必填，須要使用的JS接口列表
  }
}
複製代碼

3. 配置wxShare

採起axios和攔截器進行封裝，方便之後根據業務進行各類判斷和處理

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
  let imgUrl = `${location.origin}/static/images/logo.jpg`
  let url = location.href; // 分享默認連接
  var _opt = {
    title: '分享標題',
    desc: '分享描述',
    link: url,
    imgUrl: encodeURI(imgUrl.trim()),
    success: function () {
      // 設置成功
      callback && callback()
    }
  }
複製代碼

測試結果

1.同一套程序，andriod分享正常，ios分享報簽名不正確，主要緣由是微信的ios和安卓處理方式不同，ios不會刷新當前的頁面地址，使用的是history的記錄地址，因此每次分享出來的連接，都是第一個進入系統頁面的連接，當跳轉到子頁面的時候，系統就會識別打開的url和簽名的url不一致致使簽名不正確

2.因爲單頁面的hash模式會自帶#號，可是分享的時候會將#號後面的參數變成無效，致使想傳參數都傳不過去，能夠作一個頁面沒有#號的，而後統一帶參數分享到這個頁面而後再重定向到指定的vue頁面

解決方法

在向後臺發送請求獲取微信簽名的時候將傳給後臺的URL的#後面的參數截去，後臺根據截取完的URL生成簽名就能實現安卓和iOS分享回調成功的問題。

let url = encodeURIComponent(window.shareLink)
Vue.http.get(`/wxoauth/getJsapiSignature?url=${url}`)
  .then(res => {
    wxhare(res.body.data)
  })
  .catch(function (response) {
    console.log(response);
  });
複製代碼