mpvue開發小程式步驟詳解

這次帶給大家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"

注意點：

1. #不要在選項屬性或回呼上使用箭頭函數，例如created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。因為箭頭函數是和父級上下文綁定在一起的，this不會是如你做預期的 Vue 實例，而 this.a 或 this.myMethod 也會是未定義的。

2. 微信小程式的頁面的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>
        <li>
            {{item.value}}
        </li>
    </ul>
</template>

事件處理器

#在 input 和 textarea 中 change 事件會被轉為 blur 事件。

踩坑注意：

• 清單中沒有的原生事件也可以使用例如bindregionchange 事件直接在dom 上將bind改為@

   @regionchange,同時這個事件也非常特殊，它的event type 有begin 和end
   兩個，導致我們無法在handleProxy 中區分到底是什麼事件，所以你在監聽此類事件的時候同時監聽事件名和事件類型既
  

     <map><map></map></map>

• 小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑。

• 事件修饰符

  - .stop 的使用会阻止冒泡，但是同时绑定了一个非冒泡事件，会导致该元素上的 catchEventName 失效！

• .prevent 可以直接干掉，因为小程序里没有什么默认事件，比如submit并不会跳转页面

• .capture 支持 1.0.9

• .self 没有可以判断的标识

• .once 也不能做，因为小程序没有 removeEventListener, 虽然可以直接在 handleProxy 中处理，但非常的不优雅，违背了原意，暂不考虑

• 其他 键值修饰符 等在小程序中压根没键盘，所以。。。

三、组件

有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render，和

详细的不支持列表：

• 暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例： 样式是不会生效的)，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上。

• Slot（scoped 暂时还没做支持）

• 动态组件

• 异步组件

• inline-template

• X-Templates

• keep-alive

• transition

• class

• style

小程序组件

mpvue 可以支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

示例代码：

<picker>
    <view>
      当前选择: {{date}}
    </view>
</picker>

四、常见问题

1. 如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.$root.$mp.query 进行获取。

2. 如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

3. 如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端中排序算法实例详解

JS中使用接口步骤详解

以上是mpvue開發小程式步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！