问题描述

微信公众号上挂载的H5程序，调用wx.getLocation出现的错误–invalid signature

程序之前调用这个接口一直都没问题（IOS和安卓都没问题），但是上周五客户的公司有员工换了华为的最新的某款手机，系统为纯血鸿蒙在调用定位接口的时候就出现了invalid signature。

检查问题

客户的公众号就绑定了服务器域名，没办法只能在尽量不影响客户使用的情况下去测试。

网上搜了一下关于鸿蒙系统微信的这个问题，相关内容还是比较少的。

先按照官方文档出的问题排查流程检查一遍吧，按照步骤检查下来没有问题（其他系统都没问题，文档中列出的问题之前都是解决了的）

没招了，但是想到了之前解决IOS的时候就是因为通过<font style="color:#080808;background-color:#ffffff;">window.location.href</font>获取到的url和IOS微信系统实际感知的URL不同，IOS中用于获取签名的URL应该是首次进入程序访问的页面的URL。想着是不是纯血鸿蒙也是这个问题。

马上进行验证

问题解决

1） 缓存首次进入的URL，我是在App.vue中缓存的

localStorage.setItem("homeUrl",href)

2） 判断系统类型

1. 先打印一下navigator.userAgent中鸿蒙系统的标识是什么

2. 根据这个标识去判断类型，使用缓存的首页url还是当前页面的url

export async function getConfigParams() {
  
 let localUrl = encodeURI(window.location.href.split('#')[0])

  //获取当前设备类型
  const ua = navigator.userAgent.toLowerCase()
  const isIOS = /iphone|ipad|ipod/gi.test(ua)
  const isHarmony = /openharmony/gi.test(ua)
  if (isIOS || isHarmony) {
    localUrl = encodeURI(localStorage.getItem('homeUrl'))
  }

  const res = await request({
    url: '/wx/config',
    method: 'get',
    params: {
      url: localUrl,
      
    }
  })
  return res.result
}

3） 进入页面就调用wx.config,我之前写的是调用getLoaction之前才去调用config。

查询这个问题的时候看到很多博客的做法都是进入程序后就先把所有要用的接口的权限都初始化了。所以改为了在mounted中执行config

export async function initConfig() {
  // 登录之后获取获取签名权限
  const configParams = await getConfigParams() // 请求后端获取签名串、随机串等参数
    wx.config({
      debug: false,
      ...configParams,
      jsApiList: ['getLocation'],
      success: () => {
        console.log('wx.config配置完成')
      },
      fail: (err) => {
        Toast(`wx.config配置失败：${JSON.stringify(err)}`)
        console.log('wx.config配置失败:', err)
      }
    })
}

问题最后就解决了！！！！

问题解决的有点笨，属于是试出来的