进入微信企业项目授权回跳之后退出项目需要点击两次(手机的返回主键,回退键)才能正常退出的问题解决

出现这样的问题无非就是第一次进入项目之后,在微企浏览器添加了一条历史记录,之后由于授权成功回来,会再一次添加一条记录,所以我们解决的常规方法就是利用pushState方法加上关闭当前微信窗口API得以解决问题

history.pushState(null, null, document.URL)
如果页面组件作了缓存,就需要利用activated和beforeRouteLeave
activated() {
  if (window.history && window.history.pushState) {
    history.pushState(null, null, document.URL)
    window.addEventListener('popstate', this.goBack, false)
  }
},
// 路由守卫
beforeRouteLeave(to, from, next) {
  window.removeEventListener('popstate', this.goBack, false) // 跳转时需要清空浏览器添加的记录
  next()
},

methods: {

goBack() { // 点击浏览器的返回触发的方法
  let timer = setTimeout(function () {
    document.addEventListener(
      "WeixinJSBridgeReady",
      function () {
        WeixinJSBridge.call("closeWindow");
      },
      false
    );
    //这个可以关闭ios系统的手机
    WeixinJSBridge.call("closeWindow");
    clearInterval(timer)
    //这个可以关闭安卓系统的手机
  }, 500)
  this.$router.go(-2)
},

}

另外需要注意的是:

1.跳转到详情时,需要利用Router.replace()跳转 ,否则如果跳转到详情再返回来首页列表  还是会出现返回两次才能正常退出项目。

2.因为在vue项目使用了微信WeixinJSBridge对象,此时会报错WeixinJSBridge为未定义,导致不能正常打开和打包发布,

所以当我们用vue实现调取微信api时,虽然WeixinJSBridge在微信内置浏览器中可以使用,但在脚手架编译或者发布时会提示WeixinJSBridge is not defined,使得我们无法调试也无法发布,无法验证功能。究竟改如何解决,这需要根据vue-cli的版本来设置,百度中大部分都没有提及。

vue-cli3之前的版本根目录下是有eslintrc.js的,直接在文件中增加"globals": {"WeixinJSBridge" : false}即可

如果是vue-cli3之后版本,需要在package.json中找到eslintConfig,然后增加"globals": {"WeixinJSBridge" : false}即可

至此,就可以编译通过正常调试和发布了。
 

(专卖店项目)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值