開(kāi)發(fā)移動(dòng)端產(chǎn)品到底是用 H5 好還是用小程序好？

2019-08-30 來(lái)自：人人都是產(chǎn)品經(jīng)常作者：Judy 分享：

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

大體上講，H5和小程序并不具備什么可比性。只是很多移動(dòng)端的場(chǎng)景下，這兩種選擇都能實(shí)現產(chǎn)品的大部分功能，加之其各領(lǐng)風(fēng)騷好幾年，就更難抉擇了。
我們經(jīng)常說(shuō)的 H5 是一種不標準的叫法，可以理解為只是一種技術(shù)，大家說(shuō)得最多的 H5 主要是指用在移動(dòng)端的網(wǎng)頁(yè)，其實(shí) PC 電腦版也一樣可以使用 H5 技術(shù)。而小程序，這里特指微信小程序，是在微信 APP 基礎上支持的一種應用形式，完全依賴(lài)于微信 APP 環(huán)境。
以上，是大概念上的區分，下面，我們就來(lái)詳細對比一下其他方面。

一、運行環(huán)境
這里的 H5 既然是網(wǎng)頁(yè)，那么依賴(lài)的外殼主要是瀏覽器，因此只要有瀏覽器，就可以使用。比如手機內置的瀏覽器，APP 的 web-view 組件，以及小程序提供的 web-view 組件，都可以打開(kāi) H5 頁(yè)面。

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

前面說(shuō)了，小程序只能依賴(lài)微信客戶(hù)端，也就是說(shuō)只能在微信里打開(kāi)。那么，如果你的產(chǎn)品需要通過(guò)短信通知用戶(hù)帶上訪(fǎng)問(wèn)地址，就無(wú)法用小程序實(shí)現了。而 H5 頁(yè)面，則可以在短信正文中直接用手機內置瀏覽器打開(kāi)。

但是，微信本身是跨平臺的，因此無(wú)論是安卓上的微信，蘋(píng)果上的微信，都是可以使用小程序的。甚至 QQ 瀏覽器也支持了部分小程序的入駐。

	H5	小程序
運行環(huán)境	瀏覽器，Web-view	微信APP

二、系統權限
這里的系統權限，可以理解為隱私級別比較高的，如通訊錄，或能調用硬件的，比如藍牙功能等。從這個(gè)角度看，H5 本身可以說(shuō)幾乎是沒(méi)有什么系統權限的。雖然也有攝像頭之類(lèi)的接口，但是重度依賴(lài)瀏覽器能力，兼容性有限。

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

所以，如果你的產(chǎn)品重度依賴(lài)這些能力，那小程序一定是不二之選，因為 H5 很難做到這些，對于很多小程序提供的能力，H5 是根本沒(méi)有可能實(shí)現的。

	H5	小程序
系統權限	弱	強

三、能力限制
前面提到了系統權限層面的差異，其實(shí)也是一種能力限制。除此之外，還有一些能力是微信本身的策略限制的，比如 H5 在微信里可以直接分享朋友圈，而小程序目前就只能轉發(fā)好友或群。對于朋友圈，就只能生成帶小程序碼的圖片發(fā)到朋友圈。

而對于分享到好友或群，小程序又提供了卡片式的分享界面，看起來(lái)很高端，信息也多，并且能追蹤用戶(hù)行為。這一點(diǎn)，H5 又無(wú)法做到。

再比如支付能力，小程序只支持微信支付，而 H5 里可以選擇使用其他支付平臺提供的支付方式。

	H5	小程序
直接分享朋友圈	能	不能
掃碼識別	能	能
支付能力	多種	微信支付

四、用戶(hù)體驗
分享卡片看上去比普通的 H5 鏈接分享體驗要好；而朋友圈的 H5 分享形式，和圖片識別小程序碼的形式到底哪個(gè)好也不好說(shuō)。不過(guò)，如果你的產(chǎn)品被判定有違規行為，那么 H5 的鏈接是很容易匹配屏蔽的，可以直接導致分享 H5 頁(yè)面只能自己可見(jiàn)，別人看不到。

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

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

而 H5 本質(zhì)上還是網(wǎng)頁(yè)，跟之前在 PC 上瀏覽網(wǎng)頁(yè)沒(méi)區別，每次要請求各種圖片樣式資源，在瀏覽器內核里渲染，因此體驗會(huì )差一些。

	H5	小程序
流暢度	一般	好

五、訪(fǎng)問(wèn)入口
在訪(fǎng)問(wèn)入口這個(gè)點(diǎn)上，H5 的核心競爭力就是能在微信之外玩，不依賴(lài)微信本身。而小程序的優(yōu)勢，就是有 50+ 微信提供的場(chǎng)景入口，并且聊天界面頂部的“最近使用”和“我的小程序”這個(gè)入口，相對 H5 來(lái)說(shuō)是有絕對優(yōu)勢的。

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

至于微信內的搜索，是可以同時(shí)搜索 H5 和小程序的，可以根據 H5 的名字和內容、小程序的名字和介紹來(lái)搜索。這里 H5 有個(gè)天然優(yōu)勢就是，只要你的鏈接在各大搜索引擎提交過(guò)，那么使用其他的搜索引擎也能搜出這個(gè) H5，比如百度搜索。

	H5	小程序
入口數量	少	多
專(zhuān)屬入口	無(wú)	有

六、用戶(hù)觸達
H5 本身是沒(méi)有用戶(hù)觸達能力的，如果用戶(hù)關(guān)掉了頁(yè)面，頁(yè)面就再也沒(méi)有辦法主動(dòng)觸達該用戶(hù)了。因此，傳統的營(yíng)銷(xiāo)方式都是采用郵件營(yíng)銷(xiāo)或短信營(yíng)銷(xiāo)等來(lái)觸達用戶(hù)。

后來(lái)，我們有了微信服務(wù)號，就多了服務(wù)號模板消息的觸達方式。不管是哪種方式，都是想方設法把鏈接地址推送給用戶(hù)，用戶(hù)點(diǎn)擊時(shí)再通過(guò)手機內置瀏覽器或微信內置瀏覽器訪(fǎng)問(wèn)頁(yè)面。

而小程序天然支持模板消息，雖然有一周的推送時(shí)間限制，但是常規的業(yè)務(wù)已經(jīng)足夠了。只要用戶(hù)使用你的小程序，你就可以通過(guò)某種操作收集 formid，然后即可在一周之內的任意時(shí)間觸達用戶(hù)。

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

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

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

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

	H5	小程序
簡(jiǎn)易功能成本	低	低
系統功能成本	高	低

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

至于其他速度，取決于開(kāi)發(fā)人員技能熟練程度，系統復雜度，對基礎能力的依賴(lài)等，就不好估算了。

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

九、外部限制
由于小程序依賴(lài)微信平臺，因此微信平臺要對內容安全等事項負責，比如你想搞個(gè)有 UGC 的產(chǎn)品，用 H5 可能還可以趁著(zhù)監管寬松無(wú)證裸奔一陣，或者說(shuō)做大了再補證。

而小程序，就很可能完全不能過(guò)審，根本上不了線(xiàn)。比如試聽(tīng)類(lèi)，社交類(lèi)，都有對應的資質(zhì)，而這個(gè)資質(zhì)還可能很難獲得。

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

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

	H5	小程序
外部限制	較少	多

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

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

如果你還有其他疑問(wèn)，歡迎聯(lián)系與我交流。

上一篇為什么設計師總是做不出你要的效果？

下一篇物聯(lián)網(wǎng)在智慧園區的應用