微信/支付宝/网页--扫码进入H5页面,完成业务后关闭页面

387 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

1:html

 <span class="date">{{countdown}} 秒后自动退出</span>
    <div class="btn_one">
      <van-button block type="info" @click="closePage">完成</van-button>
    </div>
 data () {
    return {
      countdown: '6',
      timer: null
    }
  },

2:倒计时关闭

 mounted () {
    this.loading() // 启动定时器
    this.timer = setInterval(() => {
      // 创建定时器
      if (this.countdown === 1) {
        this.clearTimer() // 关闭定时器
        this.closePage()
      } else {
        this.loading()
      }
    }, 1000)
  },
  methods: {
    loading () {
      // 启动定时器
      this.countdown-- // 定时器减1
    },
    clearTimer () {
      // 清除定时器
      clearInterval(this.timer)
      this.timer = null
    },
    // 先清除定时器,在关闭页面
    closePage() {
      clearInterval(this.timer)
      let browser = navigator.userAgent.toLowerCase();
      if (browser.match(/Alipay/i) == "alipay") {
        console.log("支付宝app的浏览器");
        //这个可以关闭安卓系统的手机
        document.addEventListener("AlipayJSBridgeReady", function () {
            AlipayJSBridge.call("closeWindow");
          },
          false
        );
        //这个可以关闭ios系统的手机
        AlipayJSBridge.call('closeWebview'); //支付宝
      } else if (browser.match(/MicroMessenger/i) == "micromessenger") {
        //这个可以关闭安卓系统的手机
        document.addEventListener("WeixinJSBridgeReady", function () {
            WeixinJSBridge.call("closeWindow");
          },
          false
        );
        //这个可以关闭ios系统的手机
        WeixinJSBridge.call("closeWindow");
      } else {
        console.log("其它浏览器");
        window.opener = null;             //如果没有这行和下面的一行则会出现上面的第二个询问框。
        window.open(' ', '_self', ' ');
        window.close()
      }
    }
  }```