接觸微信小程序有一段時(shí)間的開發(fā)者或開發(fā)團(tuán)隊(duì)，我相信多多少少都會為自己搭建封裝一些便于開發(fā)的框架/腳手架，尤其是一些做過Web開發(fā)的開發(fā)者，受到現(xiàn)如今Web主流開發(fā)框架如Angular，React，Vue等的核心思想的影響，對數(shù)據(jù)/狀態(tài)管理、組件化、跨平臺等都有較高的追求。
所以，從小程序出現(xiàn)到現(xiàn)在，已經(jīng)陸陸續(xù)續(xù)出現(xiàn)了一些遵循了這些Web開發(fā)思想的小程序框架，比較突出的就是WePY，一個(gè)由騰訊團(tuán)隊(duì)推出的小程序組件化開發(fā)框架，主要的特點(diǎn)如下：
- 類Vue開發(fā)風(fēng)格
- 支持自定義組件開發(fā)
- 支持引入NPM包
- 支持Promise
- 支持ES2015+特性，如Async Functions
- 支持多種編譯器，Less/Sass/Styus、Babel/Typescript、Pug
- 支持多種插件處理，文件壓縮，圖片壓縮，內(nèi)容替換等
- 支持 Sourcemap，ESLint等
- 小程序細(xì)節(jié)優(yōu)化，如請求列隊(duì)，事件優(yōu)化等
這些特性基本上是現(xiàn)今主流Web開發(fā)的標(biāo)配了。因?yàn)槲以陂_發(fā)Web應(yīng)用的時(shí)候也經(jīng)常使用Vue，所以在試用WePY的過程中覺得非常的熟悉好上手，它確實(shí)是一個(gè)值得使用、可以有效提高生產(chǎn)力的好框架。
不過，今天的主角并不是這個(gè)類Vue框架WePY，我想聊的是另外一個(gè)基于Vue的框架：美團(tuán)點(diǎn)評團(tuán)隊(duì)出品的小程序開發(fā)框架：mpvue。為什么說WePY是一個(gè)“類Vue”的框架，而這個(gè)mpvue是“基于Vue”的框架呢？因?yàn)閃ePY是在代碼開發(fā)風(fēng)格上借鑒了Vue，本身和Vue沒有什么關(guān)系；而這個(gè)mpvue是從整個(gè)Vue的核心代碼上經(jīng)過二次開發(fā)而形成的一個(gè)框架，相當(dāng)于是給Vue本身賦能，增加了開發(fā)微信小程序的能力。
使用mpvue開發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：
- 徹底的組件化開發(fā)能力：提高代碼
- 完整的 Vue.js 開發(fā)體驗(yàn)
- 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
- 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload
- 支持使用 npm 外部依賴
- 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目
- H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
它的目標(biāo)是：在未來最理想的狀態(tài)下，可以一套代碼可以直接跑在多端：WEB、微信小程序、支付寶小程序、Native（借助weex）。不過由于各個(gè)端之間都存在一些比較明顯的差異性，從產(chǎn)品的層面上講，不建議這么做，這個(gè)框架的官方他們對它的期望的也只是開發(fā)和調(diào)試體驗(yàn)的一致。
通過官網(wǎng)提供的五分鐘快速上手教程，可以發(fā)現(xiàn)它的開發(fā)過程和Vue保持高度一致，連使用的命令行工具也還是原先開發(fā)Web應(yīng)用時(shí)所用的vue-cli：
vue init mpvue/mpvue-quickstart my-project
編寫模板代碼的時(shí)候通常也主要是以HTML為主，比如我們編寫一個(gè).vue組件時(shí)寫了如下代碼：
<template> <div class="counter-warp"> <p>Vuex counter：{{ count }}</p> <p> <button @click="increment">+</button> <button @click="decrement">-</button> </p> <a href="/pages/index/index" class="home">去往首頁</a> </div> </template> 而mpvue會通過編譯，將這個(gè)HTML模板轉(zhuǎn)換成小程序的WXML代碼：
<template name="counter$39c97971">
<view class="_div data-v-72101980 counter-warp">
<view class="_p data-v-72101980">Vuex counter：{{ count }}</view>
<view class="_p data-v-72101980">
<button bindtap="handleProxy" data-eventid="{{'0'}}" data-comkey="{{$k}}" class="_button data-v-72101980">+</button>
<button bindtap="handleProxy" data-eventid="{{'1'}}" data-comkey="{{$k}}"
class="_button data-v-72101980">-</button>
</view>
<navigator url="/pages/index/index" class="_a data-v-72101980 home">去往首頁</navigator>
</view>
</template>
這樣，我們就可以完全用開發(fā)Web應(yīng)用的方式去開發(fā)小程序了，這為我們減少了一些思維切換方面的成本。其實(shí)最重要的是：Vue真的很好用?。?/strong>
另外，提供一個(gè)對原生微信小程序、mpvue、WePY這三種開發(fā)小程序方式的比較，感興趣的朋友可以參考一下：
網(wǎng)絡(luò)事業(yè)（長沙微信小程序），就找簡界!
文章內(nèi)容來自網(wǎng)絡(luò)，僅用于學(xué)習(xí)交流，版權(quán)歸原作者所有，如有侵權(quán)請聯(lián)系管理員刪除。
(https://www.jianshu.com/p/8f779950bfd9)原文地址！