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

公司最近遇到了兩個項目，在選擇H5還是原生上面糾結(jié)了好一陣，用原生的話，老版本無法兼容；用H5的話，功能及頁面過于粗糙，開發(fā)出來的效果無法滿足需求。

在這種情況下，產(chǎn)品該如何決策，某個功能用H5還是原生來實(shí)現(xiàn)呢？

本文通過對H5和原生異同點(diǎn)的梳理，希望能夠?qū)σ院螽a(chǎn)品決策提供幫助。分為以下三部分：

• 如何區(qū)分一個頁面是H5還是原生
• H5和原生可實(shí)現(xiàn)功能列舉
• 如何確定一個項目用H5和原生

5種方法區(qū)分頁面是H5還是原生

1.看斷網(wǎng)的情況

把手機(jī)的網(wǎng)絡(luò)斷掉，再點(diǎn)開頁面。

• 可以正常顯示頁面內(nèi)容或是有網(wǎng)絡(luò)診斷引導(dǎo)就是原生；
• 顯示404或錯誤頁面的是H5頁面。

2.看加載的方式

新打開一個頁面，看導(dǎo)航欄下面是否有一條加載線。

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

3.看下拉刷新的情況

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

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

注：有的APP并沒有下拉刷新，此時即使用H5，下拉也沒有任何反應(yīng)。

4.看復(fù)制文章的提示

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

• 如果出現(xiàn)文字選擇、粘貼功能的，是H5；
• 長按無反應(yīng)，或是出現(xiàn)APP獨(dú)有的復(fù)制按鈕的，是原生。

注：有些原生APP自身也開發(fā)了復(fù)制粘貼功能，有的H5的css屏蔽了復(fù)制選擇功能等等。此種判斷依據(jù)誤差較大。

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

可以在設(shè)置中打開【開發(fā)者選項】中的顯示布局邊界。

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

有什么是H5或是原生的獨(dú)有功能

隨著前端技術(shù)的發(fā)展，H5可以實(shí)現(xiàn)的功能及效果已經(jīng)越來越接近原生APP。

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

【H5及原生可實(shí)現(xiàn)功能列表】

如何確定一個項目是否要用H5

總結(jié)上方H5和原生的優(yōu)缺點(diǎn)后，可以得出以下方便產(chǎn)品快速決策的結(jié)論：

1. 如果項目核心需求中，包含富文本、動畫、大量格式，且無其他需求（如電商的商品圖文詳情、文章咨詢等）——使用H5，可以更好更快地實(shí)現(xiàn)功能。
2. 如果項目核心需求中，需要調(diào)起本機(jī)硬件功能、離線操作（如電商評價頁面需要上傳圖片）。——必須使用原生，H5無法實(shí)現(xiàn)。（隨著H5技術(shù)發(fā)展，已經(jīng)可以逐漸實(shí)現(xiàn)調(diào)取相冊、相機(jī)功能，其他功能相信也會陸續(xù)實(shí)現(xiàn)。但短期內(nèi)，原生實(shí)現(xiàn)調(diào)起底層硬件的成本和體驗都要大幅度占優(yōu)。）
3. 如果項目需要較高的用戶體驗（如游戲或是模型操作），且項目時間較寬裕?——使用原生，流暢性和體驗更好。
4. 如果項目需要大量的前后臺數(shù)據(jù)交互，且需要保持穩(wěn)定（如電商購物車、訂單頁面）。——使用原生，原生的API更加穩(wěn)定，對于弱網(wǎng)狀態(tài)的兼容也更好。
5. 如果項目處在初期試錯階段，不確定是否要長期運(yùn)營，或是暫時的活動頁面。——使用H5，成本低，開發(fā)周期短；可以保證用戶更新及時性，且無新老版本兼容問題（原生APP一定要發(fā)版才能實(shí)現(xiàn)新功能，且舊版本用戶不升級就無法體驗）。
   

   另：

在多篇他人文章中都提到過，H5和原生各有長短，單獨(dú)的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)速差，也可以快速返回，不浪費(fèi)用戶的流量及時間。

參考資料：

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

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

作者：徐家小翼，公眾號：poemmanager，PM圈萌新一只，求帶飛求指導(dǎo)~~

本文由 @徐家小翼 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議