VUE开发微信公众号指定页面分享

最近使用VUE(hash模式)开发微信公众号页面分享时,遇到一个奇怪的问题,仅以此文记录。
最初实现的分享逻辑如下:

  1. 获取当前路径url,即location.href;
  2. 填充到微信分享API
const href = location.href;
updateAppMessageShareData(
    "title",
    "desc",
    "imgURL",
    href
);

分享给朋友后打开,Android跳转到公众号首页(部分手机跳转到指定页面,但不是很稳定),IOS可以跳转到指定页面。
在尝试各种解决方案后终于想明白了,Android手机上默认把hash值忽略了, 具体原因不明。
那么既然是把hash值忽略了,那我不用hash不就行了,但是我要跳转到指定页面呀,重定向的方案就来了。
我把hash值当作一个参数,指定一个中间页,用原生的方式获取query然后再跳转回来。

中间页代码


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分享title>
head>

<body>
    <script>
        function parseCurrentQuery() {
            let search = location.search;
            search = search.substring(1, search.length);
            const queryList = search.split("&");
            const query = {};
            queryList.forEach(item => {
                const arr = item.split("=");
                if (arr.length === 2) {
                    query[arr[0]] = decodeURIComponent(arr[1]);
                }
            });
            return query;
        }
        const query = parseCurrentQuery();
        location.href = query.redirectUrl;
    script>
body>

html>

分享代码

const middleUrl = "http://.../middlePage"; // 中间页
const currentUrl = "http://.../currentPage"; // 当前页
const hash = location.hash;
updateAppMessageShareData(
    "title",
    "desc",
    "imgURL",
    middleUrl + "?redirectUrl=" + encodeURIComponent(currentUrl + hash)
);

这样做确实就可以指定页面分享了,但是有个问题就是要重复进行页面跳转。我就想能不能不通过重定向的方式解决呢?
答案当然是能,我反复测试了Android手机的微信浏览器为什么跳转时有时候可以有时候不可以。突然灵光一闪,
会不会时Android手机微信浏览器在解析时把hash和path当成了一个整体在解析呢?虽然不知道它的具体解析规则是什么?但这并不妨碍我验证。
使用完整的浏览器url进行分享,vue所有页面其实都是在一个index.html页面的,因此完整的浏览器路径就应该是http://…/index.html + hash。继续改造如下。

const href = `${process.env.VUE_APP_URL}/index.html` + hash;
updateAppMessageShareData(
    "title",
    "desc",
    "imgURL",
    href
);

经验证,确实可以解决问题。

顺便提一下vue的history模式,这个模式下nginx转发多次的话会出现页面白屏的问题(JS不执行路由),原因未知。如果有解决方案,欢迎交流。

你可能感兴趣的:(web,vuejs,微信公众号)