vue单页面在微信下只能分享落地页的解决方案


Posted in Javascript onApril 15, 2019

实际上关键词叫 微信pushState只能分享落地页 更贴切一点

应用场景:

  1. vue + vue-router
  2. vue-router使用hash模式(history模式没试过)
  3. 不使用微信的js-sdk(因为我这个项目是可配置域名的商城,比较特殊,不能使用微信sdk)

这个方案并不是最优秀的,会对性能造成一定的影响

HTML5 history.pushState

vue-router的内部是通过 history.pushState 和 history.replaceState 实现的。但是iOS设备的微信浏览器不会去检测它们的变化。但是我们可以通过更新 location.href 让微信浏览器识别到当前的url。

// vue-router/src/util/push-state.js

export function pushState (url?: string, replace?: boolean) {
 saveScrollPosition()
 // try...catch the pushState call to get around Safari
 // DOM Exception 18 where it limits to 100 pushState calls
 const history = window.history
 try {
  if (replace) {
   history.replaceState({ key: _key }, '', url)
  } else {
   _key = genKey()
   history.pushState({ key: _key }, '', url)
  }
 } catch (e) {
  window.location[replace ? 'replace' : 'assign'](url)
 }
}

export function replaceState (url?: string) {
 pushState(url, true)
}

解决方法

window.location.href = window.location.href ,这段代码可以让微信记录当前的url,且不会刷新页面。可以在app.vue中 watch $route 在每次页面更新的时候执行一次。

// app.vue

watch: {
 $route: {
  immediate: true,
  deep: true,
  handler(to) {
   // 微信浏览器判断
   const WECHAT_BROWSER = navigator.userAgent.toLowerCase().includes('micromessenger')

   // 解决iOS微信浏览器分享地址只能是落地页的问题,这个操作是不会刷新页面的,query参数改变也会执行
   if (WECHAT_BROWSER) {
    // eslint-disable-next-line
    window.location.href = window.location.href
   }
  }
},

使用了上述方法可以解决这个问题,但是这会引出一个很奇葩的问题,在真机上进入 http://192.168.1.5:8080 和 http://192.168.1.5:8080/#/ 这两个页面,其中有一个链接的bug依然存在。原因具体不清楚,经过测试可以在入口文件(main.js)中在页面还没有展示内容前刷新一次页面,即可解决这个问题。

// main.js

// 微信浏览器判断
const WECHAT_BROWSER = navigator.userAgent.toLowerCase().includes('micromessenger')

// 在url插入的search参数,可以随意,但是必须要
// 例:http://192.168.1.5:8080/?_wx_=1#/
const wxQuery = '_wx_=1'
const isRepeatQuery = location.search.includes(wxQuery)
if (WECHAT_BROWSER && !isRepeatQuery) {
 const unit = (location.search && location.search !== '?') ? '&' : '?'
 location.search += unit + wxQuery  // 添加_wx_参数,该操作会刷新页面
}

上面的代码之所以要在 hash 前面加一个 ?_wx_=1 参数,为了方便刷新页面给一个标志位判断是否已刷新。参数的 key-value 随意。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
vue--vuex详解
Apr 15 #Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 #Javascript
小程序数据通信方法大全(推荐)
Apr 15 #Javascript
前端面试知识点目录一览
Apr 15 #Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 #Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 #Javascript
说说Vuex的getters属性的具体用法
Apr 15 #Javascript
You might like
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
doctype后如何获得body.clientHeight的方法
2007/07/11 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
教你用jquery实现iframe自适应高度
2014/06/11 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python实现通讯录功能
2018/02/22 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
基于python检查矩阵计算结果
2020/05/21 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
高中同学会活动方案
2014/08/14 职场文书
优秀教师事迹材料
2014/12/15 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL