美文网首页iOS开发技术分享
H5唤醒App(含对未安装App唤醒)

H5唤醒App(含对未安装App唤醒)

作者: ZHANGMIAO_ | 来源:发表于2018-11-15 15:17 被阅读0次

    由于公司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

    相关文章

      网友评论

        本文标题:H5唤醒App(含对未安装App唤醒)

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