大家好胧弛，我是技術(shù)部做前端工作的Ryan，關(guān)于微信小程序的概念和功能以及它的前景楚殿，前邊Tim已經(jīng)介紹的非常詳細(xì)撮慨，而我將以前端的視角為大家介紹一下微信小程序。也就是PPT中看到的：
微信小程序與H5的區(qū)別
微信小程序框架的特性
首先我們簡單介紹一下已經(jīng)風(fēng)靡很久的H5
HTML5的傳統(tǒng)定義：是在HTML4標(biāo)準(zhǔn)的基礎(chǔ)上擴(kuò)展了無數(shù)的酷炫功能的新標(biāo)準(zhǔn)，即HTML5砌溺∮吧妫可以看到，HTML4是97年發(fā)布的规伐，HTML5直到2014年才制定完成蟹倾，所以這個(gè)歷時(shí)這么久的標(biāo)準(zhǔn)推出后火爆這么久也是可以理解的。
經(jīng)過了這么久H5的洗禮猖闪，我們眼中的H5大多數(shù)時(shí)候是指代這些東西：網(wǎng)頁小游戲鲜棠，幻燈片（如易企秀），邀請(qǐng)函等酷炫網(wǎng)頁培慌，且能在瀏覽器豁陆、webview中無縫轉(zhuǎn)換。相信PPT上的這些圖片都曾經(jīng)在你的微信中或開發(fā)需求中亮相過不止一次
接下來便是我們今天的主角---微信小程序
這里我列了一張表用來對(duì)比HTML5與微信小程序之間的主要區(qū)別
第一條是運(yùn)行環(huán)境的不同检柬。
傳統(tǒng)的HTML5的運(yùn)行環(huán)境是瀏覽器献联，包括webview，而微信小程序的運(yùn)行環(huán)境并非完整的瀏覽器何址，大家注意里逆，我這里寫的是“非完整的瀏覽器”，有以下幾個(gè)原因
小程序的開發(fā)過程中會(huì)用到HTML5相關(guān)的技術(shù)(并非全部)
小程序最后的發(fā)布上線需要微信審核用爪，微信在不更新自身軟件的情況下可以將小程序更新到自身軟件內(nèi)秀菱，這就聯(lián)想到了React Native框架,并且已經(jīng)有開發(fā)者在微信小程序的開發(fā)工具源碼中發(fā)現(xiàn)使用了React和NodeWebkit庫
官方文檔中著重強(qiáng)調(diào)了腳本內(nèi)是無法使用瀏覽器中常用的window對(duì)象和document對(duì)象（基于這一點(diǎn)，像zepto/jquery這種操作dom的庫就被完全拋棄了）
所以我個(gè)人認(rèn)為臼氨，小程序的運(yùn)行環(huán)境很有可能是微信開發(fā)團(tuán)隊(duì)基于瀏覽器內(nèi)核完全重構(gòu)的一個(gè)內(nèi)置解析器雕沉，針對(duì)小程序?qū)ｉT做了優(yōu)化，配合自己定義的開發(fā)語言標(biāo)準(zhǔn)颇玷，提升了小程序的性能笨农。
不過由于微信給開發(fā)者提供了開發(fā)工具，而開發(fā)工具中也內(nèi)置了編程帖渠、調(diào)試谒亦、開發(fā)環(huán)境、發(fā)布于一身空郊，我們也不用再探討它的最終運(yùn)行環(huán)境了份招，只要按照官方文檔進(jìn)行開發(fā)就可以了。并且從微信團(tuán)隊(duì)給開發(fā)者提供開發(fā)工具這一舉動(dòng)狞甚，讓我聯(lián)想到了蘋果給開發(fā)者提供的X-CODE開發(fā)工具锁摔，可以想象微信的“野心”可見一斑
第二條是開發(fā)成本的不同。
這里我提出了一個(gè)問題哼审，當(dāng)我們面對(duì)一個(gè)HTML5 web開發(fā)需求時(shí)谐腰，我們需要考慮什么呢孕豹？拋去開發(fā)工具（vscode、sublimtext怔蚌、Atom等）不談巩步，大到前端框架（Angular、react桦踊、vue椅野、backbone等）、模塊管理工具（Webpack 籍胯、Browserify 等）竟闪、任務(wù)管理工具（Grunt、Gulp等）杖狼，小到UI庫選擇炼蛤、接口調(diào)用工具（ajax、Fetch Api等）蝶涩、瀏覽器兼容性等都要我們一一考略理朋，再不濟(jì)用jqery插件寫H5，也要在開發(fā)過程中去尋找合適的jquery插件來配合項(xiàng)目绿聘。盡管這些工具可定制化非常高嗽上，并且提高了開發(fā)者的開發(fā)效率，但我相信項(xiàng)目開發(fā)的配置工作已經(jīng)消耗了不少精力熄攘，盡管大部分開發(fā)者都有自己的配置模板兽愤，但長久以來對(duì)于項(xiàng)目中使用的各種外部庫的版本迭代、版本升級(jí)所產(chǎn)生的成本應(yīng)該也不低挪圾。
而當(dāng)我們面對(duì)一個(gè)微信小程序的開發(fā)需求時(shí)浅萧，我們需要考慮什么呢？微信團(tuán)隊(duì)提供了開發(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)之后冲甘，作為一個(gè)開發(fā)者绩卤，你會(huì)發(fā)現(xiàn)途样，自己只要專注寫程序就可以了：
當(dāng)需要調(diào)用后端接口時(shí)，調(diào)用發(fā)起請(qǐng)求API
當(dāng)需要上傳下載時(shí)濒憋，調(diào)用上傳下載API
當(dāng)需要數(shù)據(jù)緩存時(shí)何暇，調(diào)用本地存儲(chǔ)API
引入地圖、使用羅盤凛驮、調(diào)用支付裆站、調(diào)用掃碼等等功能都可以直接使用
UI庫方面，框架自然帶有自家weui庫加成
并且在使用這些API時(shí)黔夭，你不用再去顧慮瀏覽器兼容性宏胯，不用擔(dān)心生產(chǎn)環(huán)境中出現(xiàn)不可預(yù)料的奇妙BUG，可見微信小程序的開發(fā)成本確實(shí)相比以往的web開發(fā)低很多本姥。
第三條是獲取系統(tǒng)級(jí)權(quán)限的不同肩袍。
微信小程序相對(duì)于HTML5 web應(yīng)用能獲得更多的系統(tǒng)權(quán)限，比如網(wǎng)絡(luò)通信狀態(tài)婚惫、數(shù)據(jù)緩存能力等氛赐，這些系統(tǒng)級(jí)權(quán)限都可以和微信小程序無縫銜接，也就是官方宣稱的擁有Native App的流暢性能先舷，而這一點(diǎn)恰巧是HTML5 web應(yīng)用經(jīng)常被詬病的地方艰管，這也是HTML5的大多應(yīng)用場景被定位在業(yè)務(wù)邏輯簡單、功能單一的原因密浑。
第四條便是應(yīng)用在生產(chǎn)環(huán)境的運(yùn)行流暢度蛙婴。
這條無論對(duì)于用戶還是開發(fā)者來說，都是最直觀的感受尔破。長久以來街图，當(dāng)HTML5應(yīng)用面對(duì)復(fù)雜的業(yè)務(wù)邏輯或者豐富的頁面交互時(shí)，它的體驗(yàn)總是不盡人意懒构，需要不斷的對(duì)項(xiàng)目優(yōu)化來提升用戶體驗(yàn)餐济。但是由于微信小程序運(yùn)行環(huán)境獨(dú)立，盡管同樣用html+css+js去開發(fā)胆剧，但配合微信的解析器最終渲染出來的是原生組件的效果絮姆，自然體驗(yàn)上將會(huì)更進(jìn)一步。
最后我們看下微信小程序的特性
這里我總結(jié)了小程序框架的四個(gè)特性
第一個(gè)特性是數(shù)據(jù)驅(qū)動(dòng)秩霍。
現(xiàn)在流行的前端框架全部都是數(shù)據(jù)驅(qū)動(dòng)篙悯，幾乎已經(jīng)摒棄了操作DOM的方式，因?yàn)榇蠹叶及l(fā)現(xiàn)瀏覽器中操作DOM是損耗性能的大頭铃绒，也是前端項(xiàng)目性能提升的瓶頸鸽照，因此通過修改數(shù)據(jù)去重新渲染頁面來避免操作DOM，是前端工程化的趨勢颠悬，那么微信小程序框架采取同樣的模式矮燎，也無可厚非
第二個(gè)特性是開發(fā)標(biāo)準(zhǔn)化定血。
大部分前端工程師，都有自己得心應(yīng)手的整套工具诞外，大到項(xiàng)目框架技術(shù)選型澜沟，小到css用less還是postcss進(jìn)行預(yù)編譯，都會(huì)選擇自己比較滿意的第三方庫峡谊，但是在團(tuán)隊(duì)協(xié)作開發(fā)項(xiàng)目時(shí)茫虽，這些個(gè)人特色可能就影響到項(xiàng)目的開發(fā)、維護(hù)等靖苇。微信小程序?qū)㈤_發(fā)語言席噩、開發(fā)環(huán)境、開發(fā)工具標(biāo)準(zhǔn)化后贤壁，不但提升了開發(fā)效率悼枢，還提高了項(xiàng)目的可維護(hù)性，降低了開發(fā)成本脾拆，版本迭代加快馒索。
第三個(gè)特性是API功能強(qiáng)大。
可以直接使用原生APP的網(wǎng)絡(luò)通信和數(shù)據(jù)緩存能力名船，無縫接入地圖绰上、掃一掃等功能,可以想象小程序的應(yīng)用領(lǐng)域非常廣
第四個(gè)特性是學(xué)習(xí)成本低，上手快渠驼。
該框架內(nèi)的基礎(chǔ)概念蜈块，如模板語法、生命周期迷扇、接口調(diào)用方法都與當(dāng)前流行的前端框架基礎(chǔ)概念大致相同百揭，所以對(duì)于新開發(fā)者來說非常友好。
綜上可以看出微信小程序確實(shí)解決了很多目前開發(fā)者的痛點(diǎn)蜓席，并給出了不錯(cuò)的解決方案器一，再加上自己移動(dòng)端流量大戶的buff加成，相信小程序的前景非吵冢可觀祈秕。
