教你判斷一個APP頁面是原生的還是H5頁面 。(還沒看)


來源:https://www.25xt.com/appdesign/11851.html

剛好是周末,無意之間學堂君在收集相關資料的時候,發現有部分童鞋在問《如何判斷一個APP頁面是不是H5頁面》或者是《如何判斷app中原生頁面和h5 頁面》等等類似的問題。

於是,25學堂為了幫大家解答這樣的問題,特地花了不少時間研究了一下APP里面的原生頁面和H5頁面到底有哪些不一樣。

不仔細去觀察,一般人都不會察覺出來的,再加上現在的H5技術和原生應用的技術很多類似,或者說實現的效果很相像。

 

我們再來回顧一下:

如今最火的APP開發模式是Hybrid  APP開發(即混合模式,半原生半H5頁面)。

原生是Native APP           H5就是Web App

 

在Hybrid 當中,如何快速的判斷一個APP頁面是原生的還是H5頁面呢?25學堂總和網友的答案匯總整理了一下。如果你們還有更好的判斷方法也可以告知學堂君。

1、看斷網的情況

把手機的網絡斷掉。然后點開頁面。然后可以正常顯示的東西就是原生寫的。

顯示404或則錯誤頁面的是html頁面。

 

2、看布局邊界

可以打開  開發者選項中的顯示布局邊界,頁面元素很多的情況下布局是一整塊的是h5的,布局密密麻麻的是原生控件。頁面有布局的是原生的否則為h5頁面。(僅針對安卓手機試用)如下圖所示:

教你判斷一個APP頁面是原生的還是H5頁面

 

 

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

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

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

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

 

4、看加載的方式

如果在打開新頁面導航欄下面有一條加載的線的話,這個頁面就是H5頁面,如果沒有就是原生的。 微信里面打開我們的H5頁面常見的有個綠色的 加載線條。如下圖紅框里面所示:

美團app

 

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

如果APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖標,那么當前的頁面肯定的H5,原生的不會出現(除非設計開發者故意弄的)

美團的、大眾點評的APp、微信APP當加載h5過多的時候,左上角會出現關閉2字。

 

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

如果界面沒有明顯刷新現象的是原生的,如果有明顯刷新現象(比如閃一下)的是H5頁面(ios和android)。

比如淘寶的眾籌頁面。

 

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

淘寶

 

以上7點也是目前25學堂的幫大家整理出來的比較容易判斷的一個APP頁面是原生的還是H5頁面的方法。

希望可以幫到大家,以便更加容易區分原生APP頁面和H5頁面。

 

另外一篇


1無網絡

 

斷開網絡,顯示404或則錯誤頁面的是H5


 

 

 

2頁面布局

 

a、在手機設置、開發者選項中開啟顯示布局邊界功能;


b、進入應用查看布局邊界;


c、原生應用可以看到各個控件的布局邊界,H5只有整個頁面的一個邊界

 

注釋:

開發者工具是進入<關於手機>,找到<版本號>,有的手機這個版本號是在更多信息里,連續雙擊<版本號>,會提示開啟開發者模式,再返回通用菜單,開啟開發者選項

 

 

     

圖左(源生)   圖右(H5) 

3長按頁面

 

長按頁面,出現特殊標記、放大鏡,復制,粘貼等等,

 

甚至手機震動(Android),則表示是H5

 

 

 

4加載的方式

 

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


微信里面打開我們的H5頁面常見的有個綠色的加載線條。

 

 

 

5導航欄是否會有關閉的操作

 

APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖標,那么當前是H5頁面

 

 

 

 

6網頁提供方

 

下拉頁面的時候顯示網址提供方的是H5頁面


 

來源 https://mp.weixin.qq.com/s/E7JXsLXh2MYla0QSju7kWA

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM