微信小程序開發和(hé)H5開發有什(shén)麽不同

現在微信小程序算(suàn)是火起來(lái)了(le)，在微信小程序出來(lái)之前，微信公衆号裏仍然是HTML5的(de)天下(xià)。深圳APP開發公司接到的(de)公衆号開發項目，都是用(yòng)HTML5來(lái)開發的(de)。但現在，已經有越來(lái)越多(duō)的(de)人(rén)，選擇開發小程序。那麽，除了(le)小程序火，還(hái)有什(shén)麽原因，讓大(dà)家選擇小程序呢(ne)？小程序和(hé)H5之間，有哪些區(qū)别？

 

 

下(xià)面，從前端技術的(de)角度出發，爲大(dà)家分(fēn)析下(xià)微信小程序和(hé)HTML5與之間的(de)主要區(qū)别。

 

一、運行環境的(de)不同。

傳統的(de)HTML5的(de)運行環境是浏覽器，包括webview，而微信小程序的(de)運行環境并非完整的(de)浏覽器。小程序的(de)開發過程中會用(yòng)到HTML5相關的(de)技術，小程序最後的(de)發布上線需要微信審核，微信在不更新自身軟件的(de)情況下(xià)可(kě)以将小程序更新到自身軟件内，這(zhè)就聯想到了(le)React Native框架,并且已經有開發者在微信小程序的(de)開發工具源碼中發現使用(yòng)了(le)React和(hé)NodeWebkit庫

所以可(kě)以認爲，小程序的(de)運行環境很有可(kě)能是微信開發團隊基于浏覽器内核完全重構的(de)一個(gè)内置解析器，針對(duì)小程序專門做(zuò)了(le)優化(huà)，配合自己定義的(de)開發語言标準，提升了(le)小程序的(de)性能。

不過由于微信給開發者提供了(le)開發工具，而開發工具中也(yě)内置了(le)編程、調試、開發環境、發布于一身，我們也(yě)不用(yòng)再探討(tǎo)它的(de)最終運行環境了(le)，隻要按照(zhào)官方文檔進行開發就可(kě)以了(le)。并且從微信團隊給開發者提供開發工具這(zhè)一舉動，讓我聯想到了(le)蘋果給開發者提供的(de)X-CODE開發工具，可(kě)以想象微信的(de)“野心”可(kě)見一斑

 

二、開發成本的(de)不同。

這(zhè)裏我提出了(le)一個(gè)問題，當我們面對(duì)一個(gè)HTML5 web開發需求時(shí)，我們需要考慮什(shén)麽呢(ne)？抛去開發工具（vscode、sublimtext、Atom等）不談，大(dà)到前端框架（Angular、react、vue、backbone等）、模塊管理(lǐ)工具（Webpack 、Browserify 等）、任務管理(lǐ)工具（Grunt、Gulp等），小到UI庫選擇、接口調用(yòng)工具（ajax、Fetch Api等）、浏覽器兼容性等都要我們一一考略，再不濟用(yòng)jqery插件寫H5，也(yě)要在開發過程中去尋找合适的(de)jquery插件來(lái)配合項目。盡管這(zhè)些工具可(kě)定制化(huà)非常高(gāo)，并且提高(gāo)了(le)開發者的(de)開發效率，但我相信項目開發的(de)配置工作已經消耗了(le)不少精力，盡管大(dà)部分(fēn)開發者都有自己的(de)配置模闆，但長(cháng)久以來(lái)對(duì)于項目中使用(yòng)的(de)各種外部庫的(de)版本叠代、版本升級所産生的(de)成本應該也(yě)不低。

而當我們面對(duì)一個(gè)微信小程序的(de)開發需求時(shí)，我們需要考慮什(shén)麽呢(ne)？微信團隊提供了(le)開發者工具，并且規範了(le)開發标準，前端常見的(de)HTML、CSS變成了(le)微信自定義的(de)WXML、WXSS，WXML中盡管全部是自定義标簽，但官方文檔中都有明(míng)确的(de)使用(yòng)介紹，相信上手應該是非常容易的(de)；WXSS、JSON和(hé)JS文件中的(de)寫法稍有限制，但整體相差不多(duō)。在統一了(le)這(zhè)些标準之後，作爲一個(gè)開發者，你會發現，自己隻要專注寫程序就可(kě)以了(le)：

當需要調用(yòng)後端接口時(shí)，調用(yòng)發起請求API

當需要上傳下(xià)載時(shí)，調用(yòng)上傳下(xià)載API

當需要數據緩存時(shí)，調用(yòng)本地存儲API

引入地圖、使用(yòng)羅盤、調用(yòng)支付、調用(yòng)掃碼等等功能都可(kě)以直接使用(yòng)

UI庫方面，框架自然帶有自家weui庫加成

并且在使用(yòng)這(zhè)些API時(shí)，你不用(yòng)再去顧慮浏覽器兼容性，不用(yòng)擔心生産環境中出現不可(kě)預料的(de)奇妙BUG，可(kě)見微信小程序的(de)開發成本确實相比以往的(de)web開發低一些。

 

三、獲取系統級權限的(de)不同。

微信小程序相對(duì)于HTML5 web應用(yòng)能獲得(de)更多(duō)的(de)系統權限，比如網絡通(tōng)信狀态、數據緩存能力等，這(zhè)些系統級權限都可(kě)以和(hé)微信小程序無縫銜接，也(yě)就是官方宣稱的(de)擁有Native App的(de)流暢性能，而這(zhè)一點恰巧是HTML5 web應用(yòng)經常被诟病的(de)地方，這(zhè)也(yě)是HTML5的(de)大(dà)多(duō)應用(yòng)場(chǎng)景被定位在業務邏輯簡單、功能單一的(de)原因。

 

四、應用(yòng)在生産環境的(de)運行流暢度。

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