解决ios页面跳转后调用微信js-sdk签名认证失败

如果前端项目使用的history模式的路由,当第一次打开的是首页或者其他页面,然后跳转到活动页面,再调用wx.config进行签名验证时,会签名验证失败。因为ios端的js-sdk在验证签名时取到的是第一次打开的页面地址,而不是当前的地址。

在官方文档有提到这一点,但是对于IOS的问题是一个字也没提到。

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。

解决方案

  1. 在项目初始化的时候,如果在ios环境,则把当前页面的url缓存起来。
  2. 活动页面在获取签名的时候,去读取缓存的url,如果读不到则用当前页面的url。
  3. 获取到签名后再调用 wx.config 函数。

经过测试,是可以多次重复调用 wx.config 的,重点就是在ios端调用的时候,签名要传打开的第一个页面url。

举个🌰,我这边是 uni-app 的,就在 onLaunch 生命周期里缓存初始页面url。

javascript 复制代码
export default {
    onLaunch: function (option) {
        // #ifdef H5
        // 如果当前设备是ios
        if (global.SystemInfo.platform === "ios") {
            // 缓存初始页面url
            global._wxsdkUrl = window.location.href.split("#")[0]
        }
        // #endif
    }
}

然后在活动页面获取签名调用 wx.config 时,这么写

javascript 复制代码
// 初始化微信js-sdk
async initWx(){
    // 先尝试获取ios的缓存url,获取不到就取当前页面的url
    let url = global._wxsdkUrl || window.location.href.split("#")[0]
    // 调用后端接口获取签名
    const res = await getWxJsSdkSign({url: url})
    
    wxsdk.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: res.appId, // 必填,公众号的唯一标识
        timestamp: res.timestamp, // 必填,生成签名的时间戳
        nonceStr: res.nonceStr, // 必填,生成签名的随机串
        signature: res.signature,// 必填,签名
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填,需要使用的JS接口列表
    });
}
相关推荐
爱勇宝1 小时前
我做了一个排版器,也踩了一遍富文本复制的坑
前端·后端·微信
张人玉2 小时前
基于 Vue 3 + ECharts + Express + SQLite 构建的新能源汽车销量数据分析与可视化平台——新能源汽车销量数据分析系统
数据库·vue.js·sqlite·echarts
清风programmer4 小时前
H5与小程序通信
前端·vue.js·uni-app
Cobyte5 小时前
通过 Vite 运行手写的模板编译器
前端·javascript·vue.js
张人玉5 小时前
基于 Vue 3 + ECharts + Express + SQLite 构—— LDA 模型的新闻舆论主题识别与情感分析系统
vue.js·echarts·express
无人生还6 小时前
从 Vue3 到 React · 快速上手系列第 4 篇:条件渲染与列表渲染
前端·vue.js·react.js
咩咩啃树皮6 小时前
第46篇:Vue3 Router工程化进阶——懒加载+嵌套路由+全局守卫+权限控制
javascript·vue.js·ecmascript
咩咩啃树皮6 小时前
第44篇:Vue3侦听器完全精讲——watch与watchEffect区别、深度监听、异步业务落地
前端·javascript·vue.js
晓得迷路了7 小时前
栗子前端技术周刊第 139 期 - Nuxt 4.5、Vue 3.6 RC、Angular 发布节奏...
前端·javascript·vue.js
程序软件分享21 小时前
多语言DAPP综合盘交易所系统源码搭建剖析
vue.js·金融·开源