微信小程序與H5的四大區(qū)別

微信小程序推出后，雖然微信團(tuán)隊(duì)為普及小程序做了很多工作，但很多人仍然不了解它，很多人誤解將其與H5等同起來(lái)。由于小程序剛推出時(shí)的開(kāi)放能力非常有限，普通用戶會(huì)覺(jué)得它在功能展示上與H5一樣，沒(méi)有什么特別之處，導(dǎo)致一些人將兩者混淆。那么微信小程序和H5有什么區(qū)別呢？其實(shí)小程序和H5是兩個(gè)不同的東西。 HTML的英文全稱(chēng)是Hyper Text Markup Language，即超文本標(biāo)記語(yǔ)言。 HTML5是超文本標(biāo)記語(yǔ)言的第五個(gè)修訂版本。簡(jiǎn)單來(lái)說(shuō)，小程序就是一個(gè)應(yīng)用程序，運(yùn)行環(huán)境是微信（App）； H5是一種技術(shù)，附加的外殼是瀏覽器。如果對(duì)比PC端和移動(dòng)端，電腦上的軟件就相當(dāng)于手機(jī)上的App，需要下載；而通過(guò)瀏覽器打開(kāi)的H5就相當(dāng)于小程序，不需要下載。

從“前端開(kāi)發(fā)”的角度來(lái)看，微信小程序和H5有很多區(qū)別。概括起來(lái)，有以下四個(gè)方面的區(qū)別。 1、開(kāi)發(fā)成本的差異。 H5開(kāi)發(fā)涉及開(kāi)發(fā)工具（vscode、Atom等）、前端框架（Angular、React等）、模塊管理工具（Webpack、Browserify等）、任務(wù)管理工具（Grunt、Gulp等） ，還有UI庫(kù)選擇、接口調(diào)用工具（ajax、Fetch Api等）、瀏覽器兼容性等。雖然這些工具的可定制性很高，而且大多數(shù)開(kāi)發(fā)者也有自己的配置模板，但版本迭代和版本的成本項(xiàng)目中各種外部庫(kù)的升級(jí)加起來(lái)是一筆不小的數(shù)目。開(kāi)發(fā)微信小程序就簡(jiǎn)單多了，因?yàn)槲⑿艌F(tuán)隊(duì)提供了開(kāi)發(fā)者工具，并規(guī)范了開(kāi)發(fā)標(biāo)準(zhǔn)。前端常見(jiàn)的HTML、CSS變成了微信定制的WXML、WXSS、WXML。官方文檔中有明確的使用介紹。開(kāi)發(fā)人員只需按照說(shuō)明專(zhuān)注于編寫(xiě)程序即可。當(dāng)需要調(diào)用后端接口時(shí)，調(diào)用請(qǐng)求API；當(dāng)需要上傳、下載時(shí)，調(diào)用上傳、下載API；當(dāng)需要緩存數(shù)據(jù)時(shí)，調(diào)用本地存儲(chǔ)API；您可以引入地圖、使用指南針、通話支付、通話掃描二維碼等功能直接使用；在UI庫(kù)方面，該框架有自己的weui庫(kù)紅利。并且在使用這些API時(shí)，無(wú)需考慮瀏覽器兼容性，也無(wú)需擔(dān)心bug。可見(jiàn)微信小程序的開(kāi)發(fā)成本相對(duì)較低。 2、運(yùn)行環(huán)境的差異H5的運(yùn)行環(huán)境是瀏覽器，包括webview，而微信小程序的運(yùn)行環(huán)境并不是完整的瀏覽器，因?yàn)樾〕绦虻拈_(kāi)發(fā)過(guò)程中只使用了部分H5技術(shù)。小程序的運(yùn)行環(huán)境是微信開(kāi)發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的內(nèi)置解析器。經(jīng)過(guò)專(zhuān)門(mén)優(yōu)化，匹配自己定義的開(kāi)發(fā)語(yǔ)言標(biāo)準(zhǔn)，提高小程序的性能。官方文檔表明，瀏覽器中常用的window對(duì)象和document對(duì)象不能在腳本中使用（基于此，像zepto/jquery這樣操作DOM的庫(kù)已經(jīng)被徹底放棄）。但微信為開(kāi)發(fā)者提供了開(kāi)發(fā)工具，內(nèi)置了編程、調(diào)試、開(kāi)發(fā)環(huán)境和發(fā)布。開(kāi)發(fā)者只需按照官方文檔進(jìn)行開(kāi)發(fā)，即可保證小程序在微信中穩(wěn)定運(yùn)行。 3、運(yùn)行流暢度的差異在運(yùn)行流暢度方面，無(wú)論是用戶還是開(kāi)發(fā)者都可以直觀地感受到兩者的區(qū)別。這也是普通大眾很容易區(qū)分小程序和H5的點(diǎn)。打開(kāi)H5其實(shí)就是打開(kāi)一個(gè)網(wǎng)頁(yè)，而網(wǎng)頁(yè)需要在瀏覽器中渲染。因此，加載過(guò)程會(huì)給人一種明顯的“卡頓”感覺(jué)，在面對(duì)復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁(yè)面交互時(shí)尤其明顯。至于微信小程序，它的代碼直接運(yùn)行在微信上，省去了通過(guò)瀏覽器渲染的步驟。因此，在微信中使用小程序比H5流暢得多。除了首次打開(kāi)時(shí)幾秒的加載時(shí)間外，小程序各個(gè)頁(yè)面的切換和跳轉(zhuǎn)體驗(yàn)與原生App相當(dāng)，同樣絲滑流暢的效果。 4、獲取系統(tǒng)級(jí)權(quán)限的差異。與H5相比，微信小程序可以獲得更多的系統(tǒng)權(quán)限，比如網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力等，這些系統(tǒng)級(jí)權(quán)限可以與微信小程序無(wú)縫對(duì)接。這恰好是H5被詬病的地方。這也是HL5大部分應(yīng)用場(chǎng)景定位業(yè)務(wù)邏輯簡(jiǎn)單、功能單一的原因。綜上所述，小程序比H5具有開(kāi)發(fā)成本更低、功能更豐富、用戶體驗(yàn)更好的優(yōu)勢(shì)。

其實(shí)大家應(yīng)該關(guān)注的是，小程序領(lǐng)域目前是一片藍(lán)海，個(gè)人就業(yè)、商家、技術(shù)團(tuán)隊(duì)創(chuàng)業(yè)的機(jī)會(huì)很多。大家應(yīng)該多想想如何在這塊蛋糕上分一杯羹。