基于vue-cli3开发微信公众号网页踩坑指南

vue开发微信公众号有两种模式，一种是路由的history，另外一种是hash。

如果用hash模式，经过测试发现，在本地跑的话，不论是安卓还是微信都没问题，一发布到线上就出问题了，在ios端根本打不开。

然后，我采用了history模式，采用这种模式的话，又迎来了新的问题。

在ios端调用微信的sdk会验签失败，失败的原因是，ios端会把第一次进入网页的地址记录为真实地址，后面不管你跳转到哪个路由，都是第一次进入页面的地址，所以导致验签失败。安卓端正常。

解决这个问题的办法就是在使用路由守卫，首先判断当前的环境。如果是ios环境，则每次跳转路由都重新获取一次当前的地址，保证每次真实地址都是对得。

router.beforeEach((to, from, next) => {

// 解决ios调取扫一扫功能失败

var u = navigator.userAgent;

var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

// XXX: 修复iOS版微信HTML5 History兼容性问题

if (isiOS && to.path !== location.pathname) {

// 此处不可使用location.replace

location.assign(to.fullPath)

} else {

next()

}

});