一、 mpvue簡(jiǎn)介
mpvue:是由 美團(tuán)點(diǎn)評(píng)團(tuán)隊(duì)出品的小程序開 發(fā)的一款基于 vue的框架， 從整個(gè) Vue的核心代碼上經(jīng)過二次開發(fā)而形成的一個(gè)框架，相當(dāng)于是給Vue本身賦能，增加了開發(fā)微信小程序的能力。
使用 mpvue開發(fā)小程序，你將在小程序技術(shù)體系的基礎(chǔ)上獲取到這樣一些能力：
l 徹底的組件化開發(fā)能力：提高代碼
l 完整的 Vue.js 開發(fā)體驗(yàn)
l 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用
l 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload
l 支持使用 npm 外部依賴
l 使用 Vue.js 命令行工具 vue-cli 快速初始化項(xiàng)目
l H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力
它的目標(biāo)是：在未來最理想的狀態(tài)下，可以一套代碼可以直接跑在多端： WEB、微信小程序、支付寶小程序、Native（借助weex）。不過由于各個(gè)端之間都存在一些比較明顯的差異性，從產(chǎn)品的層面上講，不建議這么做，這個(gè)框架的官方他們對(duì)它的期望的也只是開發(fā)和調(diào)試體驗(yàn)的一致
原生微信小程序、 mpvue、WePY這三種開發(fā)小程序方式的比較
二、mpvue開發(fā)流程
1、小程序賬號(hào)配置
1）前往https://mp.weixin.qq.com/wxopen/waregister?action=step1根據(jù)指引填寫信息和提交相應(yīng)的資料，申請(qǐng)小程序帳號(hào)。在菜單 “設(shè)置”-“開發(fā)設(shè)置”獲取小程序的 AppID 。
2）在菜單 “設(shè)置”-“開發(fā)設(shè)置”中配置服務(wù)器域名，必須是https開頭的域名
2、安裝開發(fā)工具
前往 開發(fā)者工具下載頁面 ，根據(jù)自己的操作系統(tǒng)下載對(duì)應(yīng)的安裝包進(jìn)行安裝，有關(guān)開發(fā)者工具更詳細(xì)的介紹可以查看 《開發(fā)者工具介紹》 。
打開小程序開發(fā)者工具，用微信掃碼登錄開發(fā)者工具，準(zhǔn)備開發(fā)小程序。
3、mpvue生成項(xiàng)目
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install
# 啟動(dòng)構(gòu)建
$ npm run dev
Npm run dev運(yùn)行成功后，本地目錄下會(huì)生成一個(gè)dist文件，這個(gè)文件就是生成的小程序相關(guān)代碼。
在小程序中新建項(xiàng)目，填寫上一步獲取的 appid，便于后面可以在手機(jī)上預(yù)覽，真機(jī)測(cè)試，小程序的文件目錄就是本地項(xiàng)目目錄的dist文件。
三、mpvue開發(fā)中的規(guī)范
1、生命周期函數(shù)
除了 vue本身的生命周期外，mpvue還兼容了小程序的生命周期，
app 部分：
onLaunch，初始化
onShow，當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示
onHide，當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)
page 部分：
onLoad，監(jiān)聽頁面加載
onShow，監(jiān)聽頁面顯示
onReady，監(jiān)聽頁面初次渲染完成
onHide，監(jiān)聽頁面隱藏
onUnload，監(jiān)聽頁面卸載
onPullDownRefresh，監(jiān)聽用戶下拉動(dòng)作
onReachBottom，頁面上拉觸底事件的處理函數(shù)
onShareAppMessage，用戶點(diǎn)擊右上角分享
onPageScroll，頁面滾動(dòng)
onTabItemTap, 當(dāng)前是 tab 頁時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā) （mpvue 0.0.16 支持）
注意點(diǎn) ：
created：這個(gè)鉤子是有bug的，所有頁面的created函數(shù)會(huì)在項(xiàng)目加載的時(shí)候被一起調(diào)用，而且進(jìn)入頁面的時(shí)候不會(huì)在被調(diào)用，所以這個(gè)函數(shù)基本就不能使用了，用小程序的onLoad鉤子代替
mounted：你如果從頁面B返回頁面A，頁面A的mounted鉤子不會(huì)被觸發(fā)，因?yàn)轫撁鏇]有被重新加載，如果有需要每次頁面展示都要調(diào)用的邏輯，使用小程序的onShow代替
2、mpvue轉(zhuǎn)換的部分規(guī)則
1) 微信小程序的頁面的 query 參數(shù)是通過 onLoad 獲取的，mpvue 對(duì)此進(jìn)行了優(yōu)化，直接通過 this.$root.$mp.query 獲取相應(yīng)的參數(shù)數(shù)據(jù)
2) 小程序里所有的 BOM／DOM 都不能用，因此v-html 、 v-text 不能用。
el：this.$refs...styles.width=offsetWIdth --> :
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
