Vue3 iOS微信JSSDK授权签名错误及图片选择兼容

关注

VIP免费原创 2024-11-05 11:29:45 1.4k 阅读 AI 写同款· GEO 优化 ›

vue 项目中使用微信jssdk自定义分享 vue项目的页面，要在微信中打开的时候能够分享出去的时候自定义。没有自定义，使用微信默认的分享，显示的是内容都是默认的页面标题和链接，图片部分一般也是灰色的。使用微信的jssdk可以自定义这些内容。 1.安装 vue项目是用vue-cli搭建的，首先安装插件。插件名字是weixin-js-sdk，有的是用npm的方法安装，我是使用vue ui出来的视图化窗口上操作安装的（vue-cli3版本可以让之前用命令运行项目安装插件等在视图化的窗口上操作，更便捷，直接点击按钮操作。）使用视图化操作方法是：在命阅读详情

转载请注明出处：https://blog.csdn.net/hx7013/article/details/143502680

一、项目概述

Vue3 + Vite + Vue-Router 4+ JS-SDK 1.6

由于之前开发调试都是在微信开发者工具及 Android 平台，后上线前测试发现 iOS 平台会出现 invalid signature 及图片选择后预览失败的问题。
查询资料后逐步解决，重新整理了下问题原因，及修复的详细代码和说明。

二、iOS 签名错误 invalid signature

由于我 vue-router 使用的是 history 模式，页面跳转后在iOS使用 window.location.href 获取到的地址签名后 wx.config 会报错 invalid signature ，使用微信 JS 接口签名校验工具对比过，确认签名无误，但是还是会报该错误。各种查询后得知传给后端签名的URL地址 iOS 在 vue-router history 模式下，需要传刚进入的页面url， Android可以实时window.location.href取当前url。

解决方法1:
vue-router改为hash模式。(实际就是保证了地址的不变，但是不推荐该做法，对于我这边来说，对现有项目影响较大)
解决方法2:
存储首次启动时的地址，获取JSSDK签名时判断是iOS 还是 Android，区别传入首次进入的地址或当前地址即可。

解决方法2代码:

工具类WxUtils.ts

/**
 * iOS微信内JSSDK授权需提交启动地址
 */
export const WX_ENTRY_URL_TAG = 'wxEntryUrl'

/**
 * 是否为微信浏览器
 */
export function isWxBrowser() {
   
   
    const ua = navigator.userAgent.toLocaleLowerCase()
    return /micromessenger/.test(ua)
}

/**
 * 是否为iOS浏览器
 */
export function isIOSBrowser() {
   
   
    const ua = navigator.userAgent.toLocaleLowerCase()
    return /iphone|ipad|ipod/.test(ua)
}

/**
 * 获取JSSDK授权地址
 * App.vue -> sessionStorage.setItem(WX_ENTRY_URL_TAG, window.location.href)
 */
export function loadJSSDKUrl(): string {
   
   
    let sdkUrl = window.location.href