中文源码网
欢迎您!
会员登录
会员注册
发布自媒体
发布模版
发布源码
发布模版
发布酷站
推荐源码
常用源码
帮助中心
栏目导航
热门搜索:
网站首页
免费源码
精品源码
html模版
精品模版
酷站大全
技术文档
方案大全
网络教程
站长自媒体
新闻动态
帮助中心
免费源码下载
asp源码
php源码
python源码
.net源码
jsp源码
JS特效
安卓源码
IOS源码
微信小程序下载
毕业设计源码下载
模版下载
商城模版
手机wap模版
网络教程
html5教程
asp教程
php教程
jsp教程
Python语言技术文档
python入门
Python编程技巧
Python网站web
Python网络爬虫
Python自动化运维
数据挖掘/机器学习
Python人工智能
Python多媒体
Python科学计算
Python游戏开发
Python图形界面
Python数据库相关
Python与其他语言
Python库/模块大全
Python报错处理大全
微信小程序技术文档
微信小程序开发入门
微信小程序开发技巧
微信游戏开发
微信公众号开发
微信常用源码
php语言技术文档
php入门教程
php技巧
php函数/类库
php框架
php+AJAX技巧
开源系统及二次开发
PHP内核
jsp语言技术文档
jsp入门教程
jsp技巧
jsp框架
asp语言技术文档
asp入门教程
asp技巧
asp函数/类库
C#/.NET语言技术文档
C#/.NET入门教程
C#/.NET技巧
MVC/.NET框架
C#/.NET微信开发
程序报错解决方法
html5/css技术文档
html5
CSS
javascript
javascript技巧
jquery
json
ajax
js框架/js库
点击排行
总结PHP中初始化空数组的最佳方法
在PHP中输出JS语句以及乱码问题的解决方案
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
用PHP的反射实现委托模式的讲解
详解提高使用Java反射的效率方法
详解关于php的xdebug配置(编辑器vscode)
详解php中生成标准uuid(guid)的方法
详解php中curl返回false的解决办法
详解php用static方法的原因
详解php伪造Referer请求反盗链资源
详解PHP素材图片上传、下载功能
详解PHP实现支付宝小程序用户授权的工具类
详解PHP神奇又有用的Trait
详解PHP队列的实现
详解PHP的抽象类和抽象方法以及接口总结
您现在的位置:
首页
>
技术文档
>
微信常用源码
我要投稿
微信小程序开发附源码:vue-router history模式下的微信分享小结
来源:
中文源码网
浏览:462 次 日期:2024-04-26 20:10:23
【下载文档:
微信小程序开发附源码:vue-router history模式下的微信分享小结.txt
】
vue-router history模式下的微信分享小结
背景
旧项目改造,进行前后端分离。做成了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模式
做成多页应用,每个页面都是进入页
所有需要自定义分享的页面使用
替换
,跟2类似,使所有自定义分享页面变成进入页
对于我们的业务场景来说,hash模式不能保证历史链接的可用性,多页/
跳转都是以牺牲一定体验性为代价。
经过多番尝试,最后发现用下面的方法勉强解决了问题:
// 进入页面,控制自定义分享前,把当前页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()
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。
上一篇:
微信小程序开发附源码:Vue微信项目按需授权登录策略实践思路详解
下一篇:
微信小程序开发附源码:vue-cli构建项目下使用微信分享功能
相关内容
•
微信小程序开发附源码:node打造微信个人号机器人的方法示例
•
微信小程序开发附源码:Koa2微信公众号开发之消息管理
•
微信小程序开发附源码:Koa2微信公众号开发之本地开发调试环境搭建
•
微信小程序开发附源码:JS实现仿微信支付弹窗功能
•
微信小程序开发附源码:JavaScript+H5实现微信摇一摇功能
•
微信小程序开发附源码:在微信小程序里使用watch和computed的方法
•
微信小程序开发附源码:小米5s微信跳一跳小程序python源码
•
微信小程序开发附源码:详解微信小程序调起键盘性能优化
•
微信小程序开发附源码:详解微信小程序实现WebSocket心跳重连
•
微信小程序开发附源码:详解微信JS-SDK选择图片遇到的坑
•
微信小程序开发附源码:详解如何在微信小程序中愉快地使用sass
•
微信小程序开发附源码:详解基于Koa2开发微信二维码扫码支付相关流程
•
微信小程序开发附源码:详解Vue微信授权登录前后端分离较为优雅的解决方案
•
微信小程序开发附源码:详解Vue开发微信H5微信分享签名失败问题解决方案
•
微信小程序开发附源码:详解NodeJs开发微信公众号
•
微信小程序开发附源码:为什么使用koa2搭建微信第三方公众平台的原因
•
微信小程序开发附源码:微信网页授权并获取用户信息的方法
•
微信小程序开发附源码:使用node.js实现微信小程序实时聊天功能
•
微信小程序开发附源码:浅析Vue 和微信小程序的区别、比较
•
微信小程序开发附源码:浅谈微信JS-SDK 微信分享接口开发(介绍版)
•
微信小程序开发附源码:解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
•
微信小程序开发附源码:基于Vue实现微信小程序的图文编辑器
•
微信小程序开发附源码:关于微信小程序bug记录与解决方法
•
微信小程序开发附源码:公众号关联微信小程序的步骤
•
微信小程序开发附源码:Vue项目全局配置微信分享思路详解
•
微信小程序开发附源码:Vue微信项目按需授权登录策略实践思路详解
•
微信小程序开发附源码:vue-router history模式下的微信分享小结
•
微信小程序开发附源码:vue-cli构建项目下使用微信分享功能
•
微信小程序开发附源码:Vue.js 实现微信公众号菜单编辑器功能(一)
•
微信小程序开发附源码:Vue.js 实现微信公众号菜单编辑器功能(二)
•
微信小程序开发附源码:vue 做移动端微信公众号采坑经验记录
•
微信小程序开发附源码:tp5实现微信小程序多图片上传到服务器功能
•
微信小程序开发附源码:PHP实现微信小程序人脸识别刷脸登录功能
•
微信小程序开发附源码:PHP后台实现微信小程序登录
•
微信小程序开发附源码:opencv 识别微信登录验证滑动块位置
QQ客服
公众号
手机版
帮助中心