微擎模块使用VUE开发解决JSSDK回调问题

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

微擎模块开发过程中，为了提高用户体验，我们团队都是使用VUE进行开发，当使用JSSDK分享、扫码、支付时回调地址是最为头疼的一件事情。回调地址微信会自动清楚 /#/ 的内容，永远都是来到VUE路由的首页。这里有同学会说使用 history 路由模式，当前这是一种解决方法，不过是要建立在VUE独立部署域名的情况下，这里讨论是在微擎模块下，当然适用于各种已有路由不能使用history 路由模式的情况。

两种解决方案：

使用NGINX正则转发：（别人买我的模块不可能去配置NGINX不科学）

使用PHP转发（建议使用）

模块入口路由：

https://localhost/app/index.php?i=1&c=entry&do=index&m=app

（这个路由是直接渲染VUE模板）

https://localhost/app/index.php?i=1&c=entry&do=index&m=app/#/home

（VUE实际路由）

我们只需要在https://localhost/app/index.php?i=1&c=entry&do=index&m=app （index.inc.php）中加入以下代码使用转发，在有回调的地方把回调URL写成https://localhost/app/index.php?i=1&c=entry&do=index&m=app&vue_router_callback=home，就可以解决！

  /** 解决fastadmin登录回调、微信各种回调时清楚vue路由 */

if($_GPC['vue_router_callback'])
{
    header('Location:https://localhost/app/index.php?i=1&c=entry&do=index&m=app/#/'.$_GPC['vue_router_callback']);
}

广告：接微擎、PHP、小程序、APP 外包

来源：oschina

链接：https://my.oschina.net/u/2006685/blog/3152970

标签

微擎

Vue.js