详解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 相关文章推荐
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
jquery加载图片时以淡入方式显示的方法
Jan 14 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
AngularJS入门之动画
Jul 27 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
收集的PHP中与数组相关的函数
2007/03/22 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP多进程编程实例详解
2017/07/19 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
python处理大数字的方法
2015/05/27 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Python和Go语言的区别总结
2019/02/20 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
反邪教标语
2014/06/23 职场文书
四查四看整改措施
2014/09/19 职场文书
英语辞职信怎么写
2015/02/28 职场文书
入党申请书怎么写?
2019/06/21 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
详解Vue的options
2021/05/15 Vue.js
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
Pygame Time时间控制的具体使用详解
2021/11/17 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android