通過手機瀏覽器開啟APP或者跳轉到下載頁面.md
阿新 • • 發佈:2019-02-01
通過手機瀏覽器開啟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 的有條件再補上