科普|一張表格告訴你,到底 H5 和小程序哪個好

23 評論 57616 瀏覽 473 收藏 13 分鐘

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

大體上講,H5和小程序并不具備什么可比性。只是很多移動端的場景下,這兩種選擇都能實現(xiàn)產(chǎn)品的大部分功能,加之其各領(lǐng)風(fēng)騷好幾年,就更難抉擇了。

我們經(jīng)常說的 H5 是一種不標(biāo)準(zhǔn)的叫法,可以理解為只是一種技術(shù),大家說得最多的 H5 主要是指用在移動端的網(wǎng)頁,其實 PC 電腦版也一樣可以使用 H5 技術(shù)。而小程序,這里特指微信小程序,是在微信 APP 基礎(chǔ)上支持的一種應(yīng)用形式,完全依賴于微信 APP 環(huán)境。

以上,是大概念上的區(qū)分,下面,我們就來詳細(xì)對比一下其他方面。

一、運行環(huán)境

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

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

前面說了,小程序只能依賴微信客戶端,也就是說只能在微信里打開。那么,如果你的產(chǎn)品需要通過短信通知用戶帶上訪問地址,就無法用小程序?qū)崿F(xiàn)了。而 H5 頁面,則可以在短信正文中直接用手機內(nèi)置瀏覽器打開。

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

二、系統(tǒng)權(quán)限

這里的系統(tǒng)權(quán)限,可以理解為隱私級別比較高的,如通訊錄,或能調(diào)用硬件的,比如藍(lán)牙功能等。從這個角度看,H5 本身可以說幾乎是沒有什么系統(tǒng)權(quán)限的。雖然也有攝像頭之類的接口,但是重度依賴瀏覽器能力,兼容性有限。

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

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

三、能力限制

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

而對于分享到好友或群,小程序又提供了卡片式的分享界面,看起來很高端,信息也多,并且能追蹤用戶行為。這一點,H5 又無法做到。

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

四、用戶體驗

分享卡片看上去比普通的 H5 鏈接分享體驗要好;而朋友圈的 H5 分享形式,和圖片識別小程序碼的形式到底哪個好也不好說。不過,如果你的產(chǎn)品被判定有違規(guī)行為,那么 H5 的鏈接是很容易匹配屏蔽的,可以直接導(dǎo)致分享 H5 頁面只能自己可見,別人看不到。

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

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

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

五、訪問入口

在訪問入口這個點上,H5 的核心競爭力就是能在微信之外玩,不依賴微信本身。而小程序的優(yōu)勢,就是有 50+ 微信提供的場景入口,并且聊天界面頂部的“最近使用”和“我的小程序”這個入口,相對 H5 來說是有絕對優(yōu)勢的。

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

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

六、用戶觸達(dá)

H5 本身是沒有用戶觸達(dá)能力的,如果用戶關(guān)掉了頁面,頁面就再也沒有辦法主動觸達(dá)該用戶了。因此,傳統(tǒng)的營銷方式都是采用郵件營銷或短信營銷等來觸達(dá)用戶。

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

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

七、開發(fā)成本

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

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

總體上來講,我覺得還是可以認(rèn)為小程序的開發(fā)成本更低一些。

八、迭代周期

開發(fā)成本低,未必迭代周期就短。對于 H5 我們可以隨時發(fā)布上線,不用受任何牽制。而小程序的特點,就是每次提交版本都要經(jīng)過微信方面的審核,且審核時間的長短很隨機,著急上線的項目就很無奈了。

至于其他速度,取決于開發(fā)人員技能熟練程度,系統(tǒng)復(fù)雜度,對基礎(chǔ)能力的依賴等,就不好估算了。

九、外部限制

由于小程序依賴微信平臺,因此微信平臺要對內(nèi)容安全等事項負(fù)責(zé),比如你想搞個有 UGC 的產(chǎn)品,用 H5 可能還可以趁著監(jiān)管寬松無證裸奔一陣,或者說做大了再補證。

而小程序,就很可能完全不能過審,根本上不了線。比如試聽類,社交類,都有對應(yīng)的資質(zhì),而這個資質(zhì)還可能很難獲得。

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

此外,小程序?qū)ξ募笮∫灿邢拗?,雖然現(xiàn)在已經(jīng)支持分包加載,但是在文件大小方面,H5 本身是沒有什么限制的。只是實際開發(fā)的時候,要照顧用戶的體驗,不能讓頁面打開太慢。

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

如果你還有其他疑問,歡迎留言與我交流。

 

作者:姬小光,微信公眾號“姬小光(ID:hi-laser)”

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. h5優(yōu)點是自由 缺點體驗差功能少,那種快速更改沒那么重視體驗的可以用h5

    來自廣東 回復(fù)
  2. 小程序是支持短信打開的呀

    來自江蘇 回復(fù)
  3. 補充下,Android微信小程序目前是支持分享到朋友圈的。https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html

    來自北京 回復(fù)
  4. 補充下:目前短信鏈接可以直接打開微信小程序

    來自上海 回復(fù)
  5. 1. 性能上不能直接絕對的說弱還是強。從測試數(shù)據(jù)看,因為小程序加載問題,點訪率與小程序的絕對值會底5個點。
    2. 當(dāng)業(yè)務(wù)范圍不僅是微信體系的時候,使用H5相對小程序,有較低的開發(fā)成本。

    來自北京 回復(fù)
  6. 感謝分享,也感覺下面那位官方提示同學(xué)。哈哈

    來自四川 回復(fù)
  7. 部分內(nèi)容可更新下,目前小程序可直接分享朋友圈了

    來自貴州 回復(fù)
    1. 不可以吧,小程序分享朋友圈還在內(nèi)測中

      來自安徽 回復(fù)
  8. 感謝分享!

    來自廣東 回復(fù)
  9. 寫的非常好,但我面臨的大多數(shù)問題都是小程序和APP怎么選,希望能有類似文章

    來自四川 回復(fù)
    1. 有完整的推廣渠道,推廣強,又要性能和多方位的支付能力,以及用戶行為采集能力,如果應(yīng)用還包括了很多文件上傳之類,就要選APP,小程序,H5對這些功能要求都限制很大,小程序依賴的是微信的公有流量,app是私有流量,H5就是涂個方便,小程序的用戶行為收集,全看微信接口,所以很多數(shù)據(jù)不能獲取,自己做埋點是不行的

      來自福建 回復(fù)
  10. 感覺這篇文章可以更新一下了

    來自中國 回復(fù)
  11. 就私域流量來說,小程序應(yīng)該比H5體驗更好

    來自安徽 回復(fù)
  12. 小程序的開發(fā)工具實在是low 不像h5配套成熟

    來自江蘇 回復(fù)
  13. QAQ但是我們的前端開發(fā)評估,小程序開發(fā)要比H5開發(fā)費事,為啥呀,因為自己的H5開發(fā)以及規(guī)范化流程化了,而小程序要寫原生嘛?

    來自廣東 回復(fù)
    1. 當(dāng)前的小程序已經(jīng)適配了webview支持h5嵌套,但這個顯示效果肯定沒有原生的好

      來自廣東 回復(fù)
    2. 來自北京 回復(fù)
  14. 感謝啊,學(xué)習(xí)了

    來自重慶 回復(fù)
  15. 正好這幾天,著手選擇 H5 還是小程序,感謝樓主分享

    來自山東 回復(fù)
  16. 感謝,學(xué)習(xí)了。

    來自湖南 回復(fù)
  17. 感謝分享~

    來自上海 回復(fù)
  18. 有用,感謝。

    來自北京 回復(fù)
  19. 學(xué)習(xí)了,感謝

    來自廣東 回復(fù)