網頁端開啟手機上的app

2022-05-22 22:39:07 字數 1922 閱讀 3083

這是乙個既直觀又很好的使用者體驗,但在實現過程中會遇到各種問題:

在ios9中如何處理universal link被使用者誤關的情況

如何解決android各種機型、各種第三方瀏覽器導致的相容問題等

下面是我一些個人的經驗分享。

這塊內容其實比較簡單,在網上都有很多資料可供查閱,就不再贅述。

因為ios9和之前的ios系統有區別,所以這裡我們也要區別對待。

ios7/ios8

ios中預設通過safari開啟url scheme,方法一般如下兩種:

iframe 方式:在 body 上新增 iframe,設定src屬性為跳轉的url scheme。

第一種情況:

或者

window.location.href = schemeurl;

後一種方法不會引起頁面可見的變化(例如頁面內容變成乙個新頁面),不會導致瀏覽器歷史記錄的變化,大致實現如下:

android

但這個方案在很多安卓機型上有問題,為保證可用,改用第一種方案:

$('a').click(function() 

}, 1000);

return false;

}

或者換種方式:

但原理都是一樣,利用settimeout。但這其實不穩定,因為android是基於linux的時分復用的,settimeout的基準偏差可能會沒那麼大。

functioncheckopen(cb) else

}//啟動間隔20ms執行的定時器,並檢測累計消耗時間是否超過3000ms,超過則結束

var _count = 0, inthandle;

inthandle = setinterval(function()

}, 20);

}var ifr = document.createelement('iframe');

ifr.src = openurl;

ifr.style.display = 'none';

if (callback) );

}settimeout(function() , 2000);

}另外,可以通過document.hiddendocument.[webkit|moz|ms]hidden來判斷頁面是否被置入後台(即應用被喚起),或visibilitychange事件,但對於android 4.4版本一下則不支援。

ios9

$('a').click(function() 

$('a').click(function() , 250);

settimeout(function() , 1000);

}

沒有完美的解決方案

但這裡有坑需要注意。

手機端網頁監測是否開啟鍵盤

做h5頁面經常會遇到頁面有輸入功能的 例如這種的 ps 測試機僅有一台mi4c 最開始想,鍵盤彈出應該占用了瀏覽器的視窗,所以彈出鍵盤時頁面的可用高度一定是變化的,換句話說就是彈出鍵盤導致瀏覽器的高度被壓縮。所以通過對比輸入框獲取焦點前後瀏覽器視窗高度的變化,可以判斷出鍵盤是否彈出。document...

手機app端,token的詳解

token是什麼?token是服務端生成的一串字串,以作客戶端進行請求的乙個令牌。當第一次登陸後,伺服器生成乙個token便將此token返回個客戶端,以後客戶端只需帶上這個token前來請求資料即可,無需再次帶上使用者名稱和密碼。如何使用token?兩種使用方式 1 用裝置號 裝置mac位址作為t...

手機app端,token的詳解

token是什麼?token是服務端生成的一串字串,以作客戶端進行請求的乙個令牌。當第一次登陸後,伺服器生成乙個token便將此token返回個客戶端,以後客戶端只需帶上這個token前來請求資料即可,無需再次帶上使用者名稱和密碼。如何使用token?兩種使用方式 1 用裝置號 裝置mac位址作為t...