一、 mpvue簡介

mpvue:是由 美團點評團隊出品的小程序開 發(fā)的一款基于 vue的框架， 從整個 Vue的核心代碼上經過二次開發(fā)而形成的一個框架，相當于是給Vue本身賦能，增加了開發(fā)微信小程序的能力。

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

l 徹底的組件化開發(fā)能力：提高代碼

l 完整的 Vue.js 開發(fā)體驗

l 方便的 Vuex 數(shù)據管理方案：方便構建復雜應用

l 快捷的 webpack 構建機制：自定義構建策略、開發(fā)階段 hotReload

l 支持使用 npm 外部依賴

l 使用 Vue.js 命令行工具 vue-cli 快速初始化項目

l H5 代碼轉換編譯成小程序目標代碼的能力

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

原生微信小程序、 mpvue、WePY這三種開發(fā)小程序方式的比較

二、mpvue開發(fā)流程

1、小程序賬號配置

1）前往https://mp.weixin.qq.com/wxopen/waregister?action=step1根據指引填寫信息和提交相應的資料，申請小程序帳號。在菜單 “設置”-“開發(fā)設置”獲取小程序的 AppID 。

2）在菜單 “設置”-“開發(fā)設置”中配置服務器域名，必須是https開頭的域名

2、安裝開發(fā)工具

前往 開發(fā)者工具下載頁面 ，根據自己的操作系統(tǒng)下載對應的安裝包進行安裝，有關開發(fā)者工具更詳細的介紹可以查看 《開發(fā)者工具介紹》 。

打開小程序開發(fā)者工具，用微信掃碼登錄開發(fā)者工具，準備開發(fā)小程序。

3、mpvue生成項目

# 全局安裝 vue-cli

$ npm install --global vue-cli

# 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目

$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴

$ cd my-project

$ npm install

# 啟動構建

$ npm run dev

Npm run dev運行成功后，本地目錄下會生成一個dist文件，這個文件就是生成的小程序相關代碼。

在小程序中新建項目，填寫上一步獲取的 appid，便于后面可以在手機上預覽，真機測試，小程序的文件目錄就是本地項目目錄的dist文件。

三、mpvue開發(fā)中的規(guī)范

1、生命周期函數(shù)

除了 vue本身的生命周期外，mpvue還兼容了小程序的生命周期，

app 部分：

onLaunch，初始化

onShow，當小程序啟動，或從后臺進入前臺顯示

onHide，當小程序從前臺進入后臺

page 部分：

onLoad，監(jiān)聽頁面加載

onShow，監(jiān)聽頁面顯示

onReady，監(jiān)聽頁面初次渲染完成