当前位置: 首页 > Web前端 > HTML5

vue微信浏览器分享当前页面

时间:2023-04-05 19:53:52 HTML5

微信浏览器对单页应用不友好。不使用微信SDK不能分享当前页面,只能分享落地页。我的博文:https://blog.ci0n.cn/p_ec7b781c.html检测微信浏览器constUA=navigator.userAgent.toLowerCase()//判断微信浏览器exportconstWECHAT_BROWSER=UA.includes('micromessenger')urlimport{WECHAT_BROWSER}from"./utils/browser.js"exportdefault{name:"App",watch:{$route:{immediate:true,deep:true,handler(to,from){if(!WECHAT_BROWSER)return;//不会刷新浏览器,只让微信浏览器同步当前url//eslint-disable-next-linewindow.location.href=window.location.href}}}};vue执行前刷新页面同步url后问题解决,但是出现了一个奇怪的bug。在真机中输入http://192.168.1.5:8080和http://192.168.1.5:8080/#/(两个网址的区别仅在于/#/),你会发现其中一个链接仍然无法共享当前页面。import{WECHAT_BROWSER}from"./utils/browser.js";if(WECHAT_BROWSER&&window.location.search.includes('from_wx')===false){leturl=window.location.hrefurl+=(location.search?'&':'?')+'from_wx=1'window.location.replace(url)}newVue({//...})在执行vue之前使用一个标志(为了刷新尽快刷新页面,节省等待时间)判断是第一次进入刷新页面,这样可以解决这个奇怪的bug,但是会让用户等待的时间更长,影响性能。演示