美文网首页
H5页面唤醒APP

H5页面唤醒APP

作者: 梦想_Dream | 来源:发表于2019-04-18 14:34 被阅读0次

    这个项目用的是vue框架,需要判断手机系统和浏览器环境,因为在微信中是不能直接打开APP的,微信屏蔽了此功能,当时研究了好久,还是没能实现,我也是很无奈。
    打开APP用的是url scheme,需要客户端那边定义给出链接,前端直接跳转就行了。
    下面是js部分代码

    goToApp() {
      if (isWXBrowser) { 
        //判断是否是在微信浏览器中打开的h5链接,如果是,只能跳转到下载APP
        if ("ios" == getAppType()) {
          window.location.href = this.iosDownUrl; // 跳转到App Store
        } else {
          window.location.href = this.androidDownUrl; // 跳转到应用宝
        }
      } else {
        if ("ios" == getAppType()) {
          this.openOrDown(this.iosOpenUrl, this.iosDownUrl);
        } else {
          this.openOrDown(this.androidOpenUrl, this.androidDownUrl);
        }
      }
    },
    openOrDown(openUrl, downUrl){
      window.location.href = openUrl;
      let hasApp = true;
      setTimeout(function() {
        //没有安装APP则跳转至应用宝下载,延时时间设置为2秒
        if (!hasApp){
          window.location.href = downUrl;
        }
      }, 2000);
      let t1 = Date.now();
      setTimeout(function() {
        //t的时间就是出发APP启动的时间,若APP启动了,再次返回页面时t2这行代码执行,hasApp即为true。反之若APP没有启动即为false
        let t2 = Date.now();
        hasApp = !(!t1 || t2 - t1 < 1150);
      }, 1000);
    }
    

    最后在微信小程序里可以直接打开APP,不过小程序又没有打开App Store的功能,安卓也打不开应用市场。具体可以参考小程序官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

    相关文章

      网友评论

          本文标题:H5页面唤醒APP

          本文链接:https://www.haomeiwen.com/subject/bhxtgqtx.html