[微信公众号开发][设备坑] 微信SDK授权 invalid signature以及封装

前言

公众号项目开发，做微信授权的时候，在测试的时候是直接调用页面链接授权，直接弹出。但是从首页进入却调不出，进而搜索发现是微信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
}