新增功能頁面，用H5還是原生？

新上的功能頁面，到底要用H5還是原生呢？

公司最近遇到了兩個項目，在選擇H5還是原生上面糾結了好一陣，用原生的話，老版本無法相容；用H5的話，

功能及頁面過於粗糙，開發出來的效果無法滿足需求。

在這種情況下，產品該如何決策，某個功能用H5還是原生來實現呢？

本文通過對H5和原生異同點的梳理，希望能夠對以後產品決策提供説明。分為以下三部分：

如何區分一個頁面是H5還是原生H5和原生可實現功能列舉如何確定一個項目用H5和原生5種方法區分頁面是H5還是原生

1.看斷網的情況

把手機的網路斷掉，再點開頁面。

可以正常顯示頁面內容或是有網路診斷引導就是原生；顯示404或錯誤頁面的是H5頁面。

2.看載入的方式

新打開一個頁面，看巡覽列下面是否有一條載入線。

如果沒有，就是原生的。如有，這個頁面就是H5頁面；比如微信裡面打開我們的H5頁面常見的有個綠色的載入線條。

3.看下拉刷新的情況

前提是APP有下拉刷新，此時下拉頁面：

如果沒有明顯頁面變化，或是有動態下拉刷新loading圖，是原生；如果頁面閃了一下，或是顯示該網頁由XXX提供，是H5頁面。

注：有的APP並沒有下拉刷新，此時即使用H5，下拉也沒有任何反應。

4.看複製文章的提示

如果頁面有大段文字，長按頁面後：

如果出現文字選擇、粘貼功能的，是H5；長按無反應，或是出現APP獨有的複製按鈕的，是原生。

注：有些原生APP自身也開發了複製粘貼功能，有的H5的css遮罩了複製選擇功能等等。此種判斷依據誤差較大。

5.看佈局邊界（限安卓）

可以在設置中打開【開發者選項】中的顯示佈局邊界。

在頁面元素很多的情況下佈局是一整塊的，是h5；佈局密密麻麻的是原生。

有什麼是H5或是原生的獨有功能

隨著前端技術的發展， H5可以實現的功能及效果已經越來越接近原生APP。

但仍然有些技術壁壘由於平臺性能等無法攻克，下表列出了H5和原生能實現的常見功能及推薦，在遇到面臨包括此種功能的需求時，可以直接據此判斷用何種技術來實現。

【H5及原生可實現功能列表】

如何確定一個專案是否要用H5

如果專案核心需求中，包含富文本、動畫、大量格式，且無其他需求（如電商的商品圖文詳情、文章諮詢等）——使用H5，可以更好更快地實現功能。總結上方H5和原生的優缺點後，

可以得出以下方便產品快速決策的結論：

如果專案核心需求中，需要調起本機硬體功能、離線操作（如電商評價頁面需要上傳圖片）。 ——必須使用原生， H5無法實現。如果專案需要較高的使用者體驗（如遊戲或是模型操作），且專案時間較寬裕 ——使用原生，流暢性和體驗更好。如果專案需要大量的前後臺資料交互，且需要保持穩定（如電商購物車、訂單頁面）。 ——使用原生，原生的API更加穩定，對於弱網狀態的相容也更好。如果專案處在初期試錯階段，不確定是否要長期運營，或是暫時的活動頁面。 ——使用H5，成本低，開發週期短；可以保證用戶更新及時性，且無新老版本相容問題（原生APP一定要發版才能實現新功能，且舊版本用戶不升級就無法體驗）。
另：

在多篇他人文章中都提到過，H5和原生各有長短，單獨的html APP或是原生 APP均有所局限，所以現在常態的互聯網APP均採取Hybrid形式，即部分功能原生，部分功能H5。

最後附上一個小貼士：

Hybrid APP（H5內嵌APP頁面），建議頭部使用原生的，名稱讀取H5的document title，常駐back按鈕。這樣在載入過程中，用戶體驗較好。且如果網速差，也可以快速返回，不浪費用戶的流量及時間。

參考資料：

http://www.jianshu.com/p/00ff5664e000（作者：小聖）

http://www.uisdc.com/web-hybrid-native-app（作者：cyRotel）

作者：徐家小翼，公眾號：poemmanager，PM圈萌新一隻，求帶飛求指導~~

本文由 @徐家小翼原創發佈于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基於CC0協議

另：