小程序由于剛推出來時開放的能力十分有限,所以在功能展示上會讓普通用戶感覺和H5一樣,并沒有什么特別之處,導致了部分人把兩者混為一談。實際上,小程序和H5是兩種不同的東西。
通過百度詞條可以知道,HTML英文全稱為Hyper Text Markup ,即超文本標記語言。而HTML5是超文本標記語言的第五次修訂版本。
簡單來說,小程序是一種應用,運行的環境是微信(App);H5是一種技術,依附的外殼是是瀏覽器。
根據微信官方的說明,微信小程序的運行環境有 3 個平臺,iOS 的 WebKit(蘋果開源的瀏覽器內核),Android 的 X5 (瀏覽器內核),開發時用的 nw.js(C++ 實現的 web 轉桌面應用)。
平臺 渲染 js 運行環境
iOS
Android X5 基于 Mobile Chrome 37 內核 X5 JSCore
開發工具 Chrome WebView nw.js
從「前端開發」的視角來看,微信小程序和H5也存在著多方面的不同。概括來說有以下四個方面的區別。
一、運行環境的不同
H5的運行環境是瀏覽器,包括webview,而微信小程序的運行環境并非完整的瀏覽器,因為小程序的開發過程中只用到一部分H5技術。
小程序的運行環境是微信開發團隊基于瀏覽器內核完全重構的一個內置解析器,針對性做了優化,配合自己定義的開發語言標準,提升了小程序的性能。
官方文檔表明腳本內無法使用瀏覽器中常用的window對象和對象(基于這一點,像zepto/jquery這種操作dom的庫就被完全拋棄了)。
不過微信給開發者提供了開發工具,內置了編程、調試、開發環境以及發布,開發者只需按照官方文檔進行開發,就能保證小程序在微信內穩定運行。
二、開發成本的不同
H5 的開發,涉及開發工具(vscode、Atom等)、前端框架(Angular、react等)、模塊管理工具(Webpack 、 等)、任務管理工具(Grunt、Gulp等),還有UI庫選擇、接口調用工具(ajax、Fetch Api等)、瀏覽器兼容性等等。
盡管這些工具可定制化非常高,大部分開發者也有自己的配置模板,但對于項目中各種外部庫的版本迭代、版本升級,這些成本加在一起那就是個不小數目了。
而開發一個微信小程序,由于微信團隊提供了開發者工具,并且規范了開發標準,則簡單得多。前端常見的HTML、CSS變成了微信自定義的WXML、WXSS,WXML,官方文檔中都有明確的使用介紹,開發者按照說明專注寫程序就可以了。
需要調用后端接口時,調用發起請求API;需要上傳下載時,調用上傳下載API;需要數據緩存時,調用本地存儲API;引入地圖、使用羅盤、調用支付、調用掃碼等等功能都可以直接使用;UI庫方面,框架帶有自家weui庫加成。
并且在使用這些API時,不用考慮瀏覽器兼容性,不用擔心出現BUG,顯而易見微信小程序的開發成本相對低很多。
三、獲取系統級權限的不同
微信小程序相對于H5能獲得更多的系統權限,比如網絡通信狀態、數據緩存能力等,這些系統級權限都可以和微信小程序無縫銜接。
而這一點恰巧是H5 被詬病的地方,這也是HL5的大多應用場景被定位在業務邏輯簡單、功能單一的原因。
四、運行流暢度的不同
在運行流暢度方面,無論對于用戶還是開發者,都可以直觀體驗出兩者的差異。這也是普通大眾最容易區分小程序與H5的一點。
打開H5,實際上是打開一個網頁,而網頁需要在瀏覽器中渲染。所以加載這一過程,會給人明顯的「卡頓」感覺,面對復雜的業務邏輯或者豐富的頁面交互時尤為明顯。
而微信小程序,它的代碼直接在微信上運行,省去了通過瀏覽器渲染的步驟,因此,在微信中使用小程序,才會比H5流暢很多。
除了首次打開需要幾秒的加載時間外,小程序各個頁面的切換、跳轉等體驗已經媲美原生App,有著同樣的柔絲般順滑的效果。
?
概括來說,小程序相對H5有著開發成本低、功能更豐富、使用體驗更佳的優點。其實大家最應該關注的一點是,小程序領域目前是一片藍海,對于個人就業、商家做生意以及技術團隊創業都有著不少的機會,大家應該多想想怎么分得這塊蛋糕。