微信公众号+Vue+JS-SDK配置注册失败，显示config:fail,Error: 系统错误，错误码：63002,invalid signature等解决方法

本文链接：https://blog.csdn.net/qq_28218253/article/details/106534290

用vue做微信公众号调用js-sdk遇到的问题

问题1（JS-SDK在IOS中报签名无效invalid signature）

解决办法
在VUE路由进去你要操作的页面时进行config接口注入
首先打开工程文件中的router/index.js

IOS系统的config接口注入
在这里插入图片描述
关于isIOS 和requestWxStr方法说明

import wx from 'weixin-js-sdk' // 这个时JS-SDK的一个插件具体使用百度下
import api from '../../../API/API'// 接口

// 提取出来的公共方法
/*
* 判断是否IOS环境
* */
export default {
  isIOS () {
    let isIphone = navigator.userAgent.includes('iPhone')
    let isIpad = navigator.userAgent.includes('iPad')
    return isIphone || isIpad
  },
  requestWxStr (topath) {
    // alert(location.href)
    // 需要用到接口的页面
    var params = {
      // 'urlName': `${location.href.split('.com')[0]}.com${topath}`
      'urlName': location.href.split('#')[0]
    }
    // alert(params.urlName)
    api.WechatAPI.WechatPayPageDate(params).then(res => {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.noncestr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名，见附录1
        jsApiList: [
          'openLocation',
          'chooseWXPay',
          'chooseImage',
          'uploadImage'
        ]
      })
      wx.error(function (res) {
        // 注册失败
        console.log('注册失败')
        this.$toast.fail('请返回上一层')
        alert('请返回上一层')
      })
    })
  }
}

安卓项目的Confing接口注入
（吐槽下，安卓感觉直接在页面注入没有一点毛病，比IOS好用多了）
安卓机型的话直接在created中进行confing接口注入就行了，做个判断就行了是IOS就不用做了

methods: {
    // 跳转页面
    GOpage (toUrl) {
      if (toUrl !== null) {
        if (toUrl === 'TakingPictures') {
          console.log('进来拍照了')
          this.TakingPictures()
          return
        }
        this.$router.push({path: toUrl})
      }
    },
    // 拍照
    TakingPictures () {
      this.$toast('拍照')
      let _this = this
      this.$wx.ready(function () {
        _this.$wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            var localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log(localIds)
          },
          cancel: function (res) {
          },
          fail: function (res) {
            // _this.$toast.fail(res.msg)
            _this.$toast.fail('加载中。。。')
            _this.reload() // 调用假JS-SDK 失败重新刷新页面，则会congfig会注入成功
          }
        })
      })
    },
    // 注入配置
    wechatconfig () {
      let params = {urlName: window.location.href.split('#')[0]}
      // 该接口在那个页面使用
      // let params = {urlName: window.location.href}
      this.$api.WechatAPI.WechatPayPageDate(params).then(res => {
        this.$wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.noncestr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名，见附录1
          jsApiList: ['chooseImage']
        })
      })
    }
  },
  created () {
    // 是不是IOS端 就开始注入配置
    if (!JSSDKHlep.isIOS()) {
      console.log('我不是IOS用户，我在注册需要的接口')
      this.wechatconfig() // 注入微信配置
    }
  }