、概念

mpvue是 美團 修改了 Vue.js 的 runtime 和 compiler 使其可以運行在小程序環境中，從而引入了整套 Vue.js 開發體驗的小程序框架。

二、優化細節

1、實例生命周期

不同于vue的是我們會在小程序 onReady 后，再去觸發 vue mounted 生命周期

除了 Vue 本身的生命周期外（詳細的 vue 生命周期文檔請看生命周期鉤子），mpvue 還兼容了小程序生命周期，這部分生命周期鉤子的來源于微信小程序的 Page， 除特殊情況外，不建議使用小程序的生命周期鉤子。

2、模板語法

幾乎全支持 官方文檔：模板語法，但需要注意的是：

（1）組件：由于要預編譯出 wxml，只能使用單文件組件（.vue 組件）的形式進行支持，不支持：動態組件，異步組件，自定義 render，inline-template，X-Templates，<script type="text/x-template"> 字符串模版，Slot（scoped 暫時還沒做支持）。

（2）不要在選項屬性或回調上使用箭頭函數，.eg：

 //箭頭函數是和父級上下文綁定在一起的，this 不會是如你做預期的 Vue 實例，且 this.a 或 this.myMethod 也會是未定義的
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())

（3） 頁面 內可以通過 this.$root.$mp.query （需要在 onLoad 生命周期觸發之后使用）獲取小程序在 page onLoad 時候傳遞的 options（如：query 參數等）。組件內通過** this.$root.$mp.appOptions**獲取小程序在 app的 onLaunch/onShow 時候傳遞的 options

（4）mpvue 可以支持小程序的原生組件，建議開發過程中直接使用 微信小程序：表單組件，.eg：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange"><!--需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，需要寫成 @change="eventName"-->
 <view class="picker">
 當前選擇: {{date}}
 </view>
</picker>

（5）列表渲染，嵌套列表渲染，必須指定不同的索引。示例：

<!-- 在這種嵌套循環的時候， index 和 itemIndex 這種索引是必須指定，且別名不能相同，正確的寫法如下 -->
<template>
 <ul v-for="(card, index) in list">
 <li v-for="(item, itemIndex) in card">
 {{item.value}}
 </li>
 </ul>
</template>

（6）事件處理器

• 列表中沒有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上將bind改為@ @regionchange,同時這個事件也非常特殊，它的 event type 有 begin 和 end 兩個，導致我們無法在handleProxy 中區分到底是什么事件，所以你在監聽此類事件的時候同時監聽事件名和事件類型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>
• bind 和 catch 事件（.stop 阻止冒泡）同時綁定時，只觸發 bind ,catch 不會被觸發。
• 小程序里沒有鍵盤事件(鍵盤修飾符)，默認(.prevent)事件，removeEventListener(.once)事件，.self 沒有可以判斷的標識
• .capture （ 1.0.9支持）使用捕獲

// 事件映射表，左側為 WEB 事件，右側為 小程序 對應事件
{
 click: 'tap',
 touchstart: 'touchstart',
 touchmove: 'touchmove',
 touchcancel: 'touchcancel',
 touchend: 'touchend',
 tap: 'tap',
 longtap: 'longtap',
 input: 'input',
 change: 'change',//在 input 和 textarea 中 change 事件會被轉為 blur 事件
 submit: 'submit',
 blur: 'blur',
 focus: 'focus',
 reset: 'reset',
 confirm: 'confirm',
 columnchange: 'columnchange',
 linechange: 'linechange',
 error: 'error',
 scrolltoupper: 'scrolltoupper',
 scrolltolower: 'scrolltolower',
 scroll: 'scroll'
}

（7）因為編譯到 wxml，小程序不會生成節點，暫不支持在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class、 style 等樣式屬性。

<!--不生效，建議寫在內部頂級元素上-->
<card class="class-name"> </card>
<card :style="{height:10+'px'}"> </card>
<card @click="clickFun"> </card>
<card v-show="showIf"> </card>//可用 v-if 代替

（8）不支持在 template 內使用 部分復雜的 JavaScript 渲染表達式，methods 中的函數，過濾器，v-html 指令。我們會把 template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 文件中，由于微信小程序的能力限制(數據綁定)，所以無法支持復雜的 JavaScript 表達式。目前可以使用的有 + - * % ?: ! == === > < [] .，剩下的還待完善。

<!-- 這種就不支持，建議寫 computed -->
<p>{{ message.split('').reverse().join('') }}</p>
<!-- 但寫在 @event 里面的表達式是都支持的，因為這部分的計算放在了 vdom 里面 -->
<ul>
 <li v-for="item in list">
 <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
 </li>
</ul>

（9）不支持keep-alive、transition

（10）不支持 官方文檔：Class 與 Style 綁定 中的 classObject 和 styleObject 語法。可以用 computed 方法生成 class 或者 style 字符串，從性能考慮，建議不要過度使用

<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>

3、注意事項

（1）開啟單個頁面的“下拉刷新”，你需要在該頁面文件夾中建一個.json文件，在.json文件中配置

{
 "enablePullDownRefresh":true
}

（2）如果你先全局注冊store，你需要先在src/main里添加在注冊到vue實例中：

Vue.prototype.$store = store

（3）底部導航的圖片你需要放在static文件夾下，否則不會正常顯示

（3）精簡 data 數據。冗余數據不要掛在 data 里，所有在 data/props/computed 中的數據，每次變更都會從微信小程序的 JSCore 進程，通過 setData 序列化成字符串后發送到 JSRender 進程。所以，如果你的數據量巨大的時候，會導致頁面非常卡頓。

（4） 優化長列表性能

• 避免在 v-for 中嵌套子組件，這樣可以優化大部分部分 setData 時的冗余數據。
• 通過實踐發現 wx:if 和 hidden 的優化肉眼不可見，所以或許可以試試直接通過樣式 display 來展示和隱藏。

（5）建議使用 v-model.lazy 綁定方式以優化性能，v-model 在老基礎庫下輸入框輸入時可能存在光標重設的問題。

（6）如果你有小程序和H5復用代碼的需要，業務代碼需要保持對 WEB Vue.js 的兼容性，建議不要在代碼中直接調用小程序API，更好的選擇是通過橋接適配層屏蔽兩端差異。

（7）如何捕獲 app 的 onError。由于 onError 并不是完整意義的生命周期，所以只提供一個捕獲錯誤的方法，在 app 的根組件上添加名為 onError 的回調函數即可。如下：

export default {
 // 只有 app 才會有 onLaunch 的生命周期
 onLaunch () {
 // ...
 },
 // 捕獲 app error
 onError (err) {
 console.log(err)
 }
}

二、使用

通過 Vue.js 命令行工具 vue-cli，你只需在終端窗口輸入幾條簡單命令，即可快速創建和啟動一個帶熱重載、保存時靜態檢查、內置代碼構建功能的小程序項目：

npm install --global vue-cli//全局安裝vue-cli，如果你已安裝@vue/cli，你需要拉取2.x模板：npm install -g @vue/cli-int
vue init mpvue/mpvue-quickstart <project name>//創建一個基于 mpvue-quickstart 模板的新項目
cd my-project //進入項目目錄
npm install //安裝依賴
npm run dev //啟動構建

如果使用vue cli 3先拉取 2.x 模板（詳情參考本人博客：https://my.oschina.net/wangnian/blog/2051369）：

然后：安裝npm包，運行

本文出處：王念博客。? 著作權歸作者所有；如有侵權，請聯系刪除。

篇文章給大家帶來的內容是關于mpvue中小程序自定義導航組件開發的介紹（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

這篇筆記主要記錄一下基于mpvue的小程序中實現自定義導航的思路及應用。分享出來拋磚引玉，如有謬誤或優化空間，歡迎交流。

小程序的配置項navigationStyle設置為custom之后，導航欄只保留右上角膠囊按鈕，顏色、標題文字內容均可以自定義，可以此實現導航欄的個性化需求，實際應用如沉浸式視頻播放頁等。

小程序7.0.0之后的版本開始支持自定義單個頁面的導航欄，將頁面的navigationStyle設置為custom即可。mpvue的配置方式如下：

由于不同操作系統、不同機型的導航欄高度是不同的，所以自定義導航欄核心要解決的問題是不同機型中導航欄高度的兼容問題。

如上圖所示，導航欄一共由兩部分組成：狀態欄和標題欄。狀態欄就是用來展示時間、網絡狀態的那一欄，全面屏（劉海屏幕）的機型中狀態欄會比其他屏幕高很多：ios系統帶劉海屏的都是44，其他都為20,包括pad。 而安卓機的數值則更多。我們可以通過微信的apiwx.getSystemInfo獲取狀態欄的高度（statusBarHeight）。而標題欄高度不能通過小程序api獲取到，通過同級多個機型的測試數據，我們基本可以按照ios中44px安卓中48px來算。

這樣一來就好辦了，通過statusBarHeight獲取到狀態欄高度后，再判斷當前的系統加上對應的標題欄后，就可以獲取到正確的導航欄高度了。

template中的html代：（因為小程序中的video組件有著最高的層級，是不會被普通html標簽覆蓋的，所以導航欄組件中全部采用了<cover-view>標簽。）：

<template>

<p class="comp-navbar">

<!-- 占位欄 -->

<cover-view class="placeholder-bar" :style="{height: navBarHeight + 'px'}"> </cover-view>

<!-- 導航欄主體 -->

<cover-view class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}">

<!-- 狀態欄 -->

<cover-view class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></cover-view>

<!-- 標題欄 -->

<cover-view class="nav-titlebar" :style="{height: titleBarHeight + 'px' }">

<!-- home及后退鍵 -->

<cover-view class="bar-options">

<cover-view v-if="backVisible" class="opt opt-back" @click="backClick()">

<cover-image class="back-image" src="/static/images/back.png"></cover-image>

</cover-view>

<cover-view class="line" v-if="backVisible && homePath"></cover-view>

<cover-view v-if="homePath" class="opt opt-home" @click="homeClick()">

<cover-image class="home-image" src="/static/images/home.png"></cover-image>

</cover-view>

</cover-view>

<!-- 標題 -->

<cover-view class="bar-title" :style="[{color:titleColor}]">{{title}}</cover-view>

</cover-view>

</cover-view>

</p>

</template>

js代碼：

beforeMount() {

const self = this;

wx.getSystemInfo({

success(system) {

console.log(`system:`, system);

self.statusBarHeight = system.statusBarHeight;

self.platform = system.platform;

let platformReg = /ios/i;

if (platformReg.test(system.platform)) {

self.titleBarHeight = 44;

} else {

self.titleBarHeight = 48;

}

self.navBarHeight = self.statusBarHeight + self.titleBarHeight;

}

});

},

自定義導航欄的可自定義內容：標題文字、文字顏色、標題欄背景色、回退按鈕是否顯示、home按鈕的地址。示例代碼如下：

<navigation-bar :title="videoTitle"

:navBackgroundColor="'pink'"

:titleColor="'green'"

:back-visible="true"

:home-path="'/pages/index/main'"></navigation-bar>

本文參考：微信小程序開發基礎教程 https://www.html.cn/study/20.html

以上就是mpvue中小程序自定義導航組件開發的介紹（代碼示例）的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！