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

aervon 发布于2019-08-05 16:43 / 2050人阅读

摘要：我的博客文章解决单页面应用程序在微信只能分享落地页检测微信浏览器判断微信浏览器每次路由改变都同步一次不会刷新浏览器，只是让微信浏览器同步当前执行前刷新页面同步之后是解决了问题，但是发现会出现一个诡异的。

这段时间做了一个可配置域名的项目，在测试的过程中发现在微信浏览器中只能分享落地页(一开始打开的页面)，由于项目的特殊性，不能使用微信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

私有云专线服务 php子页分享到微信微信分享html页面单页面应用落地页怎么上传到腾讯云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/59155.html

前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
微信小程序开发中的二三事之网易云信IMSDK DEMO

摘要：传统的网页编程采用的三剑客来实现，在微信小程序中同样有三剑客。观察者模式不难实现，重点是如何在微信小程序中搭配其特有的生命周期来使用。交互事件传统的事件传递类型有冒泡型与捕获型，微信小程序中自然也有。本文由作者邹永胜授权网易云社区发布。简介为了更好的展示我们即时通讯SDK强悍的能力，网易云信IM SDK微信小程序DEMO的开发就提上了日程。用产品的话说就是: 云信 IM 小程序 S...

weij 2019-06-28 11:05 评论0 收藏0
微信公众号IOS端复制链接出错，安卓端分享链接打开只能进入首页等问题的解决

摘要：折腾了一整天，官方文档看了好几遍，网上基本上所有的方法都试了，发现都没什么卵用，最后打开的分享页面，再复制分享页面的链接，发现链接是这个格式，相比之下只是多了个字段，抱着试一试的心态，在当前链接中添加，发现所有问题都迎刃而解。最近在做某个需要在微信中打开的项目，部分页面会通过微信分享或复制链接分享给其他人，然后就遇到了以下坑：1.IOS端复制链接或在其他浏览器中打开时,假如原网站链...

Cobub 2019-08-23 17:12 评论0 收藏0
jssdk 在history模式下安卓不能调用图片上传接口和分享接口

摘要：配置先上配置每个页面都调用微信授权配置注是我在暴露的接口这份配置主要是根据微信公众号开发踩坑记录配置而来。首先说明，应用环境是使用的是vue+vue-router,history模式开发的单页应用。配置先上配置??? // index.js const protocol = location.protocol + // + location.host; router.afterE...

dkzwm 2019-08-22 15:37 评论0 收藏0
移动端H5多页开发拍门砖经验

摘要：以下会以其中一个以公积金页面开发项目作为例子，介绍移动端的一些常见问题和使用作为进行多页开发的经验。所以要想在微信开发调试工具中获取，我们需要使用一种叫做内网穿透的工具。 showImg(https://segmentfault.com/img/remote/1460000015405042?w=800&h=600);两年前刚接触移动端开发，刚开始比较疑惑，每次遇到问题都是到社区里提问...

hightopo 2019-08-22 18:20 评论0 收藏0