vue微信站history模式微信自定义分享
发表于:2022-02-22 16:56:48浏览:3042次
基于Vue的SPA项目难免涉及到微信自定义分享,因为使用的是vue-router的history模式,所以在iOS端微信和Android端微信分享出来的截然不同,大多数是iOS端微信会分享失败。上网查询了一些文档说是iOS端微信不支持pushState的H5新特性。还有就是iOS端微信记录的URL是首次访问网页时的网址,所以在使用window.location.href获取当前网址来换取微信的签名校验信息时候就会导致签名校验失败,致使最终微信分享失败。
iOS端微信处理方法:
保存首次进入页面时候的路径,在需要调用微信分享的页面内利用首次进入页面时候的路径URL来换取iOS端微信分享的签名。
Android端微信处理方法:
Android端微信每次切换路由时候都会刷新页面,故在需要使用微信分享的页面直接获取当前页面所在路径的URL即使用window.location.href来换取微信分享的签名即可。
Android设备环境检测:
iOS设备环境检测:
封装wxShare.js
分享链接处理
router.js多路径自定义分享设置
PS:在vue项目中只是分享某一个路径下的页面,即可在当前页面路径下引入写好的微信分享文件方法,在需要分享的页面进行调用即可。
在Vue SPA 项目history模式中,指定页面需要实现动态分享,其余路径页面实现固定分享,既可以在router.js的 router.afterEach((to,from)=>{}) 全局生命周期钩子函数中调用微信分享方法即可实现指定路径页面动态分享,其余路径页面固定分享的需求。
hash模式,直接按照Android端微信的调用方式即可。如有问题,可依据此思路作为参考,并结合实际需求进行相应的调整。