通過手機瀏覽器打開APP或者跳轉到下載頁面
以下僅展示最簡單的例子及關鍵代碼
由於硬件條件有限,僅測試了 Android 下的情況
IOS 的自行參考鏈接
添加 schemes
在 HBuilder 創建的移動 APP 項目下有 manifest.json 文件,在里面添加 schemes,schemes 中的值你喜歡設置成什么就什么吧。
網頁設置
這個時候,你需要一個簡單 web 系統,能提供一個簡單的 web 頁面供手機瀏覽器訪問。
這個做過 Java 的人都懂,不詳說了。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>文檔標題</title>
</head>
<body>
<div style="font-size: 68px;">
<a href="javascript:open_or_download_app();">打開APP</a>
<span id="device"></span>
</div>
<script type="text/javascript">
//<![CDATA[
function open_or_download_app() {
var device = document.getElementById("device");
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
device.innerHTML = "ios設備";
// 判斷useragent,當前設備為ios設備
var loadDateTime = new Date();
// 設置時間閾值,在規定時間里面沒有打開對應App的話,直接去App store進行下載。
window.setTimeout(function() {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime <2200) {
window.location = "xxxxxxxx"; // APP下載地址
} else {
window.close();
}
},2000);
window.location = "apptest://apptest"; //ios端URL Schema
} else if (navigator.userAgent.match(/android/i)) {
device.innerHTML = "Android設備";
// 判斷useragent,當前設備為Android設備
// 判斷useragent,當前設備為ios設備
var loadDateTime = new Date();
// 設置時間閾值,在規定時間里面沒有打開對應App的話,直接去App store進行下載。
window.setTimeout(function() {
var timeOutDateTime = new Date();
if (timeOutDateTime - loadDateTime < 2200) {
window.location = "xxxxxxxx"; // APP下載地址
} else {
window.close();
}
},2000);
window.location = "apptest://apptest"; // Android端URL Schema
}
}
//]]>
</script>
</body>
</html>
Android 的 URL Schema 寫成 “你設置的Schema://你設置的Schema” 即可訪問。IOS 的和這個不同。URL Schema 的詳解自行百度,你會有更深的理解。
根據參考,即使在后台打開了 APP,JS 仍會執行一段時間,大概是 600 - 1000 毫秒,所以至少也要設置定時調度大於 1 秒,這樣比較有保證。
window.setTimeout(function() {
},2000); // 需要設置大一點,才有效果,否則會始終執行
接下來就可以打包 APP 安裝到手機上進行測試,也可以刪掉 APP,對比兩次的結果。
IOS 的有條件再補上
參考鏈接
- Android平台通過UrlSchemes與第三方應用相互調用:http://ask.dcloud.net.cn/article/409
- 給你的移動網站加點料:推薦下載App,如果本地安裝則直接打開本地App(Android/IOS):http://www.cnblogs.com/iamjiuye/p/3362978.html
- 又到周末了,我們一起來研究【瀏覽器如何檢測是否安裝app】吧:http://www.cnblogs.com/yexiaochai/p/3439179.html