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字庫