許多做產品的同學經常會有這樣的疑問：計劃開發的移動端產品到底是用 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 和小程序都是實現產品的工具，選擇工具最擅長的能力，其他方面再想辦法來彌補即可。最後，再附上完整表格一份，看你是否已經明瞭二者的差異：
如果你還有其他疑問，歡迎留言與我交流。
閱讀更多 人人都是產品經理 的文章
