搜尋

首頁 >web前端 >js教程 >mpvue開發小程式步驟詳解

mpvue開發小程式步驟詳解

php中世界最好的语言
php中世界最好的语言原創
2018-05-24 15:05:582758瀏覽

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