一、APP內嵌H5和原生的區別
1、原生的頁面運行速度快,比較流暢。
H5頁面相對原生的運行性能低,特別是一些動畫效果有明顯卡頓。
2、H5頁面的很多交互都沒有原生的好,比如彈層、輸入時候的頁面滑動 等。H5的效果相對比較low,沒有原生的好看,也沒有原生默認的動畫等效果。
3、原生APP修改頁面要重新發布,等待審核(現在iOS的審核速度已經提高到1天到2天)。
H5頁面的修改 可以隨時上線,不用等待審核。
4、H5跨平台,iOS和android需要各自開發。相對原生,H5開發成本低。
5、原生APP能很好的使用設備底層功能,如攝像頭、方向傳感器、重力傳感器等。H5有所限制。
比如android里的H5對攝像頭和方向傳感器就需要再多做一些處理。再比如你不想用系統默認的手機相冊樣式,就要用原生來開發了。
6、H5過度依賴於網絡,網絡不好的時候卡到不行,並且剛打開看到的都是一個空白頁面。
默認的H5頁面每次打開都會重新請求頁面(可以做緩存,不過基本很少有做的)。
H5比原生更費流量,H5除了加載html還要加載js、css這些資源文件,相比原生網絡加載速度慢。
二、APP原生和H5頁面如何分辨
1、android手機可以修改設置: 設置—》開發者選項—》顯示布局邊界(Show layout bounds) 。
這樣就能看到控件的布局了,如果包含圖片、文字等信息的一整塊區域只有一個邊框,應該就是H5實現的。
iOS在真機上沒有這個選項。一般開發人員可以 用mac上的Reveal軟件 來查看APP的布局,或者用網絡抓包來分析是否為H5頁面。
2、新打開頁面,如果頁面是個空頁面,基本就是H5頁面。原生的頁面一般都會有一些控件提前放在頁面中。
如果空頁面 上拉還有大塊黑色的背景,就是H5頁面,不過現在很多開發人員已經做了優化,不會顯示黑色的大色斑。
3、關閉網絡后,如果是整個的空白頁,這個基本就是H5頁面。如何頁面還有控件基本就是原生的。
4、下拉刷新的時候H5會有一個明顯的刷新現象,比如閃現、導航欄標題消失等。
原生的下拉刷新沒有明顯現象,很平滑。
5、如果開發人員沒有禁用掉WebView的長按手勢,會彈出一個系統默認的快捷菜單:拷貝、查詢、添加、分享。這個頁面就是H5頁面。
6、如果打開一個頁面頂部有個進度條,就是H5頁面。當然很多H5頁面也沒有加進度條。
7、頁面的底部導航 在上拉的時候 如果跟着一起滾動,就是H5頁面。
8、H5彈框、頁面跳轉等和原生的效果都不一樣,可以仔細看下。
9、H5頁面點擊 輸入框,彈出的鍵盤上面一般都有“完成”按鈕,原生的沒有。
三、APP原生和H5什么時候使用
1、核心需求 要用原生,比如淘寶里的產品詳情頁、訂單頁、支付頁等。
非核心需求 可以考慮用H5,遇到功能調整,可以快速發布。比如淘寶首頁的特色好貨、熱門市場等欄目 需要經常變動,用H5來做比較靈活。
2、階段性的營銷活動頁面,特別是功能、布局等經常需要修改的需求,可以用H5來做。比如節日的有獎活動頁面,經常需要調整,用H5做會更靈活。
四、現在常用的方案
1、有四種方式來做APP:Web App(純Web頁面)、Hybrid App(web和原生混合開發)、 Native App(原生APP)、Weex和React Native(用類似js、html來寫原生效果的頁面)。
2、現在沒有全部用H5來做APP的,交互體驗太差。
3、Hybrid App 前幾年火過,其努力去打造類似於Native App 的體驗,但仍受限於技術,網速,等等很多因素。並不是很完美。
4、現在很多大公司在嘗試用Weex和React Native或者DeviceOne 來實現一些經常改動的頁面或者活動營銷頁面,可以隨時發布,交互效果還和原生的一樣。其中Weex站在了React Native這個巨人的肩膀上,借鑒並做了更好的嘗試,我個人更建議用Weex。