新增功能頁(yè)面，用H5還是原生？

新增的功能頁(yè)面，到底要用H5還是原生呢?

用原生的話，老版本無(wú)法兼容;用H5的話，功能及頁(yè)面過(guò)于粗糙，開(kāi)發(fā)出來(lái)的效果無(wú)法滿足需求。

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

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

如何區(qū)分一個(gè)頁(yè)面是H5還是原生

H5和原生可實(shí)現(xiàn)功能列舉

如何確定一個(gè)項(xiàng)目用H5和原生

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

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

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

可以正常顯示頁(yè)面內(nèi)容或是有網(wǎng)絡(luò)診斷引導(dǎo)就是原生;

顯示404或錯(cuò)誤頁(yè)面的是H5頁(yè)面。

2.看加載的方式

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

如果沒(méi)有，就是原生的。

如有，這個(gè)頁(yè)面就是H5頁(yè)面;比如微信里面打開(kāi)我們的H5頁(yè)面常見(jiàn)的有個(gè)綠色的 加載線條。

3.看下拉刷新的情況

前提是APP有下拉刷新，此時(shí)下拉頁(yè)面：

如果沒(méi)有明顯頁(yè)面變化，或是有動(dòng)態(tài)下拉刷新loading圖，是原生;

如果頁(yè)面閃了一下，或是顯示該網(wǎng)頁(yè)由XXX提供，是H5頁(yè)面。

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

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

如果頁(yè)面有大段文字，長(zhǎng)按頁(yè)面后：

如果出現(xiàn)文字選擇、粘貼功能的，是H5;

長(zhǎng)按無(wú)反應(yīng)，或是出現(xiàn)APP獨(dú)有的復(fù)制按鈕的，是原生。

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

5.看布局邊界(限安卓)

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

在頁(yè)面元素很多的情況下布局是一整塊的，是h5;

布局密密麻麻的是原生。

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

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

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

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

如何確定一個(gè)項(xiàng)目是否要用H5

如果項(xiàng)目核心需求中，包含富文本、動(dòng)畫、大量格式，且無(wú)其他需求(如電商的商品圖文詳情、文章咨詢等)——使用H5，可以更好更快地實(shí)現(xiàn)功能?？偨Y(jié)上方H5和原生的優(yōu)缺點(diǎn)后，可以得出以下方便產(chǎn)品快速?zèng)Q策的結(jié)論：

如果項(xiàng)目核心需求中，需要調(diào)起本機(jī)硬件功能、離線操作(如電商評(píng)價(jià)頁(yè)面需要上傳圖片)?！仨毷褂迷?，H5無(wú)法實(shí)現(xiàn)。

如果項(xiàng)目需要較高的用戶體驗(yàn)(如游戲或是模型操作)，且項(xiàng)目時(shí)間較寬裕 ——使用原生，流暢性和體驗(yàn)更好。

如果項(xiàng)目需要大量的前后臺(tái)數(shù)據(jù)交互，且需要保持穩(wěn)定(如電商購(gòu)物車、訂單頁(yè)面)?！褂迷腁PI更加穩(wěn)定，對(duì)于弱網(wǎng)狀態(tài)的兼容也更好。

如果項(xiàng)目處在初期試錯(cuò)階段，不確定是否要長(zhǎng)期運(yùn)營(yíng)，或是暫時(shí)的活動(dòng)頁(yè)面?！褂肏5，成本低，開(kāi)發(fā)周期短;可以保證用戶更新及時(shí)性，且無(wú)新老版本兼容問(wèn)題(原生APP一定要發(fā)版才能實(shí)現(xiàn)新功能，且舊版本用戶不升級(jí)就無(wú)法體驗(yàn))。

新聞名稱：新增功能頁(yè)面，用H5還是原生？
網(wǎng)頁(yè)網(wǎng)址：http://www.muchs.cn/news20/219020.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、用戶體驗(yàn)、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)