小程序事件詳解

一、小程序事件概述

小程序事件是指在小程序中發生的各種動作和狀態的變化。它貫穿整個小程序生命周期，監聽用戶的操作，觸發相應的回調函數來執行相應的操作，實現小程序的各種功能。

在小程序框架中，事件主要包括生命周期事件和組件事件。生命周期事件主要是指小程序運行期間的各種事件，如onLoad、onShow、onUnload等。組件事件主要是指小程序中組件的各種事件，如tap、input、touchstart等。

二、小程序生命周期事件

小程序生命周期事件定義在小程序頁面的js文件中，用於監聽小程序運行期間不同事件的觸發，從而可以在相應時間點進行相關操作。

1. onLoad

onLoad是頁面組件首次加載時觸發的事件，此時頁面顯示但數據未渲染。

Page({
  onLoad: function(options) {
    console.log('onLoad執行', options)
  }
})

2. onShow

onShow是每次進入頁面都會觸發的事件，此時頁面顯示並開始數據渲染。

Page({
  onShow: function() {
    console.log('onShow執行')
  }
})

3. onReady

onReady是頁面初次渲染完成時觸發的事件，此時頁面已經可以和用戶進行交互了。

Page({
  onReady: function() {
    console.log('onReady執行')
  }
})

4. onHide

onHide是當頁面隱藏時觸發的事件，可以用於進行一些頁面數據保存、清理等操作。

Page({
  onHide: function() {
    console.log('onHide執行')
  }
})

5. onUnload

onUnload是當頁面卸載時觸發的事件，可以用於進行一些頁面數據保存、清理等操作。

Page({
  onUnload: function() {
    console.log('onUnload執行')
  }
})

三、小程序組件事件

小程序組件事件是指小程序中各種組件的相關事件，如button組件的tap事件、input組件的input和focus事件等。

1. tap

tap事件是指當用戶點擊某個組件時觸發的事件。

Page({
  onTap: function(event) {
    console.log('tap執行', event)
  }
})

2. input

input事件是指當用戶在input組件中輸入時觸發的事件。

Page({
  onInput: function(event) {
    console.log('input執行', event)
  }
})

3. touchstart

touchstart事件是指當手指觸摸組件時觸發的事件。

Page({
  onTouchStart: function(event) {
    console.log('touchstart執行', event)
  }
})

四、小程序事件傳遞

小程序事件傳遞是指將事件從子組件傳遞到父組件或者從父組件傳遞到子組件的操作。

1. 父組件向子組件傳遞事件

可以使用bind方法將父組件中的方法綁定到子組件中。

Page({
  handleParentEvent: function(event) {
    console.log('父組件事件', event)
  }
})

2. 子組件向父組件傳遞事件

可以使用triggerEvent方法觸發子組件中的自定義事件，並傳遞參數到父組件中。

Component({
  handleChildEvent: function(event) {
    this.triggerEvent('childevent', event.detail)
  }
})