mpvue將vue項目轉換為小程序

一、 mpvue簡介

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

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

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

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

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

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

l 支持使用 npm 外部依賴

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

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

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

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

二、mpvue開發(fā)流程

1、小程序賬號配置

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

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

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

前往 開發(fā)者工具下載頁面 ，根據(jù)自己的操作系統(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)聽頁面初次渲染完成

onHide，監(jiān)聽頁面隱藏

onUnload，監(jiān)聽頁面卸載

onPullDownRefresh，監(jiān)聽用戶下拉動作

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

onShareAppMessage，用戶點擊右上角分享

onPageScroll，頁面滾動

onTabItemTap, 當前是 tab 頁時，點擊 tab 時觸發(fā) （mpvue 0.0.16 支持）

注意點 ：

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

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

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

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

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

el：this.$refs...styles.width=offsetWIdth --> :

獲取節(jié)點信息，

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

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

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

<!-- 這種就不支持，建議寫 computed -->

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

4） 不支持過濾器，渲染部分會轉成 wxml ，wxml 不支持過濾器，所以這部分功能不支持。

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

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

<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） 列表渲染 需要注意一點， 嵌套列表渲染，必須指定不同的索引！

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

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

9) 小程序不支持路由，因此，路由跳轉使用小程序的頁面導航 api代替

this.$router.push-->wx.navigateTo() //進入子頁面
this.$router.replace-->wx.reLaunch()//打開新頁面

10） 獲取當前頁面地址

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

11） 接口返回參數(shù)結構調(diào)整，小程序的 request請求接口返回的數(shù)據(jù)會在外層添加一個data

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

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

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

14） 不支持 css媒體查詢，css樣式避免標簽選擇器，不易于維護

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>