解决vue单页面应用程序在微信只能分享落地页

2024年5月26日 159次阅读 来源: ci0n

这段时间做了一个可配置域名的项目，在测试的过程中发现在微信浏览器中只能分享落地页(一开始打开的页面)，由于项目的特殊性，不能使用微信sdk进行分享，而且微信的流量极其重要。尝试了各种方法才研究出了不使用微信sdk的条件下实现分享当前页面。

我的博客文章：解决vue单页面应用程序在微信只能分享落地页

检测微信浏览器

// src/utils/browser.js

const UA = navigator.userAgent.toLowerCase()

// 判断微信浏览器
export const WECHAT_BROWSER = UA.includes('micromessenger')

每次路由改变都同步一次url

// src/app.vue
import { WECHAT_BROWSER } from "./utils/browser.js"
export default {
  name: "App",
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(to, from) {
        if (!WECHAT_BROWSER) return;

        // 不会刷新浏览器，只是让微信浏览器同步当前url
        // eslint-disable-next-line
        window.location.href = window.location.href
      }
    }
  }
};

vue执行前刷新页面

同步url之后是解决了问题，但是发现会出现一个诡异的bug。
在真机里进入http://192.168.1.5:8080和http://192.168.1.5:8080/#/（两个url的区别只在/#/），会发现其中一个链接依然无法分享当前页面。

// main.js
import { WECHAT_BROWSER } from "./utils/browser.js";
import nodeURL from "url";
const urlObject = nodeURL.parse(window.location.href, true);
urlObject.query = urlObject.query || {};
if (WECHAT_BROWSER && !urlObject.query.from_wx) {
  urlObject.search = undefined; // 清掉search后 format才会使用query作为参数
  urlObject.query.from_wx = "1";
  window.location.replace(nodeURL.format(urlObject));
}

new Vue({
    // ...
})

使用一个标志位在vue执行之前（为了尽快刷新页面，节省等待的时间）判断首次进入刷新页面，这样就可以解决这个诡异的bug，但是会让用户等待的时间更长，影响了性能。

demo

    原文作者：ci0n
    原文地址: https://segmentfault.com/a/1190000018870302
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞