用callapp-lib插件关于H5判断是否安装app和唤起APP

110 阅读 0 评论 73 点赞

我是靠谱客的博主感性小霸王，最近开发中收集的这篇文章主要介绍用callapp-lib插件关于H5判断是否安装app和唤起APP，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. 使用callapp-lib插件：参考https://github.com/suanmei/callapp-lib。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>callapp-lib示例</title>
</head>
<body>
  <div id='call-button'>点击唤起电流App个人页</div>

  <script src='https://unpkg.com/callapp-lib@2.1.7/dist/index.umd.js'></script>
  <script>
    const option = {
      scheme: {
        protocol: 'ykshortvideo',
      },
      outChain: {
        protocol: 'ykshortvideo',
        path: 'temporary',
        key: 'url',
      },
      intent: {
        package: 'com.youku.shortvideo',
        scheme: 'ykshortvideo',
      },
      universal: {
        host: 'flash-link.youku.com',
        pathKey: 'action',
      },
      appstore: 'https://itunes.apple.com/cn/app/id1383186862',
      yingyongbao: '//a.app.qq.com/o/simple.jsp?pkgname=com.youku.shortvideo',
      fallback: 'https://dianliu.youku.com/service/download',
      timeout: 2000,
    };
    const lib = new CallApp(option);
    const callButton = document.querySelector('#call-button');
    callButton.addEventListener('click', () => {
      lib.open({
        path: 'profile',
      });
    });
  </script>
</body>
</html>

2. 原理：通过窗口打开app地址，在一定时间如3s/5s内，不能打开就跳转app下载链接。

testApp(){
        let userAgent=navigator.userAgent;
        let iosOpenUrl='';  //ios的打开地址，schema链接或者universal link
        let iosDownUrl='';  //ios的下载地址
        let androidOpenUrl='';  //android的打开地址，schema链接或者universal link
        let androidDownUrl='';  //android的下载地址
        let delayTime=500;
        if (userAgent.match(/(iPhone|iPod|iPad);?/i)) { //当前设备是ios
            var firstTime = new Date();
            window.location =iosOpenUrl;
            window.setTimeout(function() { 
              var secondTime = new Date();
              if (secondTime - firstTime < 5000) {
                window.location = iosDownUrl; 
              } else {
                window.close();
              }
            }, delayTime);     
        } else if (userAgent.match(/android/i)) {  //当前设备是android
          try {
            window.location = androidOpenUrl; 
            window.setTimeout(function() {
              window.location = androidDownUrl;  
            }, delayTime);
          } catch (eror) {
            console.log(eror)
          }
        }
      }