微(wēi)信小(xiǎo)程序開(kāi∏®)發和(hé)H5開(kāi)發有(yǒu)什(shén)麽不↕∑(bù)同

來(lái)源：lexintech.com ∏↓ 發布時(shí)間(jiān)：2017-09-1¶≤↕9

現(xiàn)在微(wēi)信小(xiǎα♠±"o)程序算(suàn)是(shì)火(huǒ)起γ≠來(lái)了(le)，在微(wēi)信小(xiǎo)程序出來(lái)之前γ α∑，微(wēi)信公衆号裡(lǐ)仍然是(shì)HTML5的(de>♥₩)天下(xià)。深圳APP開(kāi)發公司接到•φ★π(dào)的(de)公衆号開(kāi)發項>∑目，都(dōu)是(shì)用(yòng)HTML5來(lái≠∏)開(kāi)發的(de)。但(dàn)現(xiàn)在，已經有(yǒ ¶>u)越來(lái)越多(duō)的(de)人(rén♠')，選擇開(kāi)發小(xiǎo)程序。那(nà)¥₹麽，除了(le)小(xiǎo)程序火(huǒ)，還(hái)有(yǒu)什(β≈÷αshén)麽原因，讓大(dà)家(jiā)選擇小(xiǎo) ≤©≥程序呢(ne)？小(xiǎo)程序和(hé)H5之'↕間(jiān)，有(yǒu)哪些(xiē)區(qū)别？

下(xià)面，從(cóng)前端技(jì)術☆•÷(shù)的(de)角度出發，為(wèi)大(dà)家(ji↑ ā)分(fēn)析下(xià)微(wēi)信小(xi✔∑∑₽ǎo)程序和(hé)HTML5與之間(jiā€"n)的(de)主要(yào)區(qū)别。

一(yī)、運行(xíng)環境的(de)不(bù)同。

傳統的(de)HTML5的(de)運行(xíng)環境是(shì)浏覽✔©→器(qì)，包括webview，而微(wēi)信小(xiǎo)程序的(®de)運行(xíng)環境并非完整的(de)±©λ<浏覽器(qì)。小(xiǎo)程序的(de)開(kāi)發過程中會(h&÷uì)用(yòng)到(dào)HTML5×∞相(xiàng)關的(de)技(jì)術(shù)，小(xiǎo♥φ>)程序最後的(de)發布上(shàng)線需要(yào)微(wēi)信審核，微Ω ₩(wēi)信在不(bù)更新自(zì)身(shēn£‌₹✔)軟件(jiàn)的(de)情況下(xià)可(©©≥kě)以将小(xiǎo)程序更新到(dào)自(zì)身(shēn)軟件(j÷↑iàn)內(nèi)，這(zhè)就(ji'"↓ù)聯想到(dào)了(le)React Nativ¥♦ ∑e框架,并且已經有(yǒu)開(kāi)發者在微(wēi)信小(§¶✘‍xiǎo)程序的(de)開(kāi)發工(gōng)具源碼中發現(xσ♥iàn)使用(yòng)了(le)React和(hé)NodeWe✔™ bkit庫

所以可(kě)以認為(wèi)，小(xiǎo)<α₩程序的(de)運行(xíng)環境很(hěn)有(yǒu)可♣←(kě)能(néng)是(shì)微(wēi)信開∏"∏×(kāi)發團隊基于浏覽器(qì)內(nèi)核完全重π 構的(de)一(yī)個(gè)內(nèi)置解析器♠ (qì)，針對(duì)小(xiǎo)程序專門(©↑mén)做(zuò)了(le)優化(huà)，配合自(zì)己定義✔ ☆的(de)開(kāi)發語言标準，提升了(le)小(xi≠♦♥≥ǎo)程序的(de)性能(néng)。

不(bù)過由于微(wēi)信給開(kāi•∞←÷)發者提供了(le)開(kāi)發工(gōn ≥‌₽g)具，而開(kāi)發工(gōng)具中☆‌¶也(yě)內(nèi)置了(le)編程、調試、開(kāi)發環境、發布‌✔≥于一(yī)身(shēn)，我們也(yě)不(bù)用(yò'✘¶€ng)再探討(tǎo)它的(de)最終運行(₩≤↑xíng)環境了(le)，隻要(yào)按™₹←照(zhào)官方文(wén)檔進行(xíng)開(kāi)發就(ji®₹ù)可(kě)以了(le)。并且從(cóng÷¶)微(wēi)信團隊給開(kāi)發者提₽ φ供開(kāi)發工(gōng)具這(zhè)一✔(yī)舉動，讓我聯想到(dào)了(le)蘋σ≥∏♣果給開(kāi)發者提供的(de)X-CODE開(kāi)發工('✘gōng)具，可(kě)以想象微(wēi)信的(de)“野心&rπ¥•dquo;可(kě)見(jiàn)一(yī)斑

二、開(kāi)發成本的(de)不(b ≠₩ù)同。

這(zhè)裡(lǐ)我提出了(le)一(yī)Ω↔★✘個(gè)問(wèn)題，當我們面對(duì)一(yī)個(gè≠ε)HTML5 web開(kāi)發需求時(shí)，我們需要(yào)考÷∑'慮什(shén)麽呢(ne)？抛去(qù)開(÷ kāi)發工(gōng)具（vscode、∞γsublimtext、Atom等）不(bù)談， €大(dà)到(dào)前端框架（Angular、r↑↕eact、vue、backbone等）、模塊管理(lǐ)工(gōng)‌∑→γ具（Webpack 、Browserify 等）、×↔₽任務管理(lǐ)工(gōng)具（Grunt、Gulp等），小(♥α$≠xiǎo)到(dào)UI庫選擇、接口調用(yòng)工(gōng)具（β ajax、Fetch Api等）、浏覽器(qì)兼容α¶性等都(dōu)要(yào)我們一(yī)一(yī)考略，再不(↔∑¥bù)濟用(yòng)jqery插件(j©>←¶iàn)寫H5，也(yě)要(yào)在×φγ開(kāi)發過程中去(qù)尋找合适的(de)jquery插件(jiàn)來∏§©(lái)配合項目。盡管這(zhè)些(xiē)工≥&(gōng)具可(kě)定制(zhì)化(huà)非常高(gāo)，并£♣∞且提高(gāo)了(le)開(kāi)發者的(de)開(Ω÷kāi)發效率，但(dàn)我相(xiàng"↕®→)信項目開(kāi)發的(de)配置工(gōng)作(zuò)♠£∞已經消耗了(le)不(bù)少(shǎo)精力，盡管₹±大(dà)部分(fēn)開(kāi)發者都(dōu)有(yǒu)自(zì)己的γ≤(de)配置模闆，但(dàn)長(cháng)久以來(lái)¥€對(duì)于項目中使用(yòng)的(de∞α≠)各種外(wài)部庫的(de)版本叠代、版¶♥§本升級所産生(shēng)的(de)成本應該也(yě)不(bù)低(dī)。

而當我們面對(duì)一(yī)個(gè)微(wē↕‌i)信小(xiǎo)程序的(de)開(kāi)發需求時(s∑∞€πhí)，我們需要(yào)考慮什(shén)麽呢(ne)？微(wēi)信團隊提δ♣☆♦供了(le)開(kāi)發者工(gōng)具，并且↔‍₩λ規範了(le)開(kāi)發标準，前端常見(jiàn)的§∞★©(de)HTML、CSS變成了(le)微(wēi)信自( ∑¶zì)定義的(de)WXML、WXSS，₹‌WXML中盡管全部是(shì)自(zì)定義标簽，但(dàn)官方文(wén)∞&檔中都(dōu)有(yǒu)明(míng)确的(de)使用(≥™yòng)介紹，相(xiàng)信上(shàng)手應該是(shì)非常容δ∞™ 易的(de)；WXSS、JSON和(hé)JS文(wén)✔∏件(jiàn)中的(de)寫法稍有(yǒu)限制(zhì)，γ§♠但(dàn)整體(tǐ)相(xiàng)差®✔←不(bù)多(duō)。在統一(yī)了(le)這(zhα✔∞è)些(xiē)标準之後，作(zuò)為(wèi)一(yī)個(g×®è)開(kāi)發者，你(nǐ)會(huì)發現(δ☆π‍xiàn)，自(zì)己隻要(yào)專注寫程序就(jiù)可(kě)∞‌以了(le)：

當需要(yào)調用(yòng)後端接口時(shí)，調用(yòn‌÷g)發起請(qǐng)求API

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

當需要(yào)數(shù)據緩存時(shí)，調用☆α(yòng)本地(dì)存儲API

引入地(dì)圖、使用(yòng)羅盤、♦±✘&調用(yòng)支付、調用(yòng)掃碼等等功αε↕能(néng)都(dōu)可(kě)以直接使用(yòng)

UI庫方面，框架自(zì)然帶有(yǒu)自(zì)家(jiā)weui✘★庫加成

并且在使用(yòng)這(zhè)些(xiē)API時(shí• $)，你(nǐ)不(bù)用(yòng)再去(qù)顧慮浏覽器(qì)兼≤§容性，不(bù)用(yòng)擔心生(shēng)産環境中出現(≠→♦®xiàn)不(bù)可(kě)預料的(de)奇妙BUG，可(kě)見(jiàn‍∞Ω)微(wēi)信小(xiǎo)程序的(de)開(kāi>↕δλ)發成本确實相(xiàng)比以往的(de♣™←)web開(kāi)發低(dī)一(yī)些(xiē)。

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

微(wēi)信小(xiǎo)程序相(xi©Ω∞àng)對(duì)于HTML5 web應用(y£✔òng)能(néng)獲得(de)更多(duō)的(de)系統 §αφ權限，比如(rú)網絡通(tōng)信狀态、數(shù)據緩存能(néng)→¥♣力等，這(zhè)些(xiē)系統級權限都(dōu™∞)可(kě)以和(hé)微(wēi)信小(xiǎo)程序無↕≥∞縫銜接，也(yě)就(jiù)是(shì"★)官方宣稱的(de)擁有(yǒu)Nativ∏Ωπβe App的(de)流暢性能(néng)，而這(zh♦Ω÷è)一(yī)點恰巧是(shì)HTML5 web應用(yòng)經常↑₹ε被诟病的(de)地(dì)方，這(zhè♥‌←)也(yě)是(shì)HTML5的(de)大(₹≥¥<dà)多(duō)應用(yòng)場(chǎng)景被定位在σφ∞φ業(yè)務邏輯簡單、功能(néng)單一(yī)的λ (de)原因。

四、應用(yòng)在生(shēng)産環境的(de)運行(xíng)流₩‌暢度。

這(zhè)條無論對(duì)于用(yòng)戶還(hái)是(♣★‌δshì)開(kāi)發者來(lái)說(shuō)，都(dō>ε$u)是(shì)最直觀的(de)感受。長(cháng)久以來(lái)，當H €÷αTML5應用(yòng)面對(duì)複雜(zá)的(de)業(yè)¶<★♠務邏輯或者豐富的(de)頁面交互時(shí)，它←≤&的(de)體(tǐ)驗總是(shì)不(bù)盡人(rén)意，需要(yà‍ o)不(bù)斷的(de)對(duì)項目優化(huà)來(lái)提升用(βδ₹™yòng)戶體(tǐ)驗。但(dàn)是(shì)‌₽由于微(wēi)信小(xiǎo)程序運行(xíng)環境獨立♦™，盡管同樣用(yòng)html+css+js去(qù)開(kāi)發，β但(dàn)配合微(wēi)信的(de)解析器(∏™qì)最終渲染出來(lái)的(de)是(shì)φγ‌↕原生(shēng)組件(jiàn)的(de)效果≥♣≠，自(zì)然體(tǐ)驗上(shàng)$≠∑'将會(huì)更進一(yī)步。

上(shàng)一(yī)篇：微(wēi)信公衆号文(wén)章(zhāng)如(rú)何能(néng)₩✔ 獲得(de)更多(duō)轉發、點贊？
下(xià)一(yī)篇：微(wēi)信公衆号文(wén)章(zhāng)在什(sh↑✔én)麽時(shí)間(jiān)推送比較ε₽♣好(hǎo)