1. 程式人生 > >如何判定一個APP頁面是原生開發還是H5頁面

如何判定一個APP頁面是原生開發還是H5頁面

一、引言

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

在Hybrid 當中,如何快速的判斷一個APP頁面是原生的還是H5頁面呢?

二、五種方法

1.看斷網的情況

把手機的網路斷掉。然後點開頁面。然後可以正常顯示的東西就是原生寫的。
顯示404或則錯誤頁面的是html頁面。

2.看佈局邊界

開啟開發者選項中的顯示佈局邊界
頁面元素很多、佈局是一整塊的就是h5的;
佈局密密麻麻的是原生控制元件。 這裡寫圖片描述

3.看複製文章的提示,需要你通過對比才能得出結果。

比如是文章資訊頁面可以長按頁面試試,如果出現文字選擇、貼上功能的是H5頁面,否則是native原生的頁面。
有些原生APP開放了複製貼上功能或者關閉了。而H5的css遮蔽了複製選擇功能等等情況。需要通過對目標測試APP進行對比才可知。
這個在支付寶APP、螞蟻聚寶都是可以判斷的。

4.看載入的方式

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

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

如果APP頂部導航欄當中出現了關閉按鈕或者有關閉的圖示,那麼當前的頁面肯定的H5,原生的不會出現(除非設計開發者故意弄的)
美團的、大眾點評的APp、微信APP當載入h5過多的時候,左上角會出現關閉2字。

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

如果介面沒有明顯重新整理現象的是原生的,如果有明顯重新整理現象(比如閃一下)的是H5頁面(ios和android)。
比如淘寶的眾籌頁面。

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

這裡寫圖片描述

相關推薦

如何判定一個APP頁面原生開發還是H5頁面

一、引言 如今最火的APP開發模式是Hybrid APP開發(即混合模式,半原生半H5頁面)。 原生是Native APP H5就是Web App 在Hybrid 當中,如何快速的判斷一個APP頁面是原生的還是H5頁面呢? 二、五種方法

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

大眾點評 支付寶 開發者 文章 螞蟻 1、看斷網情況 通過斷開網絡,刷新頁面,觀察內容緩存情況來有個大致的判斷,可以正常顯示的就是原生寫的,顯示404或者錯誤頁面的就是html頁面。2、看布局編輯3、看復制文章的提示,需要通過對比才能得出結果。 比如文章資訊頁面可以長按頁面試試,如

Android原生webView載入h5頁面出現載入錯亂不完全問題

一、錯誤的效果圖: 二、正確的效果圖: 三、解決方案: webView.getSettings().setDomStorageEnabled(true);//開啟DOM儲存API 四、參考文章: 地址:點選開啟連結 http://blog.csdn.net/u010

Android從一個APP跳轉到另一個APP的主介面或某頁面,並傳遞資料

1. Android 從一個 APP 跳轉到另一個 APP 主介面 Intent intent = new Intent(Intent.ACTION_MAIN); //前提:知道要跳轉應用的包名、類名 Comp

android原生WebView開啟h5頁面載入顯示不完整錯亂問題

一、錯誤的效果圖二、正確的效果圖:解決方案:給webView增加屬性:webView.getSettings().setDomStorageEnabled(true);///有可能是DOM儲存API沒有開啟

5月20日重點:當請求的參數是動態的形式時,原生apph5頁面之間數據交互的方法

post方法 註意 data 不能 images 動態 構建 parse 拼接 方案一: 1.app在打開H5頁面的時候,把需要給的參數,以get的形式,放在H5的url中。 2.然後H5的js從url中獲取到需要的參數,拼接到ajax請求的url中。 3.H5ajax請求

移動web:原生開發打包,嵌入h5頁面 webApp:全部都是H5開發的應用 混合APP:使用第三方開發平臺從apicloud,appcan,hbuilder等開發,cordova技術打包 原生APP:就是eclipse開發或者studio等工具開發

應用 手機 .com net ack 自動連接 pan 經驗 使用 論壇43213 移動端webApp兼容問題解決 談談App混合開發 Hybrid APP混合開發的一些經驗和總結 PhoneGap是一個采用HTML,CSS和JavaScript的技術,創建

h5頁面原生app頁面的區別

“原生應用”佔統治地位   當我們為移動裝置開發應用程式時,程式設計師通常都會選擇開發“原生應用”,“原生應用”是一種使用者必須通過手機應用商店購買下載並安裝在手機儲存器內的應用程式。“原生應用”現已成為新增手機功能的首選業界標準。   因此,大多數的程式設計師都認為跟瀏覽

android一個app一個app的指定頁面

category 目標 andro lean 一個 uri tco 安裝 是否 一個app打開另一個app的指定頁面方法 有以下幾種 1、通過包名、類名 2、通過intent的 action 3、通過Url 方案1、 Compon

h5頁面拉起手機內的APP

win 下載 安卓 var cnblogs logs initial release tle <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

app內嵌h5頁面問題總結

kit 內嵌 當前 播放 ren 發的 blog 設置 time 一、<audio> 1.ios上只能播放mp3文件格式的音頻 2.fis+smarty開發的靜態頁,將音頻文件寫死時,js設置當前播放時間(currentTime)失效,每次賦值都自動歸零。後來音

App內嵌H5頁面聯調接口

接口 isa android func all mac os x indexof cpu os x //分享接口 function ShareLp(query,pkid){ var shareUrl=""; var shareImg=""; var shareT

原生webview中使用沈浸狀態欄,H5頁面適配iphoneX頂部

screen log kit media ati col 頂部 否則 適配 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-

編寫第一個H5頁面

ntp int 小寫 itl body ado har put utf <!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第一個H5頁面</

h5做的app原生app的區別

個人 目前 sign 引用 enc 語言 缺陷 情況 支持 之所以說h5做的app和原生app的區別,是因為一位博友的問題: 隨著 h5 的普及,是不是不再需要開發 app ? 我的回答是要分業務需求,分場合而定。 比如現在的微信小程序這麽流行,甚至也取代了不少app,但是

H5頁面喚起指定app,有就喚起,沒有則跳轉下載頁

點選按鈕,當已經安裝了app則調起,否則跳轉到應用寶或者App store下載頁面(普通瀏覽器相容,微信有許可權限制,只能每次跳轉下載頁) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

AppH5頁面廣告分析

1-現像 最近越來越多的使用者向客服反映,在使用我們的App過程中,會莫名其妙的在底部出現廣告,甚至黃色資訊。這些資訊不但困擾了使用者,影響使用者的使用,最關鍵是使得使用者散失對我們公司的信任,覺得我們公司的開發技術不行(什麼???什麼?技術不行??出來,出來,我要和你大戰三百回合

企業如何設計出一個爆款H5頁面

從引爆朋友圈的H5小遊戲《圍住神經貓》,到顛覆傳統廣告的大眾點評H5專題頁《我們之間只有一個字》,現如今各種H5遊戲和專題頁紛紛嶄露頭角。“H5”,這個由HTML5簡化而來的詞彙,藉由微信這個移動社交平臺,正在走進更多人的視野。那麼,企業該如何利用H5頁面打造一個爆款,進行營銷推廣呢?

原生頁面H5頁面

“原生應用”佔統治地位   當我們為移動裝置開發應用程式時,程式設計師通常都會選擇開發“原生應用”,“原生應用”是一種使用者必須通過手機應用商店購買下載並安裝在手機儲存器內的應用程式。“原生應用”現已成為新增手機功能的首選業界標準。   因此,大多數的程式設計師都認為跟瀏覽器應用相比

js h5頁面調起App(IOS 和android)的實現方法

js h5頁面調起App(IOS 和android)的實現方法 第一次寫這個:我們的app是由原聲和h5組成的,當用戶使用瀏覽器開啟我們的頁面時我們會引導使用者使:開啟App 下載App 剛開始我是使用定時器來實現的,當用戶點選了開啟App經過一定時間之後沒有反應,則我們認為她調起App