這次帶給大家mpvue開發小程式步驟詳解，mpvue開發小程式的注意事項有哪些，下面就是實戰案例，一起來看一下。
除了Vue本身的生命週期處，mpvue也相容了小程式的生命週期，這部分生命週期的鉤子來自微信小程式的Page,除特殊情況外，不建議使用小程式的生命週期鉤子。
app 部分：
onLaunch，初始化
onShow，當小程式啟動，或從後台進入前台顯示
onHide，當小程式從前台進入後台
##page 部分：
- onLoad，監聽頁面載入
- onShow，監聽頁面顯示
- onReady，監聽頁面初次渲染完成
- onHide，監聽頁面隱藏
- onUnload，監聽頁面卸載
- onPullDownRefresh，監聽用戶下拉動作
- onReachBottom，頁面上拉觸底事件的處理函數
- onShareAppMessage，使用者點擊右上角分享
- #onPageScroll，當頁面捲動
- onTabItemTap, 目前是tab 頁時，點選tab 時觸發（mpvue 0.0.16 支援）
#用法範例：
new Vue({
data: {
a: 1
},
created () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
},
onShow () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a, '小程序触发的 onshow')
}
})
// => "a is: 1"登入後複製
注意點：
- #不要在選項屬性或回呼上使用箭頭函數，例如created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this不會是如你做預期的 Vue 實例，而 this.a 或 this.myMethod 也會是未定義的。
- 微信小程式的頁面的query 參數是透過onLoad 取得的，mpvue 對此進行了最佳化，直接透過
this.$root.$mp.query取得對應的參數數據，其呼叫需要在onLoad 生命週期觸發之後使用，例如onShow 等
二、模板語法
不支援純-HTML
小程式裡所有的BOM/DOM 都不能用，也就是說v-html 指令不能用。
不支援部分複雜的JavaScript 渲染表達式
我們會把template 中的{{}} 雙花括號的部分，直接編碼到wxml 檔案中，由於微信小程式的能力限制(
資料綁定)，所以無法支援複雜的JavaScript 表達式。
目前可以使用的有 - * % ?: ! == === > < [] .，剩下的還有待完善。
不支援過濾器
渲染部分會轉換成 wxml ，wxml 不支援過濾器，所以這部分功能不支援。
不支援函數
不支援在 template 內使用 methods 中的函數。
列表渲染
全支援官方文件：列表渲染
#只是需要注意一點，
嵌套列表渲染，必須指定不同的索引！
<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
<ul v-for="(card, index) in list">
<li v-for="(item, itemIndex) in card">
{{item.value}}
</li>
</ul>
</template><h3 style="text-align: left;"><strong>事件處理<a href="http://www.php.cn/code/5688.html" target="_blank">器</a></strong></h3>#在 input 和 textarea 中 change 事件會被轉為 blur 事件。 <p style="text-align: left;"></p>
<h4 style="text-align: left;">踩坑注意：<strong></strong>
</h4>
<ul class=" list-paddingleft-2">
<li>清單中沒有的原生事件也可以使用例如bindregionchange 事件直接在dom 上將bind改為@<p style="text-align: left;"> @regionchange,同時這個事件也非常特殊，它的event type 有begin 和end<br> 兩個，導致我們無法在handleProxy 中區分到底是什麼事件，所以你在監聽此類事件的時候同時監聽事件名和事件類型既<br></p>
<pre class="brush:php;toolbar:false"> <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>登入後複製
小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。
事件修饰符
- .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！
登入後複製
.prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面
.capture 支持 1.0.9
.self 没有可以判断的标识
.once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑
其他 键值修饰符 等在小程序中压根没键盘，所以。。。
三、组件
有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和
