Vue微信自定義分享時安卓系統config:ok，ios系統config:invalid signature簽名錯誤，或者安卓和ios二次分享時均config:ok可是分享無效的解決辦法

       簡述需求：要求指定頁面能夠進行微信自定義分享(自定義標題，描述，圖片，連接)，剩下的頁面隱藏全部基礎接口。二次分享依然能夠正常使用,切換至其餘頁面也能夠正常進行自定義分享。

        這兩天在作微信自定義分享的需求，相信你們都遇到過這問題，就是使用JS-SDK的頁面注入配置信息時安卓系統config:ok，ios系統config:invalid signature簽名錯誤。而後你們都去查微信jssdk的文檔，裏面所說的config:invalid signature可能緣由你都一個個查驗過發現沒有問題，可是仍是提示簽名錯誤，是否是很抓狂很蛋疼？？？而後你再去查請求配置信息時的動態URL是否有問題，你會發現安卓ios打印出來的url都是正確的，問題究竟出在哪裏呢？？？就問你難不難受！！！

        當我實現了安卓和ios系統均成功自定義分享時，出現了另外一個bug，就是二次分享時ios系統當前頁面正常有效，切換至其餘頁面時自定義分享失效了，可是debug發現安卓ios都提示config:ok，然而分享卻無效，就問你難不難受！！！

        查閱了網上不少的解決方案，沒有一個是真的能解決我所遇到的問題。說二次分享失效由於微信自帶from等參數的、解決方案寫一半的、沒有效果的，讓我感到深深的坑爹感。最後研究出來瞭解決方案，不須要對連接作清除微信帶過來的參數，也不須要作太多的處理。

        安卓系統簽名沒問題，ios系統簽名有問題，那麼確定就是url的問題了。其實問題就出在ios系統對vue-router的history的支持上，因爲Vue的spa特色，儘管你打印出來都是你所要的當前頁面url，只要你不刷新頁面，ios獲取到的url永遠是你進入這個項目的第一個url，這樣的話你請求籤名就會變成動態url不一致致使簽名失敗。不信？？？你能夠到簽名失敗的那個頁面手動刷新一次，而後你會發現此時簽名就成功了，由於刷新後獲取的第一個url就是你當前的頁面url。既然如此咱們就須要在如何獲取真正的動態url這裏作文章，至於那些設置js安全域名、獲取timestamp，nonceStr，signature這些我就不說了，百度一下大把解決方案。

        解決方法就是在路由守衛afterEach中判斷是ios系統時保存第一次進入時的連接地址，每當路由進入頁面時判斷當前頁面地址和保存的第一次進入的連接地址是否一致，不一致時用location.replace刷新頁面，獲取刷新後的地址進行請求。安卓系統則每次都拿當前頁面地址進行請求。具體代碼以下：

 1.在util.js文件中定義函數：

import { getSignature } from '@/api/api'

// 判斷手機系統
export function isAndroid () {
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
  if (isAndroid) {
    return true
  } else {
    return false
  }
}

2.在wechatConfig.js文件中定義函數：

import { getSignature } from '@/api/api'

/* eslint-disable no-undef */
// 微信注入依賴config校驗
export function getWxConfig (url) {
  getSignature(encodeURIComponent(url)).then(data => {
    if (data.result_code === '000') {
      wx.config({
        debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
        appId: data.result.appId, // 必填，公衆號的惟一標識
        timestamp: data.result.timestamp, // 必填，生成簽名的時間戳
        nonceStr: data.result.noncestr, // 必填，生成簽名的隨機串
        signature: encodeURIComponent(data.result.signature), // 必填，簽名，見附錄1
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showAllNonBaseMenuItem', 'hideAllNonBaseMenuItem'] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
      })
    } else {
      console.log('獲取受權信息錯誤')
    }
  }).catch(err => {
    console.warn(err)
    console.log('獲取受權失敗')
  })
}

// 微信分享配置 顯示微信瀏覽器右邊菜單中的顯示全部功能按鈕接口
export function wxShare (title, desc, url, imgUrl) {
  wx.ready(function () {
    wx.showAllNonBaseMenuItem()
    wx.onMenuShareAppMessage({ // 分享給朋友
      title: title, // 分享標題
      desc: desc, // 分享描述
      link: url, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      success: function () {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function () {
        // 用戶取消分享後執行的回調函數
      }
    })

    wx.onMenuShareTimeline({ // 朋友圈分享
      title: title, // 分享標題
      link: url, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      success: function () {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function () {
        // 用戶取消分享後執行的回調函數
      }
    })

    wx.onMenuShareQQ({
      title: title, // 分享標題
      desc: desc, // 分享描述
      link: url, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      success: function () {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function () {
        // 用戶取消分享後執行的回調函數
      }
    })

    wx.onMenuShareWeibo({
      title: title, // 分享標題
      desc: desc, // 分享描述
      link: url, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      success: function () {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function () {
        // 用戶取消分享後執行的回調函數
      }
    })

    wx.onMenuShareQZone({
      title: title, // 分享標題
      desc: desc, // 分享描述
      link: url, // 分享連接
      imgUrl: imgUrl, // 分享圖標
      success: function () {
        // 用戶確認分享後執行的回調函數
      },
      cancel: function () {
        // 用戶取消分享後執行的回調函數
      }
    })
  })
  wx.error(function (e) {
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
    console.warn(e)
  })
}

// 隱藏微信瀏覽器右邊菜單中的全部非基礎按鈕接口
export function wxMenuHide () {
  wx.ready(function () {
    wx.hideAllNonBaseMenuItem()
  })
  wx.error(function (e) {
    // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查看，對於SPA能夠在這裏更新簽名。
    console.warn(e)
  })
}

3.在路由表標記須要分享的頁面和具體自定義分享的標題，描述，圖片：

const routerMap = [
  {
    path: '/',
    component: () => import('@/views/home'),
    meta: {
      title: '首頁',
      keepAlive: true,
      isShare: true,
      shareName: '微信自定義分享',
      shareDesc: 'Vue微信自定義分享時安卓系統config:ok，ios系統config:invalid signature簽名錯誤，或者安卓和ios分享時均config:ok可是分享無效的解決辦法',
      shareImg: 'https://xxx.png'
    }
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home'),
    meta: {
      title: '首頁',
      keepAlive: true,
      isShare: true,
      shareName: '微信自定義分享解決了嗎？',
      shareDesc: '這些都是實測有效才發佈的文章，但願能夠幫到大家！',
      shareImg: 'https://xxx.png'
    }
  },
  {
     path: '/name',
     name: 'name',
     component: () => import('@/views/name'),
     meta: {
       title: '詳情頁',
       keepAlive: true,
       isShare: false
     }
  }
]

4.在路由守衛寫入函數：

import { isAndroid } from '@/utils/util'
import { getWxConfig, wxShare, wxMenuHide } from '@/utils/wechatConfig'

router.afterEach((to, from) => {
  /** 這段是我判斷項目正式服和測試服路徑的代碼，請根據實際拼接本身項目連接路徑 **/
  let path = getPublicPath().replace(/\//g, '')
  let environment = process.env.NODE_ENV
  let version = process.env.VUE_APP_VER
  let FRONT_BASE
  if (environment === 'production' && version === 'prod') {
    FRONT_BASE = `${location.protocol}//${location.host}`
  } else if (environment === 'production' && version === 'test') {
    FRONT_BASE = `${location.protocol}//${location.host}/${path}`
  } else {
    FRONT_BASE = `${location.protocol}//${location.host}`
  }
  let url = FRONT_BASE + to.fullPath
  /** 這段是我判斷項目正式服和測試服路徑的代碼，請根據實際拼接本身項目連接路徑 **/
  if (isAndroid()) { // 非ios設備，切換路由時候進行從新簽名
    getWxConfig(url)
  } else { // ios設備，刷新頁面進行從新簽名
    if (window.entryUrl === '' || window.entryUrl === undefined || window.entryUrl === null) {
      window.entryUrl = url
    }
    if (window.entryUrl !== url) {
      window.entryUrl = url
      window.location.replace(url)
    } else {
      getWxConfig(window.entryUrl)
    }
  }
  if (to.meta.isShare) {
    wxShare(to.meta.shareName, to.meta.shareDesc, url, to.meta.shareImg)
  } else {
    wxMenuHide()
  }
})

   

     以上就是詳細的解決方案，親測有效，但願能幫到你們。

     如需轉載請註明出處：http://www.javashuo.com/article/p-bgapukjg-gg.html，以便有錯誤能夠及時修改，如有錯漏不足之處，請見諒而且指點，謝謝！！！