数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

来源:脚本之家  责任编辑:小易  

实际上关键词叫 微信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 随意。

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

您可能感兴趣的文章:


  • 本文相关:
  • 详解ios微信上vue单页面应用jssdk签名失败解决方案
  • vue.js实战之vuex的入门教程
  • vue.js实现分页查询功能
  • vue.js vue-router如何实现无效路由(404)的友好提示
  • vue2.0 子组件改变props值,并向父组件传值的方法
  • vue 源码分析之 observer实现过程
  • vue 项目中遇到的跨域问题及解决方法(后台php)
  • vue全局使用axios的方法实例详解
  • vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
  • 解决vue中post方式提交数据后台无法接收的问题
  • vue-baidu-map 进入页面自动定位的解决方案(推荐)
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved