使用Vue開發(fā)微信小程序：mpvue框架

liang1234_ 2019-03-27

展開全文

【最近更新】mpvue入門系列教程：
如何在mpvue中正確的引用小程序的原生自定義組件
 使用mpvue開發(fā)小程序教程（六）
使用mpvue開發(fā)小程序教程（五）
使用mpvue開發(fā)小程序教程（四）
使用mpvue開發(fā)小程序教程（三）
使用mpvue開發(fā)小程序教程（二）
使用mpvue開發(fā)小程序教程（一）

接觸微信小程序有一段時間的開發(fā)者或開發(fā)團隊，我相信多多少少都會為自己搭建封裝一些便于開發(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，一個由騰訊團隊推出的小程序組件化開發(fā)框架，主要的特點如下：

類Vue開發(fā)風格
支持自定義組件開發(fā)
支持引入NPM包
支持Promise
支持ES2015 特性，如Async Functions
支持多種編譯器，Less/Sass/Styus、Babel/Typescript、Pug
支持多種插件處理，文件壓縮，圖片壓縮，內(nèi)容替換等
支持 Sourcemap，ESLint等
小程序細節(jié)優(yōu)化，如請求列隊，事件優(yōu)化等

這些特性基本上是現(xiàn)今主流Web開發(fā)的標配了。因為我在開發(fā)Web應用的時候也經(jīng)常使用Vue，所以在試用WePY的過程中覺得非常的熟悉好上手，它確實是一個值得使用、可以有效提高生產(chǎn)力的好框架。

不過，今天的主角并不是這個類Vue框架WePY，我想聊的是另外一個基于Vue的框架：美團點評團隊出品的小程序開發(fā)框架：mpvue。為什么說WePY是一個“類Vue”的框架，而這個mpvue是“基于Vue”的框架呢？因為WePY是在代碼開發(fā)風格上借鑒了Vue，本身和Vue沒有什么關系；而這個mpvue是從整個Vue的核心代碼上經(jīng)過二次開發(fā)而形成的一個框架，相當于是給Vue本身賦能，增加了開發(fā)微信小程序的能力。

使用mpvue開發(fā)小程序，你將在小程序技術體系的基礎上獲取到這樣一些能力：

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

它的目標是：在未來最理想的狀態(tài)下，可以一套代碼可以直接跑在多端：WEB、微信小程序、支付寶小程序、Native（借助weex）。不過由于各個端之間都存在一些比較明顯的差異性，從產(chǎn)品的層面上講，不建議這么做，這個框架的官方他們對它的期望的也只是開發(fā)和調(diào)試體驗的一致。

通過官網(wǎng)提供的五分鐘快速上手教程，可以發(fā)現(xiàn)它的開發(fā)過程和Vue保持高度一致，連使用的命令行工具也還是原先開發(fā)Web應用時所用的vue-cli：

#創(chuàng)建一個小程序工程vue init mpvue/mpvue-quickstart my-project

編寫模板代碼的時候通常也主要是以HTML為主，比如我們編寫一個.vue組件時寫了如下代碼：

<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會通過編譯，將這個HTML模板轉換成小程序的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應用的方式去開發(fā)小程序了，這為我們減少了一些思維切換方面的成本。其實最重要的是：