最近的一个公众号是基于vue的spa应用,在接入微信自定义分享的时候出现了:在Android上分享一切正常,但是iOS分享的时候,分享出去都是主页,需要在被分享页刷新之后,才能分享成功。
IOS:每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是当前页面的url就是最初进入页面时的url
Android:每次切换路由,SPA的url是会变的,发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
所以IOS需要修正url路径
1.在index.js中,配置路由的时候,添加isShare去判断该页面是否需要自定义分享
{
path: '/courseware',
component: () =>
import ('@/components/courseware'),
meta: { isShare:true } //
}
2.在main.js中利用钩子函数去判断要不要分享
router.beforeEach((to, from, next) => {
if(to.meta.isShare){
const agent = navigator.userAgent
const isiOS = !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
//因为Android是兼容的,所以只需要判断是不是iOS终端
if (isiOS && to.path !== location.pathname) {
location.assign(to.fullPath)
} else {
next()
}
}
next();
});
location.assign(url): 加载 URL 指定的新的 HTML 文档。 就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。
to.fullPath: 全路径