從去年年初微信小程序推出已經(jīng)經(jīng)過了一年多時間剔应，小程序在開發(fā)者的圈子里也是經(jīng)過了大起大落跨晴，剛推出的時候大家對小程序充滿了期待驻债，但是老實(shí)說第一版的小程序還是差強(qiáng)人意，遠(yuǎn)遠(yuǎn)沒有達(dá)到大家的預(yù)期锤岸，這里的預(yù)期包括小程序體驗上的預(yù)期，也包括小程序?qū)τ陂_發(fā)者的預(yù)期板乙。在使用上初版小程序還是存在不少卡頓的現(xiàn)象是偷，而且第一批上線的小程序功能都太簡單，雖然小程序推行的是“極致精簡募逞，用完即走”蛋铆，但是如果一個產(chǎn)品的功能是缺失的精簡，那么還沒到用完放接，用戶已經(jīng)走了刺啦。初版小程序?qū)τ陂_發(fā)者也不是很友好，從IDE到功能組件都還不夠完善纠脾，還是存在了很多缺失玛瘸，基本的調(diào)試功能都存在bug蜕青，而且對于小程序的大小也有嚴(yán)格的要求，不能超過1M：āＳ液恕！在如今的社會不能超過1M什么概念渺绒，讓我想起了紅白機(jī)的游戲大小贺喝。。芒篷。在現(xiàn)在的前端開發(fā)中隨隨便便的一個高清圖片可能都超過1M搜变，這樣的限制也是為了保證用戶的體驗，在第一次打開的時候能夠以最快速度呈現(xiàn)給用戶针炉，讓用戶感知不到下載的過程挠他，開發(fā)者也漸漸接受了大小限制，但是因為1M實(shí)在是太小了篡帕，導(dǎo)致前期的小程序功能都非常弱殖侵，讓用戶還是無法脫離原生APP直接使用小程序，所以很多用戶都是去微信里體驗了一把小程序后發(fā)現(xiàn)功能不全镰烧，滿足不了日常需求拢军，就又用回原生app了。微信也意識到了這個問題怔鳖，將小程序的大小限制擴(kuò)大到了2M茉唉，并且升級了很多組件，讓我們不再需要太多的自定義組件结执，也使得我們的代碼量越來越少度陆，所以從去年年底開始又起了一波小程序，這波小程序的更新使得大家重新認(rèn)識了小程序献幔，大家發(fā)現(xiàn)現(xiàn)在的小程序真的可以替代目前絕大部分app了懂傀，核心功能都是齊備的，而且真的做到了用完即走蜡感，對于一些低頻的app完全可以使用小程序替代蹬蚁，甚至一些類似共享單車這樣的app，因為本身功能就比較單一郑兴，也完全可以用小程序替代犀斋，從我的體驗來看，小程序除了啟動稍慢情连，但是已經(jīng)可以做到完美體驗了闪水，進(jìn)去之后在網(wǎng)絡(luò)好的情況下，各種頁面秒開，因為這樣的優(yōu)質(zhì)體驗球榆，我也卸載了一堆低頻的原生app朽肥，這也萌發(fā)了我原先寫原生app和后臺的開發(fā)者學(xué)習(xí)小程序的熱情。

小程序?qū)W起來還是比較簡單的持钉，之前有過一定的html衡招、js基礎(chǔ)的同學(xué)看兩天基本就能上手，編程這門手藝其實(shí)是互通的每强，只要了解了基本語法始腾，各種架構(gòu)、設(shè)計模式都是一樣的空执，對于有基礎(chǔ)的同學(xué)學(xué)起來也是非忱思快的，之前我一直比較抵觸編寫js辨绊，覺得這種類型隨意定義的腳本語言奶栖，是一種不嚴(yán)謹(jǐn)?shù)恼Z言，連python都要停止對2.X版本的兼容了门坷，為什么還要用那么low的語言宣鄙，但是h5的各種快速發(fā)展，每年都在啪啪打臉默蚌，讓我不得不開始重視起js冻晤，看來是要好好掌握這門手藝了，因為以我十幾年的編程經(jīng)驗绸吸，我感覺到了原生app將像當(dāng)年C/S一樣在未來3鼻弧，5年內(nèi)沒落下去，所以筆者也不能免俗的將h5開發(fā)放入自己的技術(shù)棧中锦茁，小程序的runtime其實(shí)也是一個類似web解析和運(yùn)行引擎攘轩，所以當(dāng)你學(xué)習(xí)小程序的時候會發(fā)現(xiàn)，小程序不管從工程結(jié)構(gòu)還是代碼都和h5非常像蜻势，尤其是和目前主流的一些js 的MVVM框架撑刺，可以說簡直就是換了一些關(guān)鍵字和名字鹉胖，所以對于使用過vue.js和react的同學(xué)來說握玛，完全沒有任何障礙就能熟練使用小程序進(jìn)行開發(fā)。

開發(fā)小程序大家勢必會有個疑問就是甫菠，小程序如何能夠?qū)崿F(xiàn)復(fù)用挠铲，復(fù)用有幾個層面的含義，一方面是小程序本身組件復(fù)用寂诱，微信也提供了完善的自定義組件和模塊導(dǎo)出功能拂苹，滿足基礎(chǔ)的復(fù)用；另一方面是小程序和現(xiàn)有H5的復(fù)用痰洒，目前很多公司采用的復(fù)用方式是視圖層用小程序重新也一次瓢棒，邏輯層的代碼復(fù)用原有H5代碼中的js模塊浴韭，這就能夠做到邏輯層的代碼復(fù)用，但是這么做的缺點(diǎn)是只是實(shí)現(xiàn)了一定程度的復(fù)用脯宿，而且邏輯層的復(fù)用說起來簡單念颈，但是實(shí)際復(fù)用過程中還存在很多其他的問題，最后的結(jié)果可能是真正能復(fù)用的模塊其實(shí)并不多连霉，很多開發(fā)經(jīng)驗不是很豐富的公司榴芳，最后可能出現(xiàn)的局面就是除了原有的native團(tuán)隊、h5團(tuán)隊又多了一個小程序團(tuán)隊跺撼。

目前各大互聯(lián)網(wǎng)公司也都在h5代碼和小程序代碼復(fù)用方面作出努力窟感，這里推薦下美團(tuán)近期開源的mpvue （https://github.com/Meituan-Dianping/mpvue），mpvue是一個使用 Vue.js開發(fā)小程序的前端框架歉井∈疗恚框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 實(shí)現(xiàn)酣难，使其可以運(yùn)行在小程序環(huán)境中谍夭，從而為小程序開發(fā)引入了整套 Vue.js開發(fā)體驗。mpvue對于使用vue.js開發(fā)前端H5的團(tuán)隊來說基本可以做到視圖層憨募、邏輯層的無縫復(fù)用紧索。

Vue.js 和小程序都是典型的邏輯視圖層框架，邏輯層和視圖層之間的工作方式為：數(shù)據(jù)變更驅(qū)動視圖更新菜谣；視圖交互觸發(fā)事件珠漂，事件響應(yīng)函數(shù)修改數(shù)據(jù)再次觸發(fā)視圖更新，如圖1所示尾膊。

image

鑒于 Vue.js 和小程序一致的工作原理媳危，美團(tuán)將小程序的功能托管給 Vue.js，在正確的時機(jī)將數(shù)據(jù)變更同步到小程序冈敛，從而達(dá)到開發(fā)小程序的目的待笑。這樣，可以將精力聚焦在 Vue.js 上抓谴，參照 Vue.js 編寫與之對應(yīng)的小程序代碼暮蹂，小程序負(fù)責(zé)視圖層展示，所有業(yè)務(wù)邏輯收斂到 Vue.js 中癌压，Vue.js 數(shù)據(jù)變更后同步到小程序仰泻，如圖2所示。如此一來滩届，就獲得了以 Vue.js 的方式開發(fā)小程序的能力集侯。

image

通過使用mpvue能夠相對低成本的在vue.js和小程序之間實(shí)現(xiàn)高度代碼復(fù)用，大大降低了開發(fā)成本，基本可以做到用原先h5開發(fā)團(tuán)隊短時間完成小程序的開發(fā)棠枉，關(guān)鍵能夠做到高度代碼一致性和復(fù)用浓体。

上面絮絮叨叨那么多，總結(jié)下來就是我看好微信的流量導(dǎo)入和小程序的發(fā)展辈讶，做為IT從業(yè)者汹碱，任何一個可能對行業(yè)產(chǎn)生變革的技術(shù)我們都不能錯過，一旦錯過可能將會失去未來荞估。