ios设备,在微信环境中,单页面程序(如:vue),页面分享问题

问题描述:
单页面程序(如:使用vue框架搭建的单页面应用),在微信环境中,使用微信原生的分享功能,进行页面分享时,安卓设备正常,分享那个页面,进来就是那个页面。但是在ios设备中,无论在那个页面分享,进入时始终进入的是初次进入应用时的页面。
问题环境:
ios设备,vue单页面程序
问题原因:
vue单页面应用中,把第一次打开的页面叫做进入页,之后通过路由跳转的页面(通过pushState或replaceState改变的url)叫做当前页。而在Android设备中,浏览器记录的是当前页的url信息;IOS设备中,浏览器记录的是进入页面信息
解决方案:
以vue框架搭建为例。在进入页面时,将需要分享的页面刷新加载location.assign(),路由元信息meta中的字段isShare做页面分享处理,true:表示需要处理;false:表示不需要处理。解决方案有多种,解决原则就是改变浏览器的页面路径记录信息。
具体实现:

// 路由配置,设置元信息 isShare
{
    path: '/share',
    name: 'Share',
    component: Share,
    meta: {
      isShare: true
    }
}

// 在全局路由守卫中设置
router.beforeEach((to, from, next) => {
    if ((to.fullPath !== window.location.hash.slice(1)) && to.meta.isShare) {
        let href = window.location.href;
        href = href.replace(href.hash, ('#' + to.fullPath)); // hash模式下的页面路径拼接方式
        window.location.assign(href);
        next();
    }
    ...
})

你可能感兴趣的:(vue单页面开发,微信公众号开发)