真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

一、實例生命周期

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

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

app 部分:

  1. onLaunch,初始化
  2. onShow,當小程序啟動,或從后臺進入前臺顯示
  3. onHide,當小程序從前臺進入后臺

page 部分:

  1. onLoad,監(jiān)聽頁面加載
  2. onShow,監(jiān)聽頁面顯示
  3. onReady,監(jiān)聽頁面初次渲染完成
  4. onHide,監(jiān)聽頁面隱藏
  5. onUnload,監(jiān)聽頁面卸載
  6. onPullDownRefresh,監(jiān)聽用戶下拉動作
  7. onReachBottom,頁面上拉觸底事件的處理函數(shù)
  8. onShareAppMessage,用戶點擊右上角分享
  9. onPageScroll,頁面滾動
  10. onTabItemTap, 當前是 tab 頁時,點擊 tab 時觸發(fā) (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, '小程序觸發(fā)的 onshow')
 }
})
// => "a is: 1"

注意點:

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

二、模板語法

不支持 純-HTML

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

不支持部分復雜的 JavaScript 渲染表達式

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

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

不支持過濾器

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

不支持函數(shù)

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

列表渲染

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

只是需要注意一點,嵌套列表渲染,必須指定不同的索引!



事件處理器

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

踩坑注意:

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

復制代碼 代碼如下:

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

事件修飾符

.stop 的使用會阻止冒泡,但是同時綁定了一個非冒泡事件,會導致該元素上的 catchEventName 失效!

.prevent 可以直接干掉,因為小程序里沒有什么默認事件,比如submit并不會跳轉(zhuǎn)頁面

.capture 支持 1.0.9

.self 沒有可以判斷的標識

.once 也不能做,因為小程序沒有 removeEventListener, 雖然可以直接在 handleProxy 中處理,但非常的不優(yōu)雅,違背了原意,暫不考慮

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

三、組件

有且只能使用單文件組件(.vue 組件)的形式進行支持。其他的諸如:動態(tài)組件,自定義 render,和