前文 說(shuō)到我開(kāi)發(fā)了一個(gè)簡(jiǎn)單的小程序叫做 車(chē)標(biāo)速查（代碼以及二維碼詳見(jiàn) 這里），本文簡(jiǎn)單講講如何將這個(gè)小程序轉(zhuǎn)為 mpvue 開(kāi)發(fā)（最終 成果 ）

mpvue 官網(wǎng)的 文檔 真的是非常簡(jiǎn)單，不，應(yīng)該說(shuō)是簡(jiǎn)潔，因?yàn)橐劳?Vue，所以很多語(yǔ)法不需要贅述，直接去看 Vue 的文檔就好了。mpvue 這個(gè)名字真的是不忍吐槽，起名也太不上心了吧 ... 反正我個(gè)人覺(jué)得不好聽(tīng)

mpvue 的入門(mén)非常簡(jiǎn)單，可以看這個(gè) quickstart。生成的模版目錄結(jié)構(gòu)和 Vue 開(kāi)發(fā)很像，但是有區(qū)別，為了使之構(gòu)建出符合小程序項(xiàng)目結(jié)構(gòu)的代碼格式： json/wxml/wxss/js 文件。src 是開(kāi)發(fā)目錄，dist 是最后 build 的目錄，也就是小程序的代碼

簡(jiǎn)單看一下 src 的代碼結(jié)構(gòu)：

復(fù)制代碼├── App.vue
├── data
│   └── data.js
├── main.js
├── pages
│   ├── about
│   │   ├── index.vue
│   │   └── main.js
│   ├── detail
│   │   ├── index.vue
│   │   └── main.js
│   └── index
│       ├── index.vue
│       └── main.js
└── utils
    └── index.js

App.vue 最后會(huì)被編譯成 app.js/app.wxss，一些全局相關(guān)的樣式和鉤子函數(shù)會(huì)被放在這里（比如說(shuō) onLaunch，但是在 mpvue 里我們可以用 created 代替）。main.js 會(huì)被編譯成 app.json，一些全局相關(guān)的配置放在這里（比如頁(yè)面入口，tabbars 等）

pages 目錄即為每個(gè)頁(yè)面，以 index 目錄為例，index.vue 會(huì)被編譯成 main.js/main.wxml/main.wxss，而 main.js 可以放置針對(duì)單個(gè)頁(yè)面的配置，最后會(huì)被編譯成 main.json（如果沒(méi)有填入配置項(xiàng)，則不會(huì)生成該文件）

然后來(lái)簡(jiǎn)單過(guò)下開(kāi)發(fā)過(guò)程中踩的一些坑：

• pages 目錄下新增入口，需要重新 npm start 啟動(dòng)，因?yàn)樾陆?webpack 的 entry
• 關(guān)于 navigator。index 頁(yè)面點(diǎn)擊圖標(biāo)需要去詳情頁(yè)，這就有了導(dǎo)航需求。小程序有原生的 navigator 組件，現(xiàn)在用 mpvue 開(kāi)發(fā)，那么能不能用 Vue-Router 呢？答案是并不可以，參考 這個(gè) faq。所以最后還是用了小程序原生的 navigator 組件
• detail 頁(yè)面的 onLoad 鉤子會(huì)有一個(gè) options 參數(shù)，如果在這個(gè)頁(yè)面用 created，是獲取不到的，可以看下 mpvue 的 生命周期。因?yàn)?mpvue 不建議使用小程序的生命周期鉤子，所以比較好的方式是在 mounted 的時(shí)候用 this.$root.$mp.query 去獲取 options
• .vue 文件需要加上 style／script 標(biāo)簽后才能被正確編譯，這點(diǎn)不難理解，script 里的內(nèi)容被編譯成 js 文件，而 style 里的內(nèi)容被編譯成 wxss 文件，一個(gè)小程序的頁(yè)面需要它們支撐
• filters 還是不能用
• 關(guān)于富文本?？戳讼?v-html 指令是可以用的，但是是被編譯成 rich-text 組件，并不符合我的要求，最后用的是 mpvue-wxParse，還是不錯(cuò)的，跟 wxParse 功能基本一樣
• 關(guān)于 scroll-view。因?yàn)橛袀€(gè)側(cè)邊導(dǎo)航點(diǎn)擊跳轉(zhuǎn)的功能，還是用了 scroll-view 去實(shí)現(xiàn)，并沒(méi)有更好的辦法
• {{}} 中小程序原生不支持的語(yǔ)法，mpvue 同樣無(wú)法支持，比如一些復(fù)雜的計(jì)算，比如函數(shù)等
• 所有頁(yè)面里面的 created 生命周期函數(shù)都會(huì)在小程序加載的時(shí)候， 一次性執(zhí)行，而不是每進(jìn)入一個(gè)頁(yè)面執(zhí)行一次（可以用 mounted 或者 onLoad 或者 onReady 代替）

總的來(lái)說(shuō)，我從入門(mén) mpvue 到用其改寫(xiě)這個(gè)小程序，也就不過(guò)一天時(shí)間，由此可見(jiàn) mpvue 上手真的非?？?，但是它給我的總體感覺(jué)是有點(diǎn)雞肋，一方面可能是我這個(gè)項(xiàng)目有點(diǎn)簡(jiǎn)單（不需要用到 Vuex 以及組件化），另一方面可能還不是很了解 mpvue

官網(wǎng)概括的它的主要能力：

• 徹底的組件化開(kāi)發(fā)能力：提高代碼復(fù)用性
• 完整的 Vue.js 開(kāi)發(fā)體驗(yàn)
• 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
• 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段 hotReload
• 支持使用 npm 外部依賴(lài)
• 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目
• H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

我覺(jué)得目前主要的亮點(diǎn)在于 Vuex 的可引入以及組件化開(kāi)發(fā)，但是越來(lái)越覺(jué)得隨著原生小程序開(kāi)發(fā)的改善，這些功能都會(huì)被補(bǔ)充進(jìn)去。所以，最大的賣(mài)點(diǎn)可能還是在于 多端統(tǒng)一

我覺(jué)得有點(diǎn)雞肋的另一個(gè)重要原因是，使用 mpvue 開(kāi)發(fā)并不能完全忽略小程序的 API 或者組件，比如這個(gè)小程序，還是要用 navigator 組件以及 scroll-view 組件去實(shí)現(xiàn)一些功能（當(dāng)然隨著 mpvue 生態(tài)的發(fā)展，完全有可能出現(xiàn) navigator／scroll-view 的 mpvue 組件，但是這樣造輪子是否值得？），而且可能還有其他一些 API。而類(lèi)比 jQuery 和 js，jQuery 完全不用去考慮原生的 dom 操作方式，從而更加 “傻瓜式”。mpvue 的開(kāi)發(fā)模式注定不會(huì)是這樣的結(jié)局（因?yàn)椴⒉皇菑男〕绦虻讓尤ラ_(kāi)發(fā)）

另外一點(diǎn)，用 mpvue 開(kāi)發(fā)，增加了一層 vue->小程序 編譯環(huán)節(jié)，所以 reload 的速度應(yīng)該會(huì)比原生開(kāi)發(fā)慢一點(diǎn)

魯小夫 在 如何看待美團(tuán)開(kāi)源的 mpvue ? 這個(gè)問(wèn)題下的答案非常值得思考：

不過(guò)我們也該思考一下，為什么大家對(duì)微信小程序自帶的機(jī)制有這么多意見(jiàn)，為什么大家對(duì) vue 這么認(rèn)同，為什么多端兼容這個(gè)事情這么重要，為什么微信小程序沒(méi)有擁抱開(kāi)源，為什么微信小程序的技術(shù)棧沒(méi)能做到標(biāo)準(zhǔn)化通用化。為了兼容微信小程序，前端工程師做了這么多工作，弄了那么多框架，到底得到的是什么。

以前看到過(guò)一句話(huà)，大概意思是，微信小程序有太多滿(mǎn)分的開(kāi)源框架可以借鑒，最后卻造了個(gè)負(fù)分的輪子。

all in all，我的看法是，如果你剛好熟悉 Vue 或者需要多端統(tǒng)一開(kāi)發(fā)，那么 mpvue 或許是個(gè)選擇，如果你只是從頭開(kāi)始開(kāi)發(fā)一個(gè)小程序，原生開(kāi)發(fā)也未嘗不可。說(shuō)到底，一系列小程序框架的出現(xiàn)無(wú)非是原生開(kāi)發(fā)體驗(yàn)太差，但是我相信，以微信的能力，假以時(shí)日能夠把小程序原生開(kāi)發(fā)的體驗(yàn)做好。