html5啟動(dòng)原生APP總結(jié)

許久沒(méi)有寫(xiě)博客了，最近有個(gè)H5啟動(dòng)APP原生頁(yè)面的需求，中間遇上一些坑，看了些網(wǎng)上的實(shí)現(xiàn)方案，特意來(lái)總結(jié)下

一、需要判斷客戶端的平臺(tái)以及是否在微信瀏覽器中訪問(wèn)

1、客戶端判斷

在啟動(dòng)APP時(shí)，Android和IOS系統(tǒng)處理的方式是不一樣的，Android這邊由于開(kāi)放，可以在瀏覽器中通過(guò)<a>標(biāo)簽以及meta標(biāo)簽的方式，讓瀏覽器app獲取手機(jī)打開(kāi)應(yīng)用的權(quán)限進(jìn)而啟動(dòng)APP。

而在IOS這邊，IOS9以后的系統(tǒng)，則可以在APP開(kāi)發(fā)過(guò)程中加入配置和邏輯代碼編寫(xiě)，系統(tǒng)在瀏覽器即將訪問(wèn)到某個(gè)域名前就把這個(gè)域名對(duì)應(yīng)的APP打開(kāi)，這個(gè)有點(diǎn)閃，封閉還是有封閉的好處。

所以首先要在客戶端判斷，是Android系統(tǒng)還是IOS系統(tǒng)，判斷代碼如下

function isInIos(){
    var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];
    for(var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          return true;
        }
    }
    return false;
}        

2、是否在微信內(nèi)置瀏覽器中

無(wú)論是在哪個(gè)平臺(tái)的客戶端Android/IOS，在微信的平臺(tái)上訪問(wèn)都有一個(gè)問(wèn)題，那就是無(wú)法啟動(dòng)客戶端，這是微信為了安全性考慮的限制，android這邊屏蔽schema協(xié)議，除非公司是微信的伙伴加入了白名單才能

使用，IOS系統(tǒng)可以去訪問(wèn)app對(duì)應(yīng)appstore的下載頁(yè)，但是微信經(jīng)常屏蔽appstore的這個(gè)網(wǎng)址，進(jìn)而訪問(wèn)不到。比較方便的做法就是在微信瀏覽器中，無(wú)論是IOS還是android都去應(yīng)用寶的下載(IOS 這邊最后會(huì)到

appstore中)頁(yè)面打開(kāi)。我這邊的需求是提示用戶點(diǎn)擊“...”用默認(rèn)瀏覽器打開(kāi)。

判斷是否是在微信中，代碼如下：

function isInWx(){
    var agent = window.navigator.userAgent.toLowerCase();
    return agent.match(/MicroMessenger/i) == 'micromessenger';
}

二、原理

首先無(wú)論是andorid還是IOS端，在瀏覽器中通過(guò)JS都是無(wú)法判斷該手機(jī)是否裝有某APP的，即使這個(gè)瀏覽器有權(quán)限讀取手機(jī)應(yīng)用列表，也沒(méi)有一個(gè)固定的對(duì)外API讓咱們進(jìn)行查詢。而H5啟動(dòng)APP本質(zhì)上是通過(guò)

URL scheme打開(kāi)APP，一個(gè)APP可以設(shè)置一個(gè)或多個(gè)打開(kāi)自己的URL scheme，瀏覽器去訪問(wèn)某一個(gè)APP的URL scheme，然后若系統(tǒng)安裝有這個(gè)APP，則會(huì)請(qǐng)求權(quán)限去打開(kāi)這個(gè)APP。其實(shí)也算是瀏覽器app

打開(kāi)另一個(gè)app，iOS就可以使用 UIApplication 的 canOpenUrl 方法來(lái)檢測(cè)URL scheme 是否能打開(kāi)對(duì)應(yīng)的APP，而android也是類似的方式。當(dāng)然如果JS跳轉(zhuǎn)URL scheme沒(méi)有反應(yīng)，也意味著這個(gè)手機(jī)沒(méi)有

裝這個(gè)app。

三、android平臺(tái)

首先編輯AndroidManifest.xml，主要是增加第二個(gè)<intent-filter>

<activity android:name=".activity.LoadingActivity"
      android:label="${APP_NAME}"
      android:screenOrientation="portrait"
      android:theme="@style/FirstActivityTheme">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
　　　　　　<category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
　　　　　　<category android:name="android.intent.category.DEFAULT" />
　　　　　　<category android:name="android.intent.category.BROWSABLE" />
　　　　　　<data android:host="android"
                android:scheme="wushang" />
      </intent-filter>
</activity>

比如此處wushang就是scheme，這個(gè)最好是app的唯一標(biāo)識(shí)符，要不然在H5喚醒時(shí)，會(huì)出現(xiàn)一個(gè)選擇框，選擇啟動(dòng)哪一個(gè)APP。而host表示啟動(dòng)該頁(yè)面，其實(shí)這個(gè)更應(yīng)該用com.android.sky這樣的包名來(lái)替代更好。

這樣的情況完整的URL就是wushang://android?data=sky，后面是參數(shù)傳遞。在Activity中可以用如下代碼獲取參數(shù)

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

之后在進(jìn)行字符串截取還是什么鬼的都隨意啦。

接下來(lái)來(lái)談?wù)勄岸舜a，這里有兩種情況

1、頁(yè)面在刷新進(jìn)入時(shí)，請(qǐng)求權(quán)限喚起APP

這個(gè)比較簡(jiǎn)單，就只用在頁(yè)面的頂部head中加入meta標(biāo)簽即可

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

這個(gè)標(biāo)注當(dāng)頁(yè)面刷新即去訪問(wèn)這個(gè)鏈接，進(jìn)而啟動(dòng)APP。但是存在一個(gè)問(wèn)題，如果是蘋(píng)果系統(tǒng)的Safari瀏覽器的話，訪問(wèn)有這個(gè)meta的頭，會(huì)給出錯(cuò)誤提示，所以這個(gè)頭部可以在后端進(jìn)行頁(yè)面渲染時(shí)通過(guò)客戶端的

總類在加上去。

2、通過(guò)點(diǎn)擊事件喚起APP

最簡(jiǎn)單的辦法當(dāng)然是直接使用a標(biāo)簽，如下

<a href="wushang://android">open Android app</a>

但是在實(shí)際使用時(shí)，是需要對(duì)客戶端的平臺(tái)類型還有是否在微信內(nèi)置瀏覽器中進(jìn)行判斷的，所以這樣的做法肯定是不行的。

接下來(lái)談?wù)勗陂_(kāi)發(fā)過(guò)程中，遇到的一個(gè)問(wèn)題，記錄下。因?yàn)檫@邊移動(dòng)端使用的工具庫(kù)庫(kù)是zepto，采用的點(diǎn)擊事件是tap，但是在用tap進(jìn)行處理是經(jīng)常要點(diǎn)很多下，才能喚起APP

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });
</script>

具體原因不知，可能是tap事件采用的是輕點(diǎn)觸碰。然后摸索了下，才用click事件，或者直接在a標(biāo)簽上標(biāo)注處理函數(shù)就沒(méi)有這問(wèn)題

<a id="go" >
    open Android app
</a>
<a href="javascript:startApp()">
   open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>
    $('#go').click(function () {
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });

    function startApp(){
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }
</script>

所以決定以后遇到這類問(wèn)題，就用這兩種方式了。下面是實(shí)際的處理函數(shù)

 window.startApp = function(){     //啟動(dòng)APP
     if(publicFun.isInWx()){     //微信中
        alert("請(qǐng)?jiān)跒g覽器中打開(kāi)");
     }else{      //非微信中
        if(publicFun.isIos()){　　　　//IOS系統(tǒng)，直接去itunes中，既可以下載也可以打開(kāi)
            window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系統(tǒng)，通過(guò)定時(shí)器的方式，判斷是否安裝有APP
            var hasApp = true , t = 1000;
            setTimeout(function () {  //沒(méi)有安裝APP則跳轉(zhuǎn)至應(yīng)用寶下載，延時(shí)時(shí)間設(shè)置為2秒
              if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);
            var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的時(shí)間就是出發(fā)APP啟動(dòng)的時(shí)間，若APP啟動(dòng)了，再次返回頁(yè)面時(shí)t2這行代碼執(zhí)行，hasApp即為true。反之若APP沒(méi)有啟動(dòng)即為false
              var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  } 

其實(shí)有個(gè)非常簡(jiǎn)單的辦法，就是直接跳轉(zhuǎn)應(yīng)用寶。無(wú)論是在android還是IOS，以及微信非微信。應(yīng)用寶的下載頁(yè)面都有下載和打開(kāi)兩個(gè)功能（如果是在IOS平臺(tái)，它是通過(guò)連接app store的方式）

 四、IOS平臺(tái)

針對(duì)ios9及以上的打不開(kāi)問(wèn)題，實(shí)際上ios9提供了更好的解決方案————通用鏈接。

這是iOS9推出的一項(xiàng)功能，如果你的應(yīng)用支持Universal Links(通用鏈接)，那么就能夠方便的通過(guò)傳統(tǒng)的HTTP鏈接來(lái)啟動(dòng)APP(如果iOS設(shè)備上已經(jīng)安裝了你的app，不需要額外做任何判斷等)，或者打開(kāi)網(wǎng)頁(yè)(iOS設(shè)備上沒(méi)有安裝你的app)。或許可以更簡(jiǎn)單點(diǎn)來(lái)說(shuō)明，在iOS9之前，對(duì)于從各種從瀏覽器，Safari、UIWebView或者 WKWebView中喚醒APP的需求，我們通常只能使用scheme。

以上來(lái)自網(wǎng)上關(guān)于通用鏈接的介紹，對(duì)于前端簡(jiǎn)單點(diǎn)講就是你訪問(wèn)一個(gè)http的url，如果這個(gè)url帶有你提交給開(kāi)發(fā)平臺(tái)的配置文件中匹配規(guī)則的內(nèi)容，ios系統(tǒng)會(huì)去嘗試打開(kāi)你的app，如果打不開(kāi)，系統(tǒng)就會(huì)在瀏覽器中轉(zhuǎn)向你要訪問(wèn)的鏈接。很好的一個(gè)屬性，因?yàn)橥ㄟ^(guò)這個(gè)屬性在ios9上我們能夠繞過(guò)微信的攔截從而打開(kāi)app。

所以上面的點(diǎn)擊事件，僅僅是去訪問(wèn)app store，因?yàn)槿鬭pp已安裝，在瀏覽器訪問(wèn)時(shí)，就已經(jīng)去到APP中了。

這些都是IOS配置上的東西，就不多寫(xiě)了。至于傳參，以及頁(yè)面定向，其實(shí)也就是相當(dāng)于在UIWebView中獲取當(dāng)前連接的URL，然后進(jìn)行字符串拆分以及校驗(yàn)，即可判斷去哪個(gè)頁(yè)，以及獲取參數(shù)值。

到此這篇關(guān)于html5啟動(dòng)原生APP總結(jié)的文章就介紹到這了,更多相關(guān)html5啟動(dòng)原生APP內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！