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 相关文章推荐
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
VUE实现日历组件功能
Mar 13 Javascript
Angular排序实例详解
Jun 28 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue使用codemirror的两种用法
Aug 27 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防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
在小程序中使用canvas的方法示例
2018/09/17 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
生日寿宴答谢词
2014/01/19 职场文书
防汛工作情况汇报
2014/10/28 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Mysql Online DDL的使用详解
2021/05/20 MySQL