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 setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
详解react-refetch的使用小例子
Feb 15 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
JavaScript如何判断input数据类型
Feb 06 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
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python实现在IDLE中输入多行的方法
2018/04/19 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
基于python代码批量处理图片resize
2020/06/04 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
美国在线家居装饰店:Belle&June
2018/10/24 全球购物
中层干部竞聘演讲稿
2014/05/15 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
安全生产工作汇报材料
2014/10/28 职场文书
运动员加油词
2015/07/18 职场文书
工作感言一句话
2015/08/01 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis