H5唤醒App（含对未安装App唤醒）

由于公司H5离职了，一直没有招到合适的，所以自学了H5的开发，一边做iOS开发，然后顺便写写H5，哈哈哈，觉得也挺有意思的

看网上好多h5打开App的博客，但看了那么多实现跳转的时候并没有达到我的预期呀，特别想说一句：复制的时候可不可以走点心呀。结合多个博客，最终实现了我想要的功能，这里记录下来，希望可以帮到其他人

这个方法是点击打开App的时候调用这个方法，本应用场景是打开和下载的功能都在一个按钮上进行处理

在打开自定义URL scheme时
如果安装了App，则会弹出对话框，询问是否用打开XX应用。
若未安装App则会显示“safari打不开该网页，因为网址无效”。

解决方法如下

 function openJslApp() {

      // 判断打开的方式
     var isIos = browser.versions.iPhone || browser.versions.iPad || browser.versions.ios; //ios终端
     var isAndroid = browser.versions.android; //android终端
     var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;

   // 用到的链接
     var downloadUrl = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.jiutouxiang';
  // 前端和客户端定义跳转协议
     var openUrl_IOS = 'openapp://xxx';
     var openUrl_Android_ = 'openapp://xxx';

     var ua = window.navigator.userAgent.toLowerCase();

     /** 判断是否在微信打开 如果在微信打开 提醒用户用浏览器打开 */
     if (ua.match(/MicroMessenger/i) == 'micromessenger') {

         $("#openBrowser").css("display", "block").click(function () {
             $("#openBrowser").css("display", "none");
         });

     } else {

         if (isIos) {

             if (openApp(openUrl_IOS)) {

                 openApp(openUrl_IOS);

             } else {

                 //判断是否是ios
                 var loadDateTime = Date.now();

                  // 如果没有跳转到app 说明app未安装 则去下载app
                 setTimeout(function () {

                     if (Date.now() - loadDateTime < 1000) {
                        
                         window.location.href = downloadUrl;
                     }

                 }, 200);
             }

         } else if (isAndroid) { //判断是否是android
             
             if (isChrome) {

                 //chrome浏览器用iframe打不开得直接去打开，算一个坑
                 window.location.href = openUrl_Android_;
                 
             } else {

                 if (openApp(openUrl_Android_)) {

                     openApp(openUrl_Android_);

                 } else {

                     var loadDateTime = Date.now();

                     // 如果没有跳转到app 说明app未安装 则去下载app
                     setTimeout(function () {

                         if (Date.now() - loadDateTime < 1000) {
                             window.location.href = downloadUrl;
                         }

                     }, 200);
                 }
             }

         } else {
             setTimeout(function () {
                 window.location.href = downloadUrl;
             }, 200);
         }
     }
 }

function openApp(src) {

// 通过iframe的方式试图打开APP
// 如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为
// 否则打开a标签的href链接
     var ifr = document.createElement('iframe');
     ifr.src = src;
     ifr.style.display = 'none';
     document.body.appendChild(ifr);
     window.setTimeout(function(){
         document.body.removeChild(ifr);
     },2000);
 }

检测到未安装App，则跳转到下载链接

image.png