详解IOS微信上Vue单页面应用JSSDK签名失败解决方案


Posted in Javascript onNovember 14, 2018

背景

手机型号:

型号:iphone 7 / iphone xs max
版本:ios 10.3.1 / ios 12.1
微信版本:WeChat 6.7.3

问题还原:

Vue应用(vue-router)上使用history模式,在某个页面内调用微信JSSDK相关API,如扫码、分享等,使用当前页面URL总会出现签名错误(invalid signature),导致API调用失败。

问题根源

Vue-Router进行路由切换的时候,总是会操作浏览器的历史记录,从而响应页面URL变化。

在JSSDK文档页面有这么一句话:

同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复

但根据多次测试情况来看,情况恰好相反,在Android下直接使用 window.location.href 得出的URL进行签名是完全没问题(可能已升级至Android6.2以上版本),在IOS上就不行了。

这是因为在IOS上,无论路由切换到哪个页面,实际真正有效的的签名URL是【第一次进入应用时的URL】。

比如进入应用首页是: https://m.app.com,需要使用JSSDK的页面A是:https://m.app.com/product1/123,无论从首页进入到A页面之前,中间跳转过多少次路由,最终签名有效的URL还是首页URL。

解决方案

方案一

直接粗暴处理方式:

在进入需要使用JSSDK页面(B)的前一个页面(A),即 A > B,直接使用 window.location.href 或 window.open 打开B页面,此时因为B页面是直接刷新方式进入,所以当前B页面URL无论IOS或Android都是可以直接拿来签名的。

这种方式处理缺点也很明显,如页面刷新抖动太厉害不够平滑过渡,再比如B页面需要从vuex中取出缓存信息,如果这些缓存信息不是通过vuex保存在localstorage的话,取出来的肯定都是空的。

方案二

思路:既然IOS仅可使用第一次进入应用的URL来签名,那么在vuex上缓存一个微信签名URL,IOS保存第一次进入应用的URL,Android则缓存为每个页面的URL。签名时,直接从缓存拿出签名URL来处理。

// 全局判断是否IOS方法
function isIos(){
 const u = navigator.userAgent;
 return u.indexOf("iPhone") > -1 || u.indexOf("Mac OS") > -1;
}

1. 定义vuex缓存

...

{
 state: {
  wechatSignUrl: ""
 },
 
 mutations: {
  setWechatSignUrl(state, wxSignUrl) {
   // 关键点
   // IOS仅记录第一次进入页面时的URL
   // IOS微信切换路由实际URL不变,只能使用第一进入页面的URL进行签名
   if (isIos() && state.wxSignUrl !== '') {
    return;
   }
   state.wxSignUrl = wxSignUrl;
  }
 },
 
 getters: {
  getWechatSignUrl: (state) => state.wxSignUrl
 }
}

...

关键点在于设置更新微信签名URL判断的地方:首次进入应用页面的时候肯定会触发更新,若是IOS且签名URL已经设置过了,那么就不需要更新设置了,只要不退出或刷新应用,缓存永远都会是首次进入页面URL。

2. 路由守卫内触发更新签名URL

import store form "@/stores"

// 获取真实有效微信签名URL
function getWechatSignUrl(to){
  if(isIos()) {
   return window.location.href;
  } else {
   // 此处$appHost需要自行处理
   return $appHost + to.fullPath
  }
}

...
$router.beforeEach((to, from, next) => {
  store.commit("setWechatSignUrl", getWechatSignUrl(to));  
})
...

在路由守卫内更新签名URL,保证IOS是使用当前页面URL,Android是使用目标路由完整地址再加上域名

3. 使用签名URL调用JSSDK API

在使用JSSDK API的页面通过vuex取出缓存的微信签名URL,然后进行签名。

比如:

import store form "@/stores"

...
{
 methods: {
  initWechatShareConfig() {
   const that = this;
   const wxSignUrl = store.getters['getWechatSignUrl'];
   const wxShareConfigs = {
    // 微信分享配置
   }

   // 初始化微信分享
   $wechat.share(wxSignUrl, wxShareConfigs);
  }
 }
}
...

$wechat.share 是根据JSSDK文档二次封装的分享方法,内部是根据wxSignUrl先进行签名,然后再调用分享API

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tab插件制作实现代码
Jun 22 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
常用的javascript设计模式
Jan 11 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
vue引用外部JS的两种种方法
Jan 28 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 Javascript
laydate时间日历插件使用方法详解
Nov 14 #Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 #Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 #Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 #Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 #Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
一道关于php变量引用的面试题
2010/08/08 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
PHP框架性能测试报告
2016/05/08 PHP
php中引用&的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
用python绘制樱花树
2020/10/09 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
2014年安全生产责任书
2014/07/22 职场文书
领导班子整改措施
2014/10/24 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书