1. 程式人生 > >通過手機瀏覽器開啟APP或者跳轉到下載頁面.md

通過手機瀏覽器開啟APP或者跳轉到下載頁面.md

通過手機瀏覽器開啟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 的有條件再補上

參考連結