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 相关文章推荐
jquery 3D 标签云示例代码
Jun 12 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
小程序实现录音功能
Sep 22 Javascript
JS实现纸牌发牌动画
Jan 19 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
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
jQuery 解析xml文件
2009/08/09 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
javascript event 事件解析
2011/01/31 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
Webpack path与publicPath的区别详解
2018/05/03 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
keras的ImageDataGenerator和flow()的用法说明
2020/07/03 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
承诺书格式范文
2014/06/03 职场文书
企业宗旨标语
2014/06/10 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
教师素质教育心得体会
2016/01/19 职场文书
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电