許久沒有寫博客了，最近有個H5啟動APP原生頁面的需求，中間遇上一些坑，看了些網(wǎng)上的實現(xiàn)方案，特意來總結下
一、需要判斷客戶端的平臺以及是否在微信瀏覽器中訪問
1、客戶端判斷
在啟動APP時，Android和IOS系統(tǒng)處理的方式是不一樣的，Android這邊由于開放，可以在瀏覽器中通過<a>標簽以及meta標簽的方式，讓瀏覽器app獲取手機打開應用的權限進而啟動APP。
而在IOS這邊，IOS9以后的系統(tǒng)，則可以在APP開發(fā)過程中加入配置和邏輯代碼編寫，系統(tǒng)在瀏覽器即將訪問到某個域名前就把這個域名對應的APP打開，這個有點閃，封閉還是有封閉的好處。
所以首先要在客戶端判斷，是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)置瀏覽器中
無論是在哪個平臺的客戶端Android/IOS，在微信的平臺上訪問都有一個問題，那就是無法啟動客戶端，這是微信為了安全性考慮的限制，android這邊屏蔽schema協(xié)議，除非公司是微信的伙伴加入了白名單才能
使用，IOS系統(tǒng)可以去訪問app對應appstore的下載頁，但是微信經(jīng)常屏蔽appstore的這個網(wǎng)址，進而訪問不到。比較方便的做法就是在微信瀏覽器中，無論是IOS還是android都去應用寶的下載(IOS 這邊最后會到
appstore中)頁面打開。我這邊的需求是提示用戶點擊“...”用默認瀏覽器打開。
判斷是否是在微信中，代碼如下：
function isInWx(){
var agent = window.navigator.userAgent.toLowerCase();
return agent.match(/MicroMessenger/i) == 'micromessenger';
}
二、原理
首先無論是andorid還是IOS端，在瀏覽器中通過JS都是無法判斷該手機是否裝有某APP的，即使這個瀏覽器有權限讀取手機應用列表，也沒有一個固定的對外API讓咱們進行查詢。而H5啟動APP本質上是通過
URL scheme打開APP，一個APP可以設置一個或多個打開自己的URL scheme，瀏覽器去訪問某一個APP的URL scheme，然后若系統(tǒng)安裝有這個APP，則會請求權限去打開這個APP。其實也算是瀏覽器app
打開另一個app，iOS就可以使用 UIApplication 的 canOpenUrl 方法來檢測URL scheme 是否能打開對應的APP，而android也是類似的方式。當然如果JS跳轉URL scheme沒有反應，也意味著這個手機沒有
裝這個app。
三、android平臺
首先編輯AndroidManifest.xml，主要是增加第二個<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，這個最好是app的唯一標識符，要不然在H5喚醒時，會出現(xiàn)一個選擇框，選擇啟動哪一個APP。而host表示啟動該頁面，其實這個更應該用com.android.sky這樣的包名來替代更好。
這樣的情況完整的URL就是wushang://android?data=sky，后面是參數(shù)傳遞。在Activity中可以用如下代碼獲取參數(shù)
public void onCreate(Bundle savedInstanceState) {
Uri uridata = this.getIntent().getData();
String mydata = uridata.getQueryParameter("data");
}
之后在進行字符串截取還是什么鬼的都隨意啦。
接下來來談談前端代碼，這里有兩種情況
1、頁面在刷新進入時，請求權限喚起APP
這個比較簡單，就只用在頁面的頂部head中加入meta標簽即可
<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">
這個標注當頁面刷新即去訪問這個鏈接，進而啟動APP。但是存在一個問題，如果是蘋果系統(tǒng)的Safari瀏覽器的話，訪問有這個meta的頭，會給出錯誤提示，所以這個頭部可以在后端進行頁面渲染時通過客戶端的
總類在加上去。
2、通過點擊事件喚起APP
最簡單的辦法當然是直接使用a標簽，如下
<a href="wushang://android">open Android app</a>
但是在實際使用時，是需要對客戶端的平臺類型還有是否在微信內(nèi)置瀏覽器中進行判斷的，所以這樣的做法肯定是不行的。
接下來談談在開發(fā)過程中，遇到的一個問題，記錄下。因為這邊移動端使用的工具庫庫是zepto，采用的點擊事件是tap，但是在用tap進行處理是經(jīng)常要點很多下，才能喚起APP
<script type="text/javascript">
$('#go').tap(function(){
window.location.href = "wushang://android";
});
</script>
具體原因不知，可能是tap事件采用的是輕點觸碰。然后摸索了下，才用click事件，或者直接在a標簽上標注處理函數(shù)就沒有這問題
<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>
所以決定以后遇到這類問題，就用這兩種方式了。下面是實際的處理函數(shù)
window.startApp = function(){ //啟動APP
if(publicFun.isInWx()){ //微信中
alert("請在瀏覽器中打開");
}else{ //非微信中
if(publicFun.isIos()){ //IOS系統(tǒng)，直接去itunes中，既可以下載也可以打開
window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
}else{ //android系統(tǒng)，通過定時器的方式，判斷是否安裝有APP
var hasApp = true , t = 1000;
setTimeout(function () { //沒有安裝APP則跳轉至應用寶下載，延時時間設置為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的時間就是出發(fā)APP啟動的時間，若APP啟動了，再次返回頁面時t2這行代碼執(zhí)行，hasApp即為true。反之若APP沒有啟動即為false
var t2 = Date.now();
hasApp = !(!t1 || t2 - t1 < t + 150);
} , t);
}
}
}
其實有個非常簡單的辦法，就是直接跳轉應用寶。無論是在android還是IOS，以及微信非微信。應用寶的下載頁面都有下載和打開兩個功能（如果是在IOS平臺，它是通過連接app store的方式）
四、IOS平臺
針對ios9及以上的打不開問題，實際上ios9提供了更好的解決方案————通用鏈接。
這是iOS9推出的一項功能，如果你的應用支持Universal Links(通用鏈接)，那么就能夠方便的通過傳統(tǒng)的HTTP鏈接來啟動APP(如果iOS設備上已經(jīng)安裝了你的app，不需要額外做任何判斷等)，或者打開網(wǎng)頁(iOS設備上沒有安裝你的app)。或許可以更簡單點來說明，在iOS9之前，對于從各種從瀏覽器，Safari、UIWebView或者 WKWebView中喚醒APP的需求，我們通常只能使用scheme。
以上來自網(wǎng)上關于通用鏈接的介紹，對于前端簡單點講就是你訪問一個http的url，如果這個url帶有你提交給開發(fā)平臺的配置文件中匹配規(guī)則的內(nèi)容，ios系統(tǒng)會去嘗試打開你的app，如果打不開，系統(tǒng)就會在瀏覽器中轉向你要訪問的鏈接。很好的一個屬性，因為通過這個屬性在ios9上我們能夠繞過微信的攔截從而打開app。
所以上面的點擊事件，僅僅是去訪問app store，因為若app已安裝，在瀏覽器訪問時，就已經(jīng)去到APP中了。
這些都是IOS配置上的東西，就不多寫了。至于傳參，以及頁面定向，其實也就是相當于在UIWebView中獲取當前連接的URL，然后進行字符串拆分以及校驗，即可判斷去哪個頁，以及獲取參數(shù)值。
到此這篇關于html5啟動原生APP總結的文章就介紹到這了,更多相關html5啟動原生APP內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
