记录网页唤起app成功后超时逻辑不应该执行问题

最新推荐文章于 2024-09-30 15:42:36 发布

时光伊始

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量143

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_45243726/article/details/142145721

版权

在点击唤起app时候添加一个页面监听，不过特别注意的是超时等待的时长，开始我设置为1500ms导致ios visibilitychange还没反应过来就执行了超时逻辑，改为2500后ios也变为正常，一直以为ios visibilitychange监听不生效呢，最后才发现这个问题

document.addEventListener("visibilitychange", this.handleVisiable, false);

import openapp from "h5-openapp"; //我使用的vue，引了这个依赖

data() {
    return {
      pageIsShow: true,
    }
  },

mounted() {
    document.addEventListener("visibilitychange", this.handleVisiable, false);添加监听
},
methods: {
 handleVisiable(e) {
      switch (e.target.visibilityState) {
        case 'hidden':
          this.pageIsShow = false;
          break
        case 'visible':
          // this.myPlayer.paly()
          this.pageIsShow = true;
          break
      }
   },
 async goAPP() {
      rwScheme = `rwScheme` //需要找app要
      openapp({
        scheme: rwScheme,
        download: {
          // 默认 scheme 跳转无效，便前往下载, 设置 onTimeout 回调时, 不执行下载逻辑
          ios: baseUrl, // ios 下载链接
          android: baseUrl, // android 下载链接
          other: baseUrl, // 其他渠道 下载链接
        },
        delay: 2500, // 等待时间, 超时后执行 onTimeout,  default: 3000
        disabledScheme: [], // scheme 被禁用的 APP
        onDisabled: function (appTag) {
          log("scheme 被禁用", appTag);
          // 当打开网页的 APP 为 disabledApp 中的任一个，并且未设置深链接时
          if (appTag === "MicroMessenger") {
            // console.log("微信不支持 scheme 跳转");
          } else if (appTag === "DingTalk") {
            // console.log("钉钉不支持 scheme 跳转");
          } else {
          
          }
        },
         onBeforeOpen: function () {
           // 在执行打开 app 逻辑前触发
         },
        onTimeout: function () {
          if(_this.pageIsShow){ //判断是否跳转app成功,浏览器被最小化
            _this.$router.push({ path: `/`}) //跳转到下载页面
          }

         
          // 触发打开 app 逻辑, 并且超过等待时间时触发, 未设置的情况下, 如果设置了下载链接, 则默认跳转下载链接
        }
      });
    },
}