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

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

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

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

我們經常說的 H5 是一種不標準的叫法,可以理解為只是一種技術,大家說得最多的 H5 主要是指用在移動端的網頁,其實 PC 電腦版也一樣可以使用 H5 技術。而小程序,這里特指微信小程序,是在微信 APP 基礎上支持的一種應用形式,完全依賴于微信 APP 環境。

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

一、運行環境

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

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

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

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

二、系統權限

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

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

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

三、能力限制

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

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

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

四、用戶體驗

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

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

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

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

五、訪問入口

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

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

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

六、用戶觸達

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

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

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

七、開發成本

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

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

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

八、迭代周期

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

至于其他速度,取決于開發人員技能熟練程度,系統復雜度,對基礎能力的依賴等,就不好估算了。

九、外部限制

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

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

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

此外,小程序對文件大小也有限制,雖然現在已經支持分包加載,但是在文件大小方面,H5 本身是沒有什么限制的。只是實際開發的時候,要照顧用戶的體驗,不能讓頁面打開太慢。

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

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

 

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

本文由 @姬小光 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. h5優點是自由 缺點體驗差功能少,那種快速更改沒那么重視體驗的可以用h5

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

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

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

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

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

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

    來自貴州 回復
    1. 不可以吧,小程序分享朋友圈還在內測中

      來自安徽 回復
  8. 感謝分享!

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

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

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

    來自中國 回復
  11. 就私域流量來說,小程序應該比H5體驗更好

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

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

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

      來自廣東 回復
    2. 來自北京 回復
  14. 感謝啊,學習了

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

    來自山東 回復
  16. 感謝,學習了。

    來自湖南 回復
  17. 感謝分享~

    來自上海 回復
  18. 有用,感謝。

    來自北京 回復
  19. 學習了,感謝

    來自廣東 回復