小程序事件详解

一、小程序事件概述

小程序事件是指在小程序中发生的各种动作和状态的变化。它贯穿整个小程序生命周期，监听用户的操作，触发相应的回调函数来执行相应的操作，实现小程序的各种功能。

在小程序框架中，事件主要包括生命周期事件和组件事件。生命周期事件主要是指小程序运行期间的各种事件，如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)
  }
})