h5打开app(包括安卓和ios)。h5部分代码

今天有朋友问我h5跳转app怎么作，隔了很久，不少都忘了，无奈翻出老代码又大概缕了一遍，为了防止再次忘记，记录一下，哈哈哈😆

var openApp=function(appdata){//(此处的appdata是咱们须要往app传的参数，根据需求和页面结构，可传可不传)
    //实际上就是新建一个iframe的生成器
    var  createIframe=(function(){
        var iframe;
        return function(){
            if(iframe){
                return iframe;
            }else{
                iframe = document.createElement('iframe');
                iframe.style.display = 'none';
                document.body.appendChild(iframe);
                // iframe.onload=function(){
                //     alert(0);
                // }
                return iframe;
            }
        }
    })()
    var config={
        // 生成一个url scheme,和原生约定好，随便命名（ios的scheme_IOS，不太实用，几乎不用）
        scheme_IOS: 'scheme名字+须要往app传的参数,（例如scheme_Adr所写）
        scheme_Adr: 'openowhat://owhat.cn/scheme?opentype='+appdata.opentype+'&entityid='+appdata.entityid+'&goodstype='+appdata.goodstype+'&articletype='+appdata.articletype,
        timeout:600
    }
      var openApp=function(){//打开直接跳转
        var u = navigator.userAgent;
        var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        var isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
        var localUrl=isIos?config.scheme_IOS:config.scheme_Adr;
        var openIframe=createIframe();//建立的iframe

        function isWeiXin(){//判断在不在微信里面
            var ua = window.navigator.userAgent.toLowerCase();    
            if(ua.match(/MicroMessenger/i) == 'micromessenger'){
              return true;
            }else{
              return false;
            }
        }    
        var urls='';
        if(isIos){//ios里面（这个百度一下，是一个IOS9+的新功能，叫Universal Links,https://mul.owhat.cn/shop/这个连接是后台新建的连接，具体步骤就百度Universal Links的用法就有。）
　　//大致缘由是
    //前端开发常常面临跨域问题，必需要求跨域，若是不跨域，就不行。
    //只有当前webview的url域名，与跳转目标url域名不一致时，Universal Link 才生效
            window.location.href='https://mul.owhat.cn/shop/+须要给app的参数
       }else if(isAndroid){//安卓里面
            if(isWeiXin()){//若是是微信，跳应用宝
                window.location.href='应用宝连接';
            }else{
                //若是不是微信，某秒以后打不开（说明没有下载app）就直接下载
                if (isChrome) {
                    //chrome浏览器用iframe打不开得直接去打开，算一个坑
                    window.location.href = localUrl;
                } else {
                    //抛出你的scheme
                    openIframe.src = localUrl;
                }
                var startTime = Date.now();
                var t = setTimeout(function() {
                    var endTime = Date.now();
                    if (!startTime || endTime - startTime < config.timeout + 200) { 
                        window.location.href = "安卓包连接";
                    }
                }, config.timeout);    
                $(document).on('visibilitychange webkitvisibilitychange', function() {
                    var tag = document.hidden || document.webkitHidden;
                    if (tag) {
                        clearTimeout(t);
                    }
                });
                $(window).on('pagehide', function() {
                    clearTimeout(t);
                });
                $(window).on("blur",function(){
                    clearTimeout(t);
                });                                                                            
            }
        }else{
            //主要是给winphone的用户准备的,实际都没测过，如今winphone很差找啊
            openIframe.src = localUrl;
            var t = setTimeout(function () {
                   window.open("../download/index.html");//你的下载地址（网站内部本身的下载页面）
            }, 500);                    
        }
    }
    $(".js-download").on("click",function(){//点击按钮的时候跳app
        openApp();  
    });
  $(".js-cancle_download").off("click").on("click",function(){//把跳转的按钮条去掉（公司内部代码，忽略）
      $("#downnav").remove();
      $("#detailNav").find(".nav_nei").removeClass('downtop96');
      $(".brace").css("top","0.76rem");
  });              
}   
//大概思想
1.ios主要用Universal Links来实现
2.安卓在微信里面跳转应用宝，因为咱们公司app下载量啥的不够，因此没有用applink
3.安卓在其余浏览器用的是scheme。

 

 

openowhat  详细 X

  没有英汉互译结果
   请尝试网页搜索

OpenType     详细 X

网络释义

OpenType: OpenType

opentype fold: 开口褶皱

OpenType script: OpenType字库