1. 程式人生 > >怎麽判斷一個APP是原生APP、混合APP還是WEB APP ?

怎麽判斷一個APP是原生APP、混合APP還是WEB APP ?

大眾點評 支付寶 開發者 文章 螞蟻

1、看斷網情況

通過斷開網絡,刷新頁面,觀察內容緩存情況來有個大致的判斷,可以正常顯示的就是原生寫的,顯示404或者錯誤頁面的就是html頁面。

2、看布局編輯

3、看復制文章的提示,需要通過對比才能得出結果。

比如文章資訊頁面可以長按頁面試試,如果出現文字選擇,粘貼功能的是H5頁面,否則是native原生的頁面。

有些原生APP開放了復制粘貼功能或者關閉了,而H5的CSS屏蔽了復制選擇功能等情況,需要通過對目標測試APP進行對比才可知。

在支付寶APP、螞蟻聚寶是可以判斷的。

4、看加載的方式

如果在打開新頁面導航欄下面有一條加載線的話,這個頁面就是H5頁面,如果沒有就是原生的。

5、看app頂部,導航欄是否會有關閉的操作

如果APP頂部導航欄當中出現了關閉的按鈕或者關閉的圖標,那麽當前的頁面是H5頁面,原生的不會出現(除非設計開發者特意設計),美團、大眾點評的APP、微信APP當加載H5過多的時候,左上角會出現關閉兩個字。

6、判斷頁面下拉刷新的時候(前提是要有下拉刷新的功能)

如果頁面沒有明顯刷新現象的是原生的,如果有明顯刷新現象(比如閃一下)的是H5頁面(Ios和Android)。比如淘寶的眾籌頁面。

7、下拉頁面的時候顯示網址提供方的一定是H5頁面。

技術分享


8、利用系統開發人員工具

找到手機的設置,開發者選項,顯示布局邊界,選擇開啟後再去查看APP整體布局邊界,這樣所有應用控件布局就會一目了然。

如果是native APP那麽每個按鈕、文字、圖片都是紅色的線顯示這個控件的布局情況。如下圖的微信:

技術分享

如果是web APP那麽應該就是一個webview去加載網頁,webview作為一個控件,只有一個邊界框,即只有屏幕邊才有紅色線,如下圖:

技術分享

混合APP 則是native 與 webview 混排的界面,如下圖紅色線框是各控件的繪制邊界,中間那一大塊布局豐富的界面沒有顯示出很多邊界紅線,就是網頁實現的。如下圖的京東:

技術分享

本文出自 “學習改變命運” 博客,謝絕轉載!

怎麽判斷一個APP是原生APP、混合APP還是WEB APP ?