微信小程序與HTML5的區(qū)別

零度網(wǎng)絡(luò)從前端開發(fā)的視角，為大家分析下微信小程序和HTML5與之間的主要區(qū)別
　　條是運行環(huán)境的不同

　　傳統(tǒng)的HTML5的運行環(huán)境是瀏覽器，包括webview，而微信小程序的運行環(huán)境并非完整的瀏覽器，大家注意，零度網(wǎng)絡(luò)這里寫的是“非完整的瀏覽器”，有以下幾個原因

　　小程序的開發(fā)過程中會用到HTML5相關(guān)的技術(shù)(并非全部)

　　小程序后的發(fā)布上線需要微信審核，微信在不更新自身軟件的情況下可以將小程序更新到自身軟件內(nèi)，這就聯(lián)想到了ReactNative框架，并且已經(jīng)有開發(fā)者在微信小程序的開發(fā)工具源碼中發(fā)現(xiàn)使用了React和NodeWebkit庫

　　官方文檔中著重強(qiáng)調(diào)了腳本內(nèi)是無法使用瀏覽器中常用的window對象和document對象（基于這一點，像zepto/jquery這種操作dom的庫就被完全拋棄了）

　　所以零度網(wǎng)絡(luò)認(rèn)為，小程序的運行環(huán)境很有可能是微信開發(fā)團(tuán)隊基于瀏覽器內(nèi)核完全重構(gòu)的一個內(nèi)置解析器，針對小程序?qū)ｉT做了優(yōu)化，配合自己定義的開發(fā)語言標(biāo)準(zhǔn)，提升了小程序的性能。

　　不過由于微信給開發(fā)者提供了開發(fā)工具，而開發(fā)工具中也內(nèi)置了編程、調(diào)試、開發(fā)環(huán)境、發(fā)布于一身，我們也不用再探討它的終運行環(huán)境了，只要按照官方文檔進(jìn)行開發(fā)就可以了。并且從微信團(tuán)隊給開發(fā)者提供開發(fā)工具這一舉動，讓人聯(lián)想到了蘋果給開發(fā)者提供的X-CODE開發(fā)工具，可以想象微信的“野心”可見一斑。

　　第二條是開發(fā)成本的不同

　　這里零度網(wǎng)絡(luò)提出了一個問題，當(dāng)我們面對一個HTML5 web開發(fā)需求時，我們需要考慮什么呢？拋去開發(fā)工具（vscode、sublimtext、Atom等）不談，大到前端框架（Angular、react、vue、backbone等）、模塊管理工具（Webpack、Browserify等）、任務(wù)管理工具（Grunt、Gulp等），小到UI庫選擇、接口調(diào)用工具（ajax、FetchApi等）、瀏覽器兼容性等都要我們一一考略，再不濟(jì)用jqery插件寫H5，也要在開發(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)簽，但官方文檔中都有明確的使用介紹，相信上手應(yīng)該是非常容易的；WXSS、JSON和JS文件中的寫法稍有限制，但整體相差不多。在統(tǒng)一了這些標(biāo)準(zhǔn)之后，作為一個開發(fā)者，你會發(fā)現(xiàn)，自己只要專注寫程序就可以了：

　　當(dāng)需要調(diào)用后端接口時，調(diào)用發(fā)起請求API
　　當(dāng)需要上傳下載時，調(diào)用上傳下載API
　　當(dāng)需要數(shù)據(jù)緩存時，調(diào)用本地存儲API
　　引入地圖、使用羅盤、調(diào)用支付、調(diào)用掃碼等等功能都可以直接使用
　　UI庫方面，框架自然帶有自家weui庫加成

　　并且在使用這些API時，你不用再去顧慮瀏覽器兼容性，不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙BUG，可見微信小程序的開發(fā)成本確實相比以往的web開發(fā)低很多。

　　第三條是獲取系統(tǒng)級權(quán)限的不同

　　微信小程序相對于HTML5web應(yīng)用能獲得更多的系統(tǒng)權(quán)限，比如網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力等，這些系統(tǒng)級權(quán)限都可以和微信小程序無縫銜接，也就是官方宣稱的擁有Native App的流暢性能，而這一點恰巧是HTML5 web應(yīng)用經(jīng)常被詬病的地方，這也是HTML5的大多應(yīng)用場景被定位在業(yè)務(wù)邏輯簡單、功能單一的原因。

　　第四條便是應(yīng)用在生產(chǎn)環(huán)境的運行流暢度

　　這條無論對于用戶還是開發(fā)者來說，都是直觀的感受。長久以來，當(dāng)HTML5應(yīng)用面對復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁面交互時，它的體驗總是不盡人意，需要不斷的對項目優(yōu)化來提升用戶體驗。但是由于微信小程序運行環(huán)境獨立，盡管同樣用html+css+js去開發(fā)，但配合微信的解析器終渲染出來的是原生組件的效果，自然體驗上將會更進(jìn)一步。

網(wǎng)頁設(shè)計

• 2020-11-11微信小程序開發(fā)需要注意哪些細(xì)節(jié)？
• 2020-11-11微信小程序上線？小程序到底是什么鬼？
• 2020-11-11微信小程序有哪些新的可能性？
• 2020-11-09教育培訓(xùn)行業(yè)怎樣開發(fā)微信小程序
• 2020-11-09微信小程序開發(fā)用什么語言？
• 2020-11-11微信小程序指向的“新零售模式”是什么樣
• 2020-11-11廣州佛山順德網(wǎng)站建設(shè)和微信小程序開發(fā)制作需要多少錢
• 2020-11-11微信小程序升級后：豐富內(nèi)容展示組件
• 2020-11-11微信小程序開發(fā)入門之框架結(jié)構(gòu)
• 2020-11-09微信小程序打不開的情況下需要怎么做
• 2020-11-11微信小程序數(shù)據(jù)助手上線：隨時查詢后臺數(shù)據(jù)的小“神器”
• 2020-11-09微信小程序能力再升級 轉(zhuǎn)發(fā)卡片可以換張“臉”了