专业小程序设计开发——助力新电商新零售
电话+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");
}
}
})
二、说说微信小程序的生命周期函数有哪些?
微信小程序的生命周期函数包括应用、页面和组件的生命周期，它们分别在特定阶段自动触发相应的函数以管理小程序的运行流程。
应用的生命周期
onLaunch：小程序初始化完成后触发，仅执行一次。
onShow：小程序启动或从后台转前台显示时触发。
onHide：小程序从前台转到后台时触发。
onError：脚本错误或API调用出错时执行。
onPageNotFound：尝试打开的页面不存在时触发。
onUnhandledRejection：有未处理的Promise拒绝时触发。
onThemeChange：系统主题切换时触发。
页面的生命周期
onLoad：页面加载时，用于请求数据。
onShow：页面显示时，可以继续请求数据。
onReady：页面初次渲染完成，可用于获取页面元素，但应尽量减少。
onHide：页面隐藏时，应停止不必要的任务，如定时器或音乐播放。
onUnload：页面卸载时，同样终止任务。
组件的生命周期
created：组件加载时执行。
attached：组件显示时执行。
ready：组件渲染完成时执行。
moved：组件隐藏时执行。
detached：组件卸载时执行。
error：组件方法抛出错误时执行。
页面相关生命周期
show：页面被展示时执行。
hide：页面被隐藏时执行。
在应用和页面生命周期同时存在时，它们的执行顺序遵循相关逻辑。了解这些函数有助于优化小程序的性能和用户体验。
微信小程序开发极简入门（六）：单选框多选框的Button实现
2024-12-30 10:18·Java个人学习心得
本来不想涉及组件、样式相关内容的，罗列组件、属性有点水内容的意思（不如看官方文档），再加上我只是一个人的老后端，审美很差，也没美术资源。但是这节内容来自于实际工作中的需求，个人又觉得很有意思，感觉应该会有人遇到相关的问题，就记录下来。我们在实际项目中，有不少表单内容要提交，会用到单选（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
专注于小程序推广配套流程服务方案。为企业及个人客户提供了高性价比的运营方案，解决小微企业和个体拓展客户的问题
