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

   

     以上就是詳細的解決方案，親測有效，希望能幫到大家。

     如需轉載請注明出處：https://www.cnblogs.com/zishang91/p/10755488.html，以便有錯誤可以及時修改，若有錯漏不足之處，請見諒並且指點，謝謝！！！