前言

公眾號專案開發，做微信授權的時候，在測試的時候是直接呼叫頁面連結授權，直接彈出。但是從首頁進入卻調不出，進而搜尋發現是微信SDK授權報錯。

百度了一下類似的文章：https://blog.csdn.net/skyblacktoday/article/details/88344096

原因

由於在ios和android中，location.href在spa頁面的機制不同（不同在於ios是隻要不重新整理頁面，href就不會改變）。所以ios獲得的url並不是配置需要的url

解決

蘋果只需要配置一次，之後直接呼叫即可

安卓需要每次使用微信SDK都配置

初版封裝好的程式碼：

wx.js

import wx from 'weixin-js-sdk'

class Wx {
  static instance
  static getInstance() {
    
 
if (!Wx.instance) {
      Wx.instance = new Wx()
    }
    return Wx.instance
  }

  constructor() {
    this.wx = wx
    this.isConfig = false
    this.configOptions = {
      debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
      appId: undefined, // 必填，公眾號的唯一標識
 

      timestamp: undefined, // 必填，生成簽名的時間戳
      nonceStr: undefined, // 必填，生成簽名的隨機串
      signature: undefined, // 必填，簽名
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 必填，需要使用的JS介面列表
    }
  }

  isIos() {
    const u = navigator.userAgent
    
 
// const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 //安卓
    return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios終端
  }

  isNeedConfig() {
    return !(this.isIos() && this.isConfig)
  }

  /*
  * debug 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
  * appId 必填，公眾號的唯一標識
  * timestamp 必填，生成簽名的時間戳
  * nonceStr 必填，生成簽名的隨機串
  * signature 必填，簽名
  * jsApiList 必填，需要使用的JS介面列表
  * */
  config(options) {
    return new Promise((resolve, reject) => {
      // ios系統一次會話只需要配置一次
      // console.log('是否ios作業系統', this.isIos())
      // console.log('是否配置', this.isConfig)
      if (!this.isNeedConfig()) {
        resolve()
      } else {
        this.wx.config(options)
        this.wx.ready(() => {
          if (this.isIos()) {
            this.isConfig = true
          }
          resolve()
        })
        this.wx.error((err) => {
          reject(err.errMsg)
        })
      }
    })
  }

  share(options) {
    this.wx.onMenuShareTimeline(options)
    this.wx.onMenuShareAppMessage(options)
    this.wx.onMenuShareQQ(options)
    this.wx.onMenuShareWeibo(options)
  }

  hideMenuItems(menuList) {
    this.wx.hideMenuItems({ menuList })
  }
}

export default Wx

代理呼叫（介面呼叫僅供參考

import Wx from './wx'
import api from '@/api'
const wx = Wx.getInstance()

function config() {
  return new Promise((resolve, reject) => {
    if (!wx.isNeedConfig()) {
      resolve()
    } else {
      api.main.wechatConfig({
        url: window.location.href
      }).then((res) => {
        const { appId, signature, timestamp, nonceStr } = res
        const jsApiList = [
          'onMenuShareWeibo',
          'onMenuShareQZone',
          'startRecord',
          'stopRecord',
          'onVoiceRecordEnd',
          'playVoice',
          'pauseVoice',
          'stopVoice',
          'onVoicePlayEnd',
          'uploadVoice',
          'downloadVoice',
          'chooseImage',
          'previewImage',
          'uploadImage',
          'downloadImage',
          'translateVoice',
          'getNetworkType',
          'openLocation',
          'getLocation',
          'hideOptionMenu',
          'showOptionMenu',
          'hideMenuItems',
          'showMenuItems',
          'hideAllNonBaseMenuItem',
          'showAllNonBaseMenuItem',
          'closeWindow',
          'scanQRCode',
          'chooseWXPay',
          'openProductSpecificView',
          'addCard',
          'chooseCard',
          'openCard',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          'onMenuShareQQ'
        ]
        return wx.config({
          debug: false, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
          appId: appId, // 必填，公眾號的唯一標識
          timestamp: timestamp, // 必填，生成簽名的時間戳
          nonceStr: nonceStr, // 必填，生成簽名的隨機串
          signature: signature, // 必填，簽名
          jsApiList: jsApiList // 必填，需要使用的JS介面列表
        })
      }).then(() => {
        resolve()
      }).catch((err) => {
        // reject(err)
        console.log(err)
      })
    }
  })
}

/*
* title = '', // 分享標題
* desc = '', // 分享描述
* link = '', // 分享連結
* imgUrl = '' // 分享圖示
* */
export function share(options) {
  config().then(() => {
    // console.log('wx-utils', options)
    wx.share(options)
  })
}

/**
 * 隱藏右上角的選單欄目
 * @param menuList 要隱藏的選單項，只能隱藏“傳播類”和“保護類”按鈕，所有menu項見sdk附錄3
 */
export function hideMenuItems(menuList) {
  config().then(() => {
    // console.log('wx-utils', menuList)
    wx.hideMenuItems(menuList)
  })
}

const install = (Vue) => {
  Vue.prototype.$wx = {
    share, hideMenuItems
  }
}

export default {
  install
}