小程序事件详解

JLKVJ • 2025-04-12 13:00 • 编程

一、小程序事件概述

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

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

小程序生命周期事件定义在小程序页面的js文件中，用于监听小程序运行期间不同事件的触发，从而可以在相应时间点进行相关操作。

onLoad是页面组件首次加载时触发的事件，此时页面显示但数据未渲染。

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

onShow是每次进入页面都会触发的事件，此时页面显示并开始数据渲染。

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

onReady是页面初次渲染完成时触发的事件，此时页面已经可以和用户进行交互了。

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

onHide是当页面隐藏时触发的事件，可以用于进行一些页面数据保存、清理等操作。

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

onUnload是当页面卸载时触发的事件，可以用于进行一些页面数据保存、清理等操作。

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

小程序组件事件是指小程序中各种组件的相关事件，如button组件的tap事件、input组件的input和focus事件等。

tap事件是指当用户点击某个组件时触发的事件。

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

input事件是指当用户在input组件中输入时触发的事件。

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

touchstart事件是指当手指触摸组件时触发的事件。

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

小程序事件传递是指将事件从子组件传递到父组件或者从父组件传递到子组件的操作。

可以使用bind方法将父组件中的方法绑定到子组件中。

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

可以使用triggerEvent方法触发子组件中的自定义事件，并传递参数到父组件中。

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

原创文章，作者：JLKVJ，如若转载，请注明出处：https://www.506064.com/n/368729.html