当前位置: 首页 > 编程笔记 >

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

况鸿雪
2023-03-14
本文向大家介绍vue单页面在微信下只能分享落地页的解决方案,包括了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 随意。

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

 类似资料:
  • 本文向大家介绍详解vue微信网页授权最终解决方案,包括了详解vue微信网页授权最终解决方案的使用技巧和注意事项,需要的朋友参考一下 vue微信网页授权,基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配方案+axios,开发的微信授权方案。项目地址:vue-wechat-auth 参考了[vue-wechat-login],思路有些不同,本文基于进入所有页面都

  • Vue 中路由使用 hash 模式,开发微信 H5 页面分享时在安卓上设置分享成功,但是 iOS 的分享异常。 iOS 当前页面分享给好友,点击进来是正常,如果二次分享,则跳转到首页;使用 vue router 跳转到第二个页面后在分享时,分享设置失败;以上安卓分享都是正常。 简单分析一下问题,jssdk 是后端进行签署,前端校验,但是有时跨域,ios 是分享以后会自动带上 from=single

  • 如今,很多企业在做市场推广过程中依然离不开落地页这个基础,落地页是企业最容易忽略却又最重要的一环,起到承接外部流量、转化用户的重要作用。但,很多的市场人员对营销推广的关注依然更多的聚焦在如何导引流量,却往往忽视了对落地页本身的优化。 为此,诸葛io面向市场人员推出了落地页分析功能,可以快捷、有效的分析落地页的流量和质量,进而优化落地页,提高转化。 落地页 落地页是访问者在其他地方看到发出的某个具有

  • 本文向大家介绍Vue微信公众号网页分享的示例代码,包括了Vue微信公众号网页分享的示例代码的使用技巧和注意事项,需要的朋友参考一下 前言 今天做了个分享功能,反正挺诡异的,下面就来说一说步骤 后端使用egg.js,代码如下: 步骤 1.在vue项目中public目录下的index.html中引入 2.在想分享的组件的mounted中加入如下代码: 3.initJSSDK方法体: 常见问题 无效的签

  • 本文向大家介绍详解vue-router 动态路由下子页面多页共活的解决方案,包括了详解vue-router 动态路由下子页面多页共活的解决方案的使用技巧和注意事项,需要的朋友参考一下 我们都知道 vue-router 的动态路由匹配 对组件是原地复用的策略,需要我们在组件中根据不同的 $route 参数展示不同的数据,这在大部分情景下是很高效的做法,但这无疑增加了组件的复杂度,而且不同参数间切换因

  • 本文向大家介绍解决微信授权回调页面域名只能设置一个的问题,包括了解决微信授权回调页面域名只能设置一个的问题的使用技巧和注意事项,需要的朋友参考一下 最终的解决方案是:https://github.com/liuyunzhuge/php_weixin_proxy,详细的介绍请往下阅读。 在做项目集成微信登录以及微信支付的时候,都需要进行用户授权。这个授权的流程可以简单描述为: 1. 用户从我们的应用