vue:微信单页应用多入口处理

赶时间的可以跳到最后看源代码,看不懂为什么这样写的回头来重新看。

事情要从上个月说起,公司接了个项目,需要做一个微信端的应用,时间是两个月。

由于之前做过一个简单的微信商城,非常鄙视微信页面跳转时的拖沓,所以决定做单页应用,使用vue框架来开发。

vue是个不错的框架,加上源码丰富,一路做来还算顺利,没遇到什么特别难的地方。

满以为下周可以顺利上线了,直到要放到微信端的时候出问题了。

客户需要在公众号做一个这样的菜单:

vue:微信单页应用多入口处理_第1张图片
QQ图片20170726001921.png

菜单的入口链接到单页应用的不同页面。

而单页应用的内部地址是通过#后面的内容指引router跳转的:
例如跳转到关于我们的页面
http://xxxx.xxx.com/#/about?appid=1&cpid=1

其中appid和cpid是必须的参数,传给单页应用后会赋值给vuex作为全局变量。

但是代码打包发布之后,通过这个地址死活进不去该进的页面,一律进到根目录下。据后端人员反映,经过微信浏览器传到服务器的页面地址,#号连同后面的参数一并丢失。

不是吧


vue:微信单页应用多入口处理_第2张图片
Paste_Image.png

这是个重大bug,如果下周在上线时客户那边不能忽悠过去,他们一定不肯支付尾款,公司可能会炒我鱿鱼,老婆发现下个月工资卡没钱到账,会把家里电脑里的cpu拆了让我跪,我受苦不要紧,可怜了cpu呀!

遂百度之。

十分钟之后,我放弃了。找不到合适的解决方案

也有提出类似问题的

http://www.cnblogs.com/mingxinice/p/mingxin.html

但也没有好的解决方案

还看到一个类似的但是看了半天他也不知道自己怎么解决的。
http://www.jianshu.com/p/a1a31f9da272

或者是可以解决,将router模式改为history,但需要后端做一大堆事的,可这不就违背了前后端分离的真谛了吗?

哎,为了平复我忐忑的心,我心中不禁念起了大悲咒:“南无·喝啰怛那·哆啰夜耶...”

...在电光火石之间,我的心中闪过了一个念头,得到了一个解决办法。

这个办法也许隐世的前端高手也正在使用,但除了这里,你很难百度到,如果对你有帮助,请打赏一下。

如上所述,微信跳转时,浏览器会把#后面的hash值给搞掉,据说在ios中还会在前面加点东西。但是在#之前加的get参数是不会丢失的。

那么我们为什么不能把参数前移呢?像这样:

http://xxxx.xxx.com/?appid=1&cpid=1

页面跳转怎么办?我可以加一个page参数呀

http://xxxx.xxx.com/?appid=1&cpid=1&page=/about

这样写就完全丢弃了#

然后我们通过一个js方法获取链接的参数

getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

我把这个方法放到了一个文件中,并作为全局对象引入,当然,你也可以直接放到main.js里

在main.js里,router.beforeEach这个钩子之前,将获得的参数赋值给一个全局对象。

global.browserQuery = {
    appid: getQueryString('appid'),
    cpid: getQueryString('cpid'),
    page: getQueryString('page')
}

在router.beforeEach的钩子里这样写:

router.beforeEach(({ meta, path, query }, from, next) => {
    if (browserQuery.appid && browserQuery.cpid) {
        store.commit('appid', browserQuery.appid);
        store.commit('cpid', browserQuery.cpid);
        let p=browserQuery.page;
        browserQuery={};
        return next(p);
    }
    ///其它代码
})

解释一下,如果browserQuery不是空对象,说明是从外面的链接点击首次进入的,这时候将所需要的参数写进store中,剩下的page是要跳转到的路由,赋值给p变量,然后清空browserQuery对象,使下次跳转不再进入这个条件代码段,然后用return next(p)跳转到该去的页面。

可是一测试,问题又来了。在本地测试(没发布到微信)

链接:http://xxxx.xxx.com/?appid=1&cpid=1&page=/about

还是跳转到根目录,但后面加#/却能正确跳转到about页面

http://xxxx.xxx.com/?appid=1&cpid=1&page=/about#/

为什么呢?唯一的解释是,没有hash值,router没有准备好,所以默认跳转到根目录。但#/会被微信丢掉呀,加了也没用,这不矛盾吗?

能不能跳转两次?先跳到#/,这时router加载了,再跳转到#/about

所以我写成这样

router.beforeEach(({ meta, path, query }, from, next) => {
    if (browserQuery.appid && browserQuery.cpid) {
        store.commit('appid', browserQuery.appid);
        store.commit('cpid', browserQuery.cpid);
        delete browserQuery.appid;
        return next('/');
    }else if(browserQuery.page){
       let p=browserQuery.page;
       browserQuery={};
       return next(p);
    }
    ///其它代码
})

页面进来后,删掉appid,并让它先跳转到根目录'/',这时appid已经不在,所以不会进入条件一,而会进入else,因为page还在,清空browserQuery,并跳转到该去的页面about,因为跳转前为根目录'/',hash值已在,应当不会出现上述问题。

但一测试,还是不行。

我猜想这个router.beforeEach钩子是不支持这样瞬间跳转两次的。也就是在return next('/') 之后,不会立即执行下一个beforeEach的钩子。

能不能放在router.afterEach里呢?试试!

router.beforeEach(({ meta, path, query }, from, next) => {
    if (browserQuery.appid && browserQuery.cpid) {
        store.commit('appid', browserQuery.appid);
        store.commit('cpid', browserQuery.cpid);
        delete browserQuery.appid;
        return next('/');
    }
      ///其它代码
})
router.afterEach(route => {
        if (browserQuery.page) {
            let p = browserQuery.page;
            browserQuery = {};
            router.push(p);//因为没有next对象,直接调用router跳转
        }
    })

当router导航到根目录'/'之后,马上跳转到about页面,这时虽然是路由成功,但根目录页面还没有渲染,其实看不出有什么差别。成功了。

对!就这么解决了困扰单页的多入口问题了。

如果你要将其中一个页面分享出去,可以这样组织链接,例如
http://xxxx.xxx.com/?appid=1&cpid=1&page=/detail/1

当其他人点击链接后,会被导航到
http://xxxx.xxx.com/#/detail/1页面

从此你可以告别#的困扰,单页应用从此不再受微信的歧视。

吸了一口维他奶,感叹啊。业界难题被我轻而易举解决了,如果我不当程序员,真实IT界的损失呀。嘻嘻嘻嘻(笑)

全部代码如下:

getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
global.browserQuery = {
    appid: getQueryString('appid'),
    cpid: getQueryString('cpid'),
    page: getQueryString('page')
}
router.beforeEach(({ meta, path, query }, from, next) => {
    if (browserQuery.appid && browserQuery.cpid) {
        store.commit('appid', browserQuery.appid);
        store.commit('cpid', browserQuery.cpid);
        delete browserQuery.appid;
        return next('/');
    }
      ///其它代码
})
router.afterEach(route => {
        if (browserQuery.page) {
            let p = browserQuery.page;
            browserQuery = {};
            router.push(p);//因为没有next对象,直接调用router跳转
        }
    })

你可能感兴趣的:(vue:微信单页应用多入口处理)