H5頁面和微信小程序的區(qū)別是什么？

時間：2024-04-17 03:30:02 | 來源：建站知識

時間：2024-04-17 03:30:02 來源：建站知識

在引入微信小程序之前，大多數(shù)微信系統(tǒng)都使用H5頁面。但是，與標(biāo)準(zhǔn)H5頁面相比，小程序提供了更多功能。

運行環(huán)境不同 網(wǎng)頁開發(fā)渲染線程和腳本線程是互斥的，這也是為什么長時間的腳本運行可能會導(dǎo)致頁面失去響應(yīng)，而在小程序中，二者是分開的，分別運行在不同的線程中。網(wǎng)頁開發(fā)者可以使用到各種瀏覽器暴露出來的 DOM API，進(jìn)行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，并沒有一個完整瀏覽器對象，因而缺少相關(guān)的DOM API和BOM API。這一區(qū)別導(dǎo)致了前端開發(fā)非常熟悉的一些庫，例如 jQuery、 Zepto 等，在小程序中是無法運行的。同時 JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同，所以一些 NPM 的包在小程序中也是無法運行的。

網(wǎng)頁開發(fā)者需要面對的環(huán)境是各式各樣的瀏覽器，PC 端需要面對 IE、Chrome、QQ瀏覽器等，在移動端需要面對Safari、Chrome以及 iOS、Android 系統(tǒng)中的各式 WebView 。而小程序開發(fā)過程中僅需要面對的是兩大操作系統(tǒng) iOS 和 Android 的微信客戶端，以及用于輔助開發(fā)的小程序開發(fā)者工具，小程序中三大運行環(huán)境也是有所區(qū)別的

運行環(huán)境邏輯層渲染層iOSJavaScriptCoreWKWebView安卓X5 JSCoreX5瀏覽器小程序開發(fā)者工具NWJSChrome WebView

網(wǎng)頁開發(fā)者在開發(fā)網(wǎng)頁的時候，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可，上線并不需要審核，體積規(guī)模、運營規(guī)范、轉(zhuǎn)發(fā)到朋友圈等營銷功能也無限制。小程序的開發(fā)則有所不同，需要經(jīng)過申請小程序帳號、安裝小程序開發(fā)者工具、配置項目、提交審核，嚴(yán)格審核通過后才能上線，上線后運營中，如果違規(guī)還有可能會被封號下架。

開發(fā)成本不同 當(dāng)開發(fā)一個H5微網(wǎng)站時，除了域名服務(wù)器備案、服務(wù)器開發(fā)語言等，我們還需要考慮開發(fā)工具環(huán)境、前端框架、模塊管理工具、任務(wù)管理工具、團(tuán)隊協(xié)作代碼提交工具、組件UI庫、接口調(diào)用工具、各平臺、各品牌的瀏覽器兼容性等。即使使用jquery插件寫，也要在開發(fā)過程中去尋找合適的jquery插件來配合項目。盡管這些工具可定制化非常高，并且提高了開發(fā)者的開發(fā)效率，但我相信項目開發(fā)的配置工作已經(jīng)消耗了不少精力，盡管大部分開發(fā)者都有自己的配置模板，但長久以來對于項目中使用的各種外部庫的版本迭代、版本升級所產(chǎn)生的成本應(yīng)該也不低。

而當(dāng)我們面對一個微信小程序的開發(fā)需求時，我們需要考慮什么呢?微信團(tuán)隊提供了開發(fā)者工具，并且規(guī)范了開發(fā)標(biāo)準(zhǔn)，前端常見的HTML、CSS變成了微信自定義的WXML、WXSS，WXML中盡管全部是自定義標(biāo)簽，但官方文檔中都有明確的使用介紹，上手非常容易。甚至開發(fā)者可以使用云開發(fā)開發(fā)微信小程序，弱化后端和運維概念，從此無需搭建服務(wù)器，即可使用平臺提供的 API 進(jìn)行核心業(yè)務(wù)開發(fā)，即可實現(xiàn)快速上線和迭代，同時這一能力，同開發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。在統(tǒng)一了這些標(biāo)準(zhǔn)之后，作為一個開發(fā)者，你會發(fā)現(xiàn)，自己只要專注寫程序邏輯就可以了！

至于調(diào)用自家服務(wù)器、云開發(fā)接口、微信app中的任何原生能力，都有封裝好的API可供調(diào)用。UI庫方面，框架自然帶有自家weui庫。并且在使用這些API時，你不用再去顧慮瀏覽器兼容性，不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙BUG，可見微信小程序的開發(fā)成本確實相比以往的web開發(fā)低很多。

用戶體驗感不同 H5最大詬病在于頁面之間切換會有白屏卡頓現(xiàn)象，頻繁在多頁面之間來回切換等待時間較長，受網(wǎng)絡(luò)環(huán)境影響，加載圖片、音視頻耗費流量需要加載時間較多。

小程序雖然本質(zhì)上任然是網(wǎng)頁，但是由于微信小程序運行環(huán)境獨立，盡管同樣用html+css+js去開發(fā)，但配合微信的解析器最終渲染出來的是原生組件的調(diào)用效果，自然體驗上將會更進(jìn)一步，無白屏卡頓，瀏覽速度很快，帶來流暢的極致體驗效果。

策略定位不同 從營銷傳播角度看，H5可以轉(zhuǎn)發(fā)至朋友圈這個巨大的流量入口，形成一傳十、十傳百的網(wǎng)絡(luò)規(guī)模效應(yīng)，其次，H5網(wǎng)站內(nèi)容可以被百度搜索到，H5中的圖文內(nèi)容也可以選擇復(fù)制粘貼出來，而小程序并不符合營銷工具的定位，以上說的的功能都做不到，更多是做連接，將人與服務(wù)或設(shè)備連接，用完即走，無需關(guān)注公共號，全程無營銷信息推送的工具。