vue-router history模式下的微信分享小结


Posted in Javascript onJuly 05, 2018

背景

旧项目改造,进行前后端分离。做成了spa,为了保证后端路由时期链接可用性,使用了history模式。

因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用

微信分享遇到的坑

微信官方文档上有下面一段话:

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

在实际测试和大量真实数据收集后发现,Android4.4+都是支持pushState的。也就是说,没有遇到官方文档所述的问题。(此番调研后才决定采用history模式进行实施的,导致IOS下踩了坑)

IOS下遇到了问题:

# 打开页面时分享没有问题,路由一次之后再分享签名错误(invalid signature)

这个问题是由于IOS微信浏览器下,有着下面的“特性”:

把第一次打开的页面叫做进入页;把前端路由若干次跳转(通过pushState/replaceState改变url)之后,当前打开的页面叫做当前页。

微信验签使用的url(当前网页的URL,不包含#及其后面部分),在Android下取的是当前页url,在IOS下取的是进入页的url(支付目录也是一样)

知道了这个,可以采取下面的办法来解决:

使用vuex保存进入页的URL,每次wx.config需要的参数,都使用进入页的URL来进行签名

至此,微信分享签名错误的问题解决了,但分享还是不正常:# 自定义分享不生效

度娘谷歌了一番,大概有下面几种办法

  • 使用hash模式
  • 做成多页应用,每个页面都是进入页
  • 所有需要自定义分享的页面使用<a>替换<router-link>,跟2类似,使所有自定义分享页面变成进入页

对于我们的业务场景来说,hash模式不能保证历史链接的可用性,多页/<a>跳转都是以牺牲一定体验性为代价。

经过多番尝试,最后发现用下面的方法勉强解决了问题:

// 进入页面,控制自定义分享前,把当前页URL替换成进入页的URL(保证自定义分享正常)
this.setCurrentPage(location.href)
window.history.replaceState({}, document.title, this.landingPage)
wx.config()
wx.ready()

//...

// 离开当前页时,还原当前页的URL(保证返回正常)
beforeRouteLeave(to, from, next) {
  window.history.replaceState({}, '', this.currentPage)
  next()
}

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

Javascript 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 Javascript
js实现图片360度旋转
Jan 22 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 #Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 #Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 #Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 #Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 #Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 #Javascript
You might like
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
python生成随机mac地址的方法
2015/03/16 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
python用700行代码实现http客户端
2021/01/14 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
银行职员思想汇报
2013/12/31 职场文书
网络宣传方案
2014/03/15 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
教研活动主持词
2015/07/03 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
Vue和Flask通信的实现
2021/05/19 Vue.js