開(kāi)發(fā)移動端産品到底是用 H5 好(hǎo)還(hái)是用小程序好(hǎo)？

2019-08-30 來自：人人都(dōu)是産品經(jīng)常作者：Judy 分享：

許多做産品的同學(xué)經(jīng)常會(huì)有這(zhè)樣(yàng)的疑問：計劃開(kāi)發(fā)的移動端産品到底是用 H5 好(hǎo)還(hái)是用小程序好(hǎo)？甚至很多開(kāi)發(fā)同學(xué)也搞不清楚這(zhè)兩(liǎng)者在具體使用中的優劣。那麼(me)相信讀完此篇，便可讓你對(duì)二者之優劣利弊了然于胸，再也不必糾結。

大體上講，H5和小程序并不具備什麼(me)可比性。隻是很多移動端的場景下，這(zhè)兩(liǎng)種(zhǒng)選擇都(dōu)能(néng)實現産品的大部分功能(néng)，加之其各領風騷好(hǎo)幾年，就更難抉擇了。
我們經(jīng)常說的 H5 是一種(zhǒng)不标準的叫(jiào)法，可以理解爲隻是一種(zhǒng)技術，大家說得最多的 H5 主要是指用在移動端的網頁，其實 PC 電腦版也一樣(yàng)可以使用 H5 技術。而小程序，這(zhè)裡(lǐ)特指微信小程序，是在微信 APP 基礎上支持的一種(zhǒng)應用形式，完全依賴于微信 APP 環境。
以上，是大概念上的區分，下面(miàn)，我們就來詳細對(duì)比一下其他方面(miàn)。

一、運行環境
這(zhè)裡(lǐ)的 H5 既然是網頁，那麼(me)依賴的外殼主要是浏覽器，因此隻要有浏覽器，就可以使用。比如手機内置的浏覽器，APP 的 web-view 組件，以及小程序提供的 web-view 組件，都(dōu)可以打開(kāi) H5 頁面(miàn)。

注意，小程序的 web-view 可以打開(kāi) H5，但并不是小程序“跳轉”到了 H5 頁面(miàn)，這(zhè)個 H5 還(hái)是小程序的外殼内，仍然有很多限制。

前面(miàn)說了，小程序隻能(néng)依賴微信客戶端，也就是說隻能(néng)在微信裡(lǐ)打開(kāi)。那麼(me)，如果你的産品需要通過(guò)短信通知用戶帶上訪問地址，就無法用小程序實現了。而 H5 頁面(miàn)，則可以在短信正文中直接用手機内置浏覽器打開(kāi)。

但是，微信本身是跨平台的，因此無論是安卓上的微信，蘋果上的微信，都(dōu)是可以使用小程序的。甚至 QQ 浏覽器也支持了部分小程序的入駐。

	H5	小程序
運行環境	浏覽器，Web-view	微信APP

二、系統權限
這(zhè)裡(lǐ)的系統權限，可以理解爲隐私級别比較高的，如通訊錄，或能(néng)調用硬件的，比如藍牙功能(néng)等。從這(zhè)個角度看，H5 本身可以說幾乎是沒(méi)有什麼(me)系統權限的。雖然也有攝像頭之類的接口，但是重度依賴浏覽器能(néng)力，兼容性有限。

而小程序，由于依賴微信客戶端本身，所以微信小程序團隊將(jiāng)客戶端的很多能(néng)力開(kāi)放給了小程序環境，當然，前提是你給微信也授權了相關的能(néng)力，比如允許訪問麥克風，允許訪問相冊等。

所以，如果你的産品重度依賴這(zhè)些能(néng)力，那小程序一定是不二之選，因爲 H5 很難做到這(zhè)些，對(duì)于很多小程序提供的能(néng)力，H5 是根本沒(méi)有可能(néng)實現的。

	H5	小程序
系統權限	弱	強

三、能(néng)力限制
前面(miàn)提到了系統權限層面(miàn)的差異，其實也是一種(zhǒng)能(néng)力限制。除此之外，還(hái)有一些能(néng)力是微信本身的策略限制的，比如 H5 在微信裡(lǐ)可以直接分享朋友圈，而小程序目前就隻能(néng)轉發(fā)好(hǎo)友或群。對(duì)于朋友圈，就隻能(néng)生成(chéng)帶小程序碼的圖片發(fā)到朋友圈。

而對(duì)于分享到好(hǎo)友或群，小程序又提供了卡片式的分享界面(miàn)，看起(qǐ)來很高端，信息也多，并且能(néng)追蹤用戶行爲。這(zhè)一點，H5 又無法做到。

再比如支付能(néng)力，小程序隻支持微信支付，而 H5 裡(lǐ)可以選擇使用其他支付平台提供的支付方式。

	H5	小程序
直接分享朋友圈	能(néng)	不能(néng)
掃碼識别	能(néng)	能(néng)
支付能(néng)力	多種(zhǒng)	微信支付

四、用戶體驗
分享卡片看上去比普通的 H5 鏈接分享體驗要好(hǎo)；而朋友圈的 H5 分享形式，和圖片識别小程序碼的形式到底哪個好(hǎo)也不好(hǎo)說。不過(guò)，如果你的産品被(bèi)判定有違規行爲，那麼(me) H5 的鏈接是很容易匹配屏蔽的，可以直接導緻分享 H5 頁面(miàn)隻能(néng)自己可見，别人看不到。

但是，小程序的分享圖雖然不太可能(néng)封禁，但小程序是微信的呀，那還(hái)不是分分鍾就關掉。所以在抗風險方面(miàn)，二者各有千秋。如果是 H5，那就多準備幾個域名；如果是小程序，就直接多上線幾個小程序，保證封禁時損失降到最低。

除了形式上的體驗差異，性能(néng)上也是有差異的。小程序基于微信客戶端實現，對(duì)解析進(jìn)行了優化，并且一旦首次打開(kāi)小程序，可以直接緩存很多資源。因此，在使用小程序時可以明顯感覺很流暢，接近原生 APP 的體驗。

而 H5 本質上還(hái)是網頁，跟之前在 PC 上浏覽網頁沒(méi)區别，每次要請求各種(zhǒng)圖片樣(yàng)式資源，在浏覽器内核裡(lǐ)渲染，因此體驗會(huì)差一些。

	H5	小程序
流暢度	一般	好(hǎo)

五、訪問入口
在訪問入口這(zhè)個點上，H5 的核心競争力就是能(néng)在微信之外玩，不依賴微信本身。而小程序的優勢，就是有 50+ 微信提供的場景入口，并且聊天界面(miàn)頂部的“最近使用”和“我的小程序”這(zhè)個入口，相對(duì) H5 來說是有絕對(duì)優勢的。

用戶關閉之後(hòu)，H5 頁面(miàn)如果想繼續訪問，可能(néng)會(huì)通過(guò)收藏入口，或者轉發(fā)給“文件傳輸助手”等聊天界面(miàn)保存，還(hái)可以縮小到圖标稍後(hòu)閱讀等等。本質上還(hái)是跟 PC 時代的浏覽器收藏夾差不多，需要有個地方把 H5 的鏈接地址保存下來，方便下次訪問。如果沒(méi)有保存，下次就很難找到了。

至于微信内的搜索，是可以同時搜索 H5 和小程序的，可以根據 H5 的名字和内容、小程序的名字和介紹來搜索。這(zhè)裡(lǐ) H5 有個天然優勢就是，隻要你的鏈接在各大搜索引擎提交過(guò)，那麼(me)使用其他的搜索引擎也能(néng)搜出這(zhè)個 H5，比如百度搜索。

	H5	小程序
入口數量	少	多
專屬入口	無	有

六、用戶觸達
H5 本身是沒(méi)有用戶觸達能(néng)力的，如果用戶關掉了頁面(miàn)，頁面(miàn)就再也沒(méi)有辦法主動觸達該用戶了。因此，傳統的營銷方式都(dōu)是采用郵件營銷或短信營銷等來觸達用戶。

後(hòu)來，我們有了微信服務号，就多了服務号模闆消息的觸達方式。不管是哪種(zhǒng)方式，都(dōu)是想方設法把鏈接地址推送給用戶，用戶點擊時再通過(guò)手機内置浏覽器或微信内置浏覽器訪問頁面(miàn)。

而小程序天然支持模闆消息，雖然有一周的推送時間限制，但是常規的業務已經(jīng)足夠了。隻要用戶使用你的小程序，你就可以通過(guò)某種(zhǒng)操作收集 formid，然後(hòu)即可在一周之内的任意時間觸達用戶。

	H5	小程序
主要觸達渠道(dào)	短信	微信
短信觸達	文字鏈接	文字引導微信搜索

七、開(kāi)發(fā)成(chéng)本
對(duì)于簡單功能(néng)，H5 和小程序的開(kāi)發(fā)成(chéng)本是差不多的，開(kāi)發(fā)模式和語言風格也類似。而對(duì)于前面(miàn)說到的系統能(néng)力，可能(néng)就隻有小程序才能(néng)實現，H5 根本做不了。此外，小程序自成(chéng)體系，因此也有一些現成(chéng)的組件可以使用，如果剛好(hǎo)覆蓋了你的産品功能(néng)就能(néng)提升效率。

雖然 H5 也有很多框架組件可以用，但由于過(guò)于龐雜，有選擇成(chéng)本，且技術棧和 UI 五花八門，可能(néng)還(hái)有融合和修改的成(chéng)本。而小程序組件的 UI 大部分已經(jīng)确定，隻有很少的部分可以修改，所以一旦認定使用小程序，這(zhè)部分成(chéng)本會(huì)低很多。

總體上來講，我覺得還(hái)是可以認爲小程序的開(kāi)發(fā)成(chéng)本更低一些。

	H5	小程序
簡易功能(néng)成(chéng)本	低	低
系統功能(néng)成(chéng)本	高	低

八、叠代周期
開(kāi)發(fā)成(chéng)本低，未必叠代周期就短。對(duì)于 H5 我們可以随時發(fā)布上線，不用受任何牽制。而小程序的特點，就是每次提交版本都(dōu)要經(jīng)過(guò)微信方面(miàn)的審核，且審核時間的長(cháng)短很随機，著(zhe)急上線的項目就很無奈了。

至于其他速度，取決于開(kāi)發(fā)人員技能(néng)熟練程度，系統複雜度，對(duì)基礎能(néng)力的依賴等，就不好(hǎo)估算了。

	H5	小程序
叠代周期	短	較長(cháng)

九、外部限制
由于小程序依賴微信平台，因此微信平台要對(duì)内容安全等事(shì)項負責，比如你想搞個有 UGC 的産品，用 H5 可能(néng)還(hái)可以趁著(zhe)監管寬松無證裸奔一陣，或者說做大了再補證。

而小程序，就很可能(néng)完全不能(néng)過(guò)審，根本上不了線。比如試聽類，社交類，都(dōu)有對(duì)應的資質，而這(zhè)個資質還(hái)可能(néng)很難獲得。

類似的，H5 頁面(miàn)可以不用搞 HTTPS，有個網站就能(néng)玩，甚至用工具做個小活動也都(dōu)可以玩。但是小程序，從後(hòu)端開(kāi)始就有限制，要求域名備案+HTTPS，一定程度上也是一點成(chéng)本。

此外，小程序對(duì)文件大小也有限制，雖然現在已經(jīng)支持分包加載，但是在文件大小方面(miàn)，H5 本身是沒(méi)有什麼(me)限制的。隻是實際開(kāi)發(fā)的時候，要照顧用戶的體驗，不能(néng)讓頁面(miàn)打開(kāi)太慢。

	H5	小程序
外部限制	較少	多

綜上所述，H5 和小程序在不同的場景下各有千秋，具體使用哪一種(zhǒng)要看你看重哪些能(néng)力。H5 和小程序都(dōu)是實現産品的工具，選擇工具最擅長(cháng)的能(néng)力，其他方面(miàn)再想辦法來彌補即可。最後(hòu)，再附上完整表格一份，看你是否已經(jīng)明了二者的差異：

	H5	小程序
運行環境	浏覽器、Web-view	微信
系統權限	弱	強
直接分享朋友圈	能(néng)	不能(néng)
掃碼識别	能(néng)	能(néng)
支付能(néng)力	多種(zhǒng)	微信
流暢度	一般	好(hǎo)
入口數量	少	多
專屬入口	無	有
主動觸達渠道(dào)	短信	微信
短信觸達	文字鏈接	文字引導到微信
簡易功能(néng)成(chéng)本	低	低
系統功能(néng)成(chéng)本	高	低
叠代周期	短	較長(cháng)
外部限制	較少	多

如果你還(hái)有其他疑問，歡迎聯系與我交流。

上一篇爲什麼(me)設計師總是做不出你要的效果？

下一篇物聯網在智慧園區的應用