详解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 相关文章推荐
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
利用json获取字符出现次数的代码
Mar 22 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
js实现右键弹出自定义菜单
Sep 08 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
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python实现猜数字游戏
2020/03/25 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python内置函数property()如何使用
2020/09/01 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
html5中audio支持音频格式的解决方法
2018/08/24 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
银行职业规划书范文
2013/12/28 职场文书
十佳青年事迹材料
2014/08/21 职场文书
司考复习计划
2015/01/19 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记