微信小程序中的生命周期函数有哪些

专业小程序设计开发——助力新电商新零售

电话+V：159999-78052，欢迎咨询微信小程序中的生命周期函数有哪些，[小程序设计与开发]，[小程序投流与推广]，[小程序后台搭建]，[小程序整套源码打包]，[为个体及小微企业助力]，[电商新零售模式]，[小程序运营推广及维护]

一、微信小程序开发中组件的生命周期详细介绍

在微信小程序开发中，组件的生命周期是一个关键概念，它描述了组件在不同阶段的行为。组件的生命周期由一系列函数组成，这些函数在特定的时间点或事件触发时被自动调用。主要的生命周期函数包括created、attached、ready、moved、detached和error。这些函数分别在组件实例被创建、插入页面节点树、视图层布局完成、移动到另一节点位置、从页面节点树移除或组件方法抛出错误时执行。

小程序组件的生命周期函数执行顺序并不固定，ready和detached之间没有明确的先后关系。最重要的生命周期函数有三个：created、attached和detached。当组件实例被创建时，created函数被触发，此时不能调用setData，主要用于添加自定义属性。attached函数在组件初始化完毕、进入页面节点树时触发，此时可以初始化this.data，进行数据请求等操作。detached函数在组件离开页面节点树时触发，适合执行清理工作。

生命周期函数可以定义在Component构造器的第一级参数中，也可以在lifetimes字段内声明，推荐使用lifetimes字段，因为其优先级最高。例如，可以这样定义：

Component({

lifetimes:{

created(){

console.log('created');

}，

attached(){

console.log('attached');

}

}

})

需要注意的是，若lifetimes节点未定义，同时存在其他生命周期函数，则优先执行lifetimes节点中的函数，并覆盖掉其他生命周期函数。

另外，组件所在页面的生命周期函数同样重要，它们定义了页面状态变化时组件的行为。页面生命周期函数包括show、hide和resize，分别在页面展示、隐藏和尺寸变化时触发。这些函数在pageLifetimes节点中定义，如下所示：

Component({

pageLifetimes:{

show(){

console.log("show!!");

}，

hide(){

console.log("hide!!");

}，

resize(){

console.log("resize");

}

}

})

二、说说微信小程序的生命周期函数有哪些?

微信小程序的生命周期函数包括应用、页面和组件的生命周期，它们分别在特定阶段自动触发相应的函数以管理小程序的运行流程。

应用的生命周期

页面的生命周期

组件的生命周期

页面相关生命周期

在应用和页面生命周期同时存在时，它们的执行顺序遵循相关逻辑。了解这些函数有助于优化小程序的性能和用户体验。

微信小程序开发极简入门（六）：单选框多选框的Button实现

本来不想涉及组件、样式相关内容的，罗列组件、属性有点水内容的意思（不如看官方文档），再加上我只是一个人的老后端，审美很差，也没美术资源。

但是这节内容来自于实际工作中的需求，个人又觉得很有意思，感觉应该会有人遇到相关的问题，就记录下来。

我们在实际项目中，有不少表单内容要提交，会用到单选（radio）、多选（checkbox），选择器（picker）等，但是这些组件，对于老年人来说，看起来、操作起来还是蛮困难的。

我们在一个APP上做适老化适配的时候，将一些组件Button化，长辈们用起来相对就比较舒服。

JS如下：

Page({data:{buttons:[{id:1，name:'08:00~10:00'，checked:false}，{id:2，name:'10:00~12:00'，checked:false}，{id:3，name:'12:00~14:00'，checked:false}，{id:4，name:'14:00~16:00'，checked:false}]，chooseIds:[]，chooseId:0，msg:''}/***生命周期函数--监听页面加载*/onLoad(){//如果是单选框，一般而言最少有一项是必选的，可以如下设置//this.data.buttons[0].checked=true;//this.data.chooseId=this.data.buttons[0].id;this.setData({buttons:this.data.buttons})}，//单选radioChoose:function(e){letid=e.currentTarget.dataset.idfor(leti=0;i<this.data.buttons.length;i++){/***当前点击的Button设置为选中，其他为未选中。*如果可以取消选中，要额外处理一下，取反即可。*但是一般项目中，单选的数据，至少有一个是必选项。*所以本例就不实现了*/this.data.buttons[i].id==id?this.data.buttons[i].checked=true:this.data.buttons[i].checked=false;}this.setData({buttons:this.data.buttons，chooseId:id，msg:"id:"+id})}，//多选checkboxChoose:function(e){letid=e.currentTarget.dataset.idletchooseIds=this.data.chooseIds;for(leti=0;i<this.data.buttons.length;i++){if(this.data.buttons[i].id!=id){continue;}//多选，可以是选中也可以是取消选中，状态取反即可this.data.buttons[i].checked=!this.data.buttons[i].checked//选中if(this.data.buttons[i].checked){//将id放入全局id数组chooseIds.push(id)//去重。其实没啥必要，就是展示一下数组如何去重chooseIds=Array.from(newSet(chooseIds));}else{//取消选中，将id从全局id数组中删除letidIdx=chooseIds.findIndex(chooseId=>chooseId===id)if(idIdx!=-1){chooseIds.splice(idIdx，1)}}}//数组排序。其实也没啥必要chooseIds.sort()this.setData({buttons:this.data.buttons，msg:"id:"+chooseIds，chooseIds:chooseIds})}})WXML如下：

<blockwx:for="{{buttons}}"wx:key="buttons"><viewclass="griditem"><buttonclass='{{item.checked?"checked_btn":"unchecked_btn"}}'data-id='{{item.id}}'bind:tap='checkboxChoose'>{{item.name}}</button></view></block><text>选中{{msg}}</text>bind:tap，如果是单选就设置radioChoose，多选设置checkboxChoose。

【WINDRISES MINIPROGRAM PROMOTION】尊享直接对接老板

电话+V： 159999-78052

专注于小程序推广配套流程服务方案。为企业及个人客户提供了高性价比的运营方案，解决小微企业和个体拓展客户的问题