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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
js 图片等比例缩放代码
May 13 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
jQuery中triggerHandler()方法用法实例
Jan 19 Javascript
js创建对象的方法汇总
Jan 07 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
js实现抽奖功能
2020/11/24 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[38:23]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第二场 11.01
2020/11/02 DOTA
python类继承用法实例分析
2014/10/10 Python
深入浅析Python传值与传址
2018/07/10 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
广告设计专业自荐信范文
2013/11/14 职场文书
公司出差管理制度范本
2015/08/05 职场文书