一、 mpvue簡(jiǎn)介

mpvue:是由 美團(tuán)點(diǎn)評(píng)團(tuán)隊(duì)出品的小程序開(kāi) 發(fā)的一款基于 vue的框架， 從整個(gè) Vue的核心代碼上經(jīng)過(guò)二次開(kāi)發(fā)而形成的一個(gè)框架，相當(dāng)于是給Vue本身賦能，增加了開(kāi)發(fā)微信小程序的能力。

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

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

l 完整的 Vue.js 開(kāi)發(fā)體驗(yàn)

l 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

l 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開(kāi)發(fā)階段 hotReload

l 支持使用 npm 外部依賴

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

l H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

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

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

二、mpvue開(kāi)發(fā)流程

1、小程序賬號(hào)配置

1）前往https://mp.weixin.qq.com/wxopen/waregister?action=step1根據(jù)指引填寫(xiě)信息和提交相應(yīng)的資料，申請(qǐng)小程序帳號(hào)。在菜單 “設(shè)置”-“開(kāi)發(fā)設(shè)置”獲取小程序的 AppID 。

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

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

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

打開(kāi)小程序開(kāi)發(fā)者工具，用微信掃碼登錄開(kāi)發(fā)者工具，準(zhǔn)備開(kāi)發(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)目，填寫(xiě)上一步獲取的 appid，便于后面可以在手機(jī)上預(yù)覽，真機(jī)測(cè)試，小程序的文件目錄就是本地項(xiàng)目目錄的dist文件。

三、mpvue開(kāi)發(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)聽(tīng)頁(yè)面加載

onShow，監(jiān)聽(tīng)頁(yè)面顯示

onReady，監(jiān)聽(tīng)頁(yè)面初次渲染完成

onHide，監(jiān)聽(tīng)頁(yè)面隱藏

onUnload，監(jiān)聽(tīng)頁(yè)面卸載

onPullDownRefresh，監(jiān)聽(tīng)用戶下拉動(dòng)作

onReachBottom，頁(yè)面上拉觸底事件的處理函數(shù)

onShareAppMessage，用戶點(diǎn)擊右上角分享

onPageScroll，頁(yè)面滾動(dòng)

onTabItemTap, 當(dāng)前是 tab 頁(yè)時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā) （mpvue 0.0.16 支持）

注意點(diǎn) ：

created：這個(gè)鉤子是有bug的，所有頁(yè)面的created函數(shù)會(huì)在項(xiàng)目加載的時(shí)候被一起調(diào)用，而且進(jìn)入頁(yè)面的時(shí)候不會(huì)在被調(diào)用，所以這個(gè)函數(shù)基本就不能使用了，用小程序的onLoad鉤子代替

mounted：你如果從頁(yè)面B返回頁(yè)面A，頁(yè)面A的mounted鉤子不會(huì)被觸發(fā)，因?yàn)轫?yè)面沒(méi)有被重新加載，如果有需要每次頁(yè)面展示都要調(diào)用的邏輯，使用小程序的onShow代替

2、mpvue轉(zhuǎn)換的部分規(guī)則

1) 微信小程序的頁(yè)面的 query 參數(shù)是通過(guò) onLoad 獲取的，mpvue 對(duì)此進(jìn)行了優(yōu)化，直接通過(guò) this.$root.$mp.query 獲取相應(yīng)的參數(shù)數(shù)據(jù)

2) 小程序里所有的 BOM／DOM 都不能用，因此v-html 、 v-text 不能用。

el：this.$refs...styles.width=offsetWIdth --> :style="{'width':offsetWidth}"

獲取節(jié)點(diǎn)信息，

wx.createSelectorQuery().select(className).boundingClientRect().exec(res=>{
在此處獲取到節(jié)點(diǎn)的信息： left,top,width,height})

3) 不支持部分復(fù)雜的 JavaScript 渲染表達(dá)式，我們會(huì)把 template 中的 {{}} 雙花括號(hào)的部分，直接編碼到 wxml 文件中，由于微信小程序的能力限制(數(shù)據(jù)綁定)，所以無(wú)法支持復(fù)雜的 JavaScript 表達(dá)式。

目前可以使用的有 + - * % ?: ! == === > < [] .，剩下的還待完善。

<!-- 這種就不支持，建議寫(xiě) computed -->

<p>{{ message.split('').reverse().join('') }}</p>

4） 不支持過(guò)濾器，渲染部分會(huì)轉(zhuǎn)成 wxml ，wxml 不支持過(guò)濾器，所以這部分功能不支持。

5） 不支持在 template 內(nèi)使用 methods 中的函數(shù)。

6） 不支持 官方文檔： Class 與 Style 綁定 中的 classObject 和 styleObject 語(yǔ)法。

<template>
<!-- 支持 -->
<div class="container" :class="computedClassStr"></div>
<div class="container" :class="{active: isActive}"></div>
<!-- 不支持 -->
<div class="container" :class="computedClassObject"></div>
</template>
<script>
export default {
data () {
return {
isActive: true
}
},
computed: {
computedClassStr () {
return this.isActive ? 'active' : ''
},
computedClassObject () {
return { active: this.isActive }
}
}
}
</script>

7） 不支持在組件上使用 Class 與 Style 綁定，將class與style綁定在組件最外層div上

8） 列表渲染 需要注意一點(diǎn)， 嵌套列表渲染，必須指定不同的索引！

<!-- 在這種嵌套循環(huán)的時(shí)候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫(xiě)法如下 -->

<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
</template>

9) 小程序不支持路由，因此，路由跳轉(zhuǎn)使用小程序的頁(yè)面導(dǎo)航 api代替

this.$router.push-->wx.navigateTo() //進(jìn)入子頁(yè)面
this.$router.replace-->wx.reLaunch()//打開(kāi)新頁(yè)面

10） 獲取當(dāng)前頁(yè)面地址

this.$route.fullPath-->getCurrentPages()[0].route

11） 接口返回參數(shù)結(jié)構(gòu)調(diào)整，小程序的 request請(qǐng)求接口返回的數(shù)據(jù)會(huì)在外層添加一個(gè)data

res:{
res:{ data:{
code:'000000', --> code:'000000',
data:{...} data:{...}
}   }
}

12） 不支持本地圖片用作背景圖，可以使用網(wǎng)絡(luò)圖片、或者 base64，或者使用img、image標(biāo)簽

13） 上拉加載 /下拉刷新，選用小程序的全局api，scroll-view中無(wú)法使用

14） 不支持 css媒體查詢，css樣式避免標(biāo)簽選擇器，不易于維護(hù)

15） mpvue-wxParse富文本解析

1）安裝npm i mpvue-wxparse

2)組件內(nèi)

<template>
<wxParse :content="article" />
</template>
<script>
import wxParse from 'mpvue-wxparse'
components: {wxParse},
</script>
<style>
@import url("~mpvue-wxparse/src/wxParse.css");
</style>

最新評(píng)論