淺談使用mpvue開發(fā)小程序需要注意和了解的知識(shí)點(diǎn)

一、實(shí)例生命周期

公司主營(yíng)業(yè)務(wù)：網(wǎng)站制作、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出欒城免費(fèi)做網(wǎng)站回饋大家。

除了Vue本身的生命周期處，mpvue還兼容了小程序的生命周期，這部分生命周期的鉤子來源于微信小程序的Page,除特殊情況外，不建議使用小程序的生命周期鉤子。

app 部分：

onLaunch，初始化
onShow，當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示
onHide，當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)

page 部分：

onLoad，監(jiān)聽頁(yè)面加載
onShow，監(jiān)聽頁(yè)面顯示
onReady，監(jiān)聽頁(yè)面初次渲染完成
onHide，監(jiān)聽頁(yè)面隱藏
onUnload，監(jiān)聽頁(yè)面卸載
onPullDownRefresh，監(jiān)聽用戶下拉動(dòng)作
onReachBottom，頁(yè)面上拉觸底事件的處理函數(shù)
onShareAppMessage，用戶點(diǎn)擊右上角分享
onPageScroll，頁(yè)面滾動(dòng)
onTabItemTap, 當(dāng)前是 tab 頁(yè)時(shí)，點(diǎn)擊 tab 時(shí)觸發(fā) （mpvue 0.0.16 支持）

用法示例：

new Vue({
 data: {
  a: 1
 },
 created () {
  // `this` 指向 vm 實(shí)例
  console.log('a is: ' + this.a)
 },
 onShow () {
  // `this` 指向 vm 實(shí)例
  console.log('a is: ' + this.a, '小程序觸發(fā)的 onshow')
 }
})
// => "a is: 1"

注意點(diǎn)：

不要在選項(xiàng)屬性或回調(diào)上使用箭頭函數(shù)，比如 created: () => console.log(this.a) 或vm.$watch('a', newValue => this.myMethod())。因?yàn)榧^函數(shù)是和父級(jí)上下文綁定在一起的，this不會(huì)是如你做預(yù)期的 Vue 實(shí)例，且 this.a 或 this.myMethod 也會(huì)是未定義的。
微信小程序的頁(yè)面的 query 參數(shù)是通過 onLoad 獲取的，mpvue 對(duì)此進(jìn)行了優(yōu)化，直接通過this.$root.$mp.query 獲取相應(yīng)的參數(shù)數(shù)據(jù)，其調(diào)用需要在 onLoad 生命周期觸發(fā)之后使用，比如 onShow 等

二、模板語法

不支持純-HTML

小程序里所有的 BOM／DOM 都不能用，也就是說 v-html 指令不能用。

不支持部分復(fù)雜的 JavaScript 渲染表達(dá)式

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

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

不支持過濾器

渲染部分會(huì)轉(zhuǎn)成 wxml ，wxml 不支持過濾器，所以這部分功能不支持。

不支持函數(shù)

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

列表渲染

全支持官方文檔：列表渲染

只是需要注意一點(diǎn)，嵌套列表渲染，必須指定不同的索引！

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

事件處理器

在 input 和 textarea 中 change 事件會(huì)被轉(zhuǎn)為 blur 事件。

踩坑注意：

列表中沒有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上將bind改為@
@regionchange,同時(shí)這個(gè)事件也非常特殊，它的 event type 有 begin 和 end
兩個(gè)，導(dǎo)致我們無法在handleProxy 中區(qū)分到底是什么事件，所以你在監(jiān)聽此類事件的時(shí)候同時(shí)監(jiān)聽事件名和事件類型既

復(fù)制代碼代碼如下:

<map @regionchange="functionName" @end="functionName" @begin="functionName"><map>

小程序能力所致，bind 和 catch 事件同時(shí)綁定時(shí)候，只會(huì)觸發(fā) bind ,catch 不會(huì)被觸發(fā)，要避免踩坑。

事件修飾符

.stop 的使用會(huì)阻止冒泡，但是同時(shí)綁定了一個(gè)非冒泡事件，會(huì)導(dǎo)致該元素上的 catchEventName 失效！

.prevent 可以直接干掉，因?yàn)樾〕绦蚶餂]有什么默認(rèn)事件，比如submit并不會(huì)跳轉(zhuǎn)頁(yè)面

.capture 支持 1.0.9

.self 沒有可以判斷的標(biāo)識(shí)

.once 也不能做，因?yàn)樾〕绦驔]有 removeEventListener, 雖然可以直接在 handleProxy 中處理，但非常的不優(yōu)雅，違背了原意，暫不考慮

其他鍵值修飾符等在小程序中壓根沒鍵盤，所以。。。

三、組件

有且只能使用單文件組件（.vue 組件）的形式進(jìn)行支持。其他的諸如：動(dòng)態(tài)組件，自定義 render，和<script type="text/x-template"> 字符串模版等都不支持。原因很簡(jiǎn)單，因?yàn)槲覀円A(yù)編譯出 wxml。

詳細(xì)的不支持列表：

暫不支持在組件引用時(shí)，在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：<card class="class-name"> </card> 樣式是不會(huì)生效的)，因?yàn)榫幾g到wxml，小程序不會(huì)生成節(jié)點(diǎn)，建議寫在內(nèi)部頂級(jí)元素上。
Slot（scoped 暫時(shí)還沒做支持）
動(dòng)態(tài)組件
異步組件
inline-template
X-Templates
keep-alive
transition
class
style

小程序組件

mpvue 可以支持小程序的原生組件，比如： picker,map 等，需要注意的是原生組件上的事件綁定，需要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，需要寫成 @change="eventName"

示例代碼：

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
  <view class="picker">
   當(dāng)前選擇: {{date}}
  </view>
</picker>

四、常見問題

1. 如何獲取小程序在 page onLoad 時(shí)候傳遞的 options

在所有頁(yè)面的組件內(nèi)可以通過 this.$root.$mp.query 進(jìn)行獲取。

2. 如何獲取小程序在 app onLaunch/onShow 時(shí)候傳遞的 options

在所有的組件內(nèi)可以通過 this.$root.$mp.appOptions 進(jìn)行獲取。

3. 如何捕獲 app 的 onError

由于 onError 并不是完整意義的生命周期，所以只提供一個(gè)捕獲錯(cuò)誤的方法，在 app 的根組件上添加名為 onError 的回調(diào)函數(shù)即可。如下：

export default {
  // 只有 app 才會(huì)有 onLaunch 的生命周期
  onLaunch () {
    // ...
  },

  // 捕獲 app error
  onError (err) {
    console.log(err)
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：淺談使用mpvue開發(fā)小程序需要注意和了解的知識(shí)點(diǎn)
文章路徑：http://www.jbt999.com/article4/jispoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、定制開發(fā)、移動(dòng)網(wǎng)站建設(shè)、建站公司、App設(shè)計(jì)、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容