微信小程序生命周期和事件处理

等一场梦

于 2024-06-02 18:42:33 发布

阅读量103

点赞数 3

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_74599628/article/details/139395293

版权

五. 事件处理

5.1 事件绑定

bind:事件类型=事件回调 / bind事件类型=事件回调

<!-- 按钮的点击事件的监听 
 bind(绑定,监听) tap(事件类型)  tap 轻击
 bing:tap / bingtap 
-->
<button type="primary" bindtap="onBtn" data-info="⭐"
 >click me</button>

小程序中使用 bind 进行事件的绑定 , 且在绑定的事件函数中, 是不可以传参的 , 所有只能使用其他的方式传参

事件传参

<!-- 小程序中的事件传参
 传参: data-*(自定义参数名)
       mark: * 
-->
<button bindtap="onBtn"  data-id="{{index}}" mark:f2="f2">事件传参</button>

data- 自定义参数名=“值”
mark : 自定义参数名=“值”

参数接收

小程序里面的参数是用事件对象完成接收的

data - * 传递的参数是在 e.target.dataset中

mark: * 传递的参数是在 e.mark 中

page({
  onBtn(e){
    // 参数接收 e.target.dataset.info
    console.log(e);
  },
})

5.2 常用的通用事件

bindtap 点击事件
bindlongpress 长按事件
bindinput 键盘输入事件
bindconfirm 回车事件
bindfocus 输入框聚焦事件
bindblur 输入框失焦事件
bindchange value 改变事件
bindsubmit 表单提交事件
bindreset 重置表单事件

5.3 组件事件

前面介绍的 tap 事件可以在绝大部分组件是监听，我们可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，我们将其称为组件事件。

scroll-view 组件中的事件：

bind:scrolltolower 当滚动内容到达底部或最右侧时触发
bind:refresherrefresh 执行下拉操作时触发
refresher-enable 启用自定义下拉刷新

表单组件中的事件：

change 表单数据发生改变时触发（input 不支持）
submit 表单提交时触发，button 按钮必须指定 form-type 属性

六. 生命周期

生命周期是一些名称固定自动执行的函数。

6.1 页面生命周期

onLoad 在页面加载时触发，一个页面只会执行 1 次，常用于获取地址参数和网络请求
- 参数 options 接收的是传递到当前页面路径中的参数
onShow 页面显示/切入前台时触发，常用于动态更新数据或状态
onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景
onHide 在页面隐藏/切入后台时触发，常用于销毁长时间运行的任务，如定时器
onUnload 页面卸载时触发

6.2 组件生命周期

小程序自定义组件的生命周期需要定义在 lifetimes 中：

Component({
  //组件生命周期
  lifetimes: {}
})

created 在组件初步创建时执行，注意此时不能调用 setData
attached 在组件完成页面初始化的时候执行
ready 在组件布局完成后执行
detached 在组件被销毁的时候触发

6.3 小程序生命周期

小程序的生命周期定义在app.js里面

App({
  /*当小程序初始化完成时，会触发 onLaunch（全局只触发一次）*/
  onLaunch: function () {
    console.log('小程序启动了')
  },
  /* 当小程序启动，或从后台进入前台显示，会触发 onShow*/
  onShow: function (options) {
    console.log('小程序显示了',options)
  },
  /*当小程序从前台进入后台，会触发 onHide */
  onHide: function () {
    console.log('小程序隐藏了')
  },
  /* 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息*/
  onError: function (msg) {}
})