寫在前面：
公司最近遇到了兩個項目，在選擇H5還是原生上面糾結(jié)一陣后，用原生的老版本無法兼容，用H5的功能及頁面過于粗糙，開發(fā)出來的效果無法滿足需求。
在這種情況下，產(chǎn)品該如何決策，某個功能用H5還是原生來實現(xiàn)呢？
本文通過對H5和原生異同點的梳理，希望能夠?qū)σ院螽a(chǎn)品決策提供幫助。分為以下三部分：
- 如何區(qū)分一個頁面是H5還是原生
- H5和原生可實現(xiàn)功能列舉
- 如何確定一個項目用H5和原生
5種方法區(qū)分頁面是H5還是原生
- 看斷網(wǎng)的情況
把手機的網(wǎng)絡(luò)斷掉，再點開頁面。
- 可以正常顯示頁面內(nèi)容或是有網(wǎng)絡(luò)診斷引導就是原生；
- 顯示404或錯誤頁面的是H5頁面。
- 看加載的方式
新打開一個頁面，看導航欄下面是否有一條加載線。
- 如果沒有，就是原生的。
- 如有，這個頁面就是H5頁面；比如微信里面打開我們的H5頁面常見的有個綠色的 加載線條。
- 看下拉刷新的情況
前提是APP有下拉刷新，此時下拉頁面：
- 如果沒有明顯頁面變化，或是有動態(tài)下拉刷新loading圖，是原生；
- 如果頁面閃了一下，或是顯示該網(wǎng)頁由XXX提供，是H5頁面。
注：有的APP并沒有下拉刷新，此時即使用H5，下拉也沒有任何反應。
- 看復制文章的提示
如果頁面有大段文字，長按頁面后：
- 如果出現(xiàn)文字選擇、粘貼功能的，是H5；
- 長按無反應，或是出現(xiàn)APP獨有的復制按鈕的，是原生。
注：有些原生APP自身也開發(fā)了復制粘貼功能，有的H5的css屏蔽了復制選擇功能等等。此種判斷依據(jù)誤差較大。
- 看布局邊界（限安卓）
可以在設(shè)置中打開【開發(fā)者選項】中的顯示布局邊界。
- 在頁面元素很多的情況下布局是一整塊的，是h5；
- 布局密密麻麻的是原生。
有什么是H5或是原生的獨有功能
隨著前端技術(shù)的發(fā)展，H5可以實現(xiàn)的功能及效果已經(jīng)越來越接近原生APP。
但仍然有些技術(shù)壁壘由于平臺性能等無法攻克，下表列出了H5和原生能實現(xiàn)的常見功能及推薦，在遇到面臨包括此種功能的需求時，可以直接據(jù)此判斷用何種技術(shù)來實現(xiàn)。
【H5及原生可實現(xiàn)功能列表】
| 功能名稱 | H5 | 原生 | 推薦使用 |
|---|---|---|---|
| 含有大量動畫 | √ | √ | H5，css3實現(xiàn)動效控件庫更豐富 |
| 含有富文本 | √ | × | H5，H5對于富文本展示比原生開發(fā)成本大大減少 |
| 需要調(diào)起相冊、文件、攝像頭、定位等功能 | × | √ | 原生，H5暫時無法調(diào)起硬件功能 |
| 需要離線使用 | × | √ | 原生，H5對于網(wǎng)絡(luò)依賴強，無法離線使用 |
| 需要手勢縮放、滑動等精細操作 | × | √ | 原生，H5實現(xiàn)精細操作時，對手機性能消耗巨大，且容易和瀏覽器手勢沖突 |
如何確定一個項目是否要用H5
| --- | 優(yōu)點 | 缺點 |
|---|---|---|
| H5 | - 可以統(tǒng)一更新無需APP發(fā)版，無版本兼容問題。 - 開發(fā)效率高，不需切圖，樣式豐富，社區(qū)活躍。 - 可以跨平臺使用，一個頁面，雙平臺多機型均可復用，兼容問題較少。 |
- 對于網(wǎng)絡(luò)依賴強，弱網(wǎng)或無網(wǎng)哭暈在廁所。 - 復雜或是精細操作時，對系統(tǒng)性能消耗大，體驗差。 |
| 原生 | - 可以實現(xiàn)調(diào)用硬件功能的需求，如上傳圖片或是定位服務。 - API穩(wěn)定，可離線操作+本地存儲。 - 用戶體驗比較好，且用戶留存和黏性相對較高。 |
- 更新需要發(fā)布新版本，且需要兼容老版本。 - 開發(fā)周期長：不同機型要單獨開發(fā)測試，且發(fā)布新版本ios需要審核上架。開發(fā)-測試-審核-上架-下載：周期長，不利于快速迭代。 |
總結(jié)上方H5和原生的優(yōu)缺點后，可以得出以下方便產(chǎn)品快速決策的結(jié)論：
如果項目核心需求中，包含富文本、動畫、大量格式，且無其他需求（如電商的商品圖文詳情、文章咨詢等）——使用H5，可以更好更快地實現(xiàn)功能。
如果項目核心需求中，需要調(diào)起本機硬件功能、離線操作（如電商評價頁面需要上傳圖片）?！仨毷褂迷?，H5無法實現(xiàn)。
如果項目需要較高的用戶體驗（如游戲或是模型操作），且項目時間較寬?！褂迷鲿承院腕w驗更好。
如果項目需要大量的前后臺數(shù)據(jù)交互，且需要保持穩(wěn)定（如電商購物車、訂單頁面）?！褂迷?，原生的API更加穩(wěn)定，對于弱網(wǎng)狀態(tài)的兼容也更好。
如果項目處在初期試錯階段，不確定是否要長期運營，或是暫時的活動頁面?！褂肏5，成本低，開發(fā)周期短；可以保證用戶更新及時性，且無新老版本兼容問題（原生APP一定要發(fā)版才能實現(xiàn)新功能，且舊版本用戶不升級就無法體驗）。
另：
在多篇文章中都提到過，H5和原生各有長短，單獨的html APP或是原生 APP均有所局限，所以現(xiàn)在常態(tài)的互聯(lián)網(wǎng)APP均采取Hybrid形式，即部分功能原生，部分功能H5。
最后附上一個小貼士：
Hybrid APP（H5內(nèi)嵌APP頁面），建議頭部使用原生的，名稱讀取H5的document title，常駐back按鈕。這樣在加載過程中，用戶體驗較好。且如果網(wǎng)速差，也可以快速返回，不浪費流量及時間。
