一、生命周期(微信小程序开发【有基础】-组件篇)
1.小程序生命周期
-
onLaunch:小程序初始化完成,全局只触发一次
- onShow:当小程序启动,或从后台进入前台时触发
- onHide:前台进入后台时触发
- onError:小程序发生错误时触发
- 其他:详见 官方开发手册(小程序生命周期)
app.js:
1 App({ 2 onLaunch() { 3 console.log("小程序初始化完成,全局只触发一次"); 4 }, 5 onShow() { 6 console.log("当小程序启动,或从后台进入前台时触发"); 7 }, 8 onHide() { 9 console.log("前台进入后台时触发"); 10 }, 11 onError() { 12 console.log("小程序发生错误时触发"); 13 } 14 })
2.页面生命周期
-
onLoad:监听页面加载
-
onReady:页面初次渲染完成
-
onShow:页面显示
-
onHide:页面隐藏
-
onUnload:页面卸载
index.js(页面js文件):
1 /** 2 * 生命周期函数--监听页面加载 3 */ 4 onLoad(options) { 5 console.log("页面生命周期:加载中..."); 6 }, 7 8 /** 9 * 生命周期函数--监听页面初次渲染完成 10 */ 11 onReady() { 12 console.log("页面生命周期:页面初次渲染完成"); 13 }, 14 15 /** 16 * 生命周期函数--监听页面显示 17 */ 18 onShow() { 19 console.log("页面生命周期:页面显示"); 20 }, 21 22 /** 23 * 生命周期函数--监听页面隐藏 24 */ 25 onHide() { 26 console.log("页面生命周期:页面隐藏"); 27 }, 28 29 /** 30 * 生命周期函数--监听页面卸载 31 */ 32 onUnload() { 33 console.log("页面生命周期:页面卸载"); 34 }
3.页面事件处理函数
- onPullDownRefresh:监听用户下拉动作
- onReachBottom:页面上拉触底事件的处理函数
- onShareAppMessage:用户点击右上角分享
- onResize:页面大小发生变化
- 其他:详见 官方开发手册(页面事件处理函数)
index.js(页面js文件):
1 /** 2 * 页面相关事件处理函数--监听用户下拉动作 3 */ 4 onPullDownRefresh() { 5 console.log("页面相关事件处理函数:用户下拉动作"); 6 }, 7 8 /** 9 * 页面上拉触底事件的处理函数 10 */ 11 onReachBottom() { 12 console.log("页面相关事件处理函数:页面上拉触底"); 13 }, 14 15 /** 16 * 用户点击右上角分享 17 */ 18 onShareAppMessage() { 19 console.log("页面相关事件处理函数:用户点击右上角分享"); 20 }, 21 /** 22 * 页面大小发生变化 23 */ 24 onResize(){ 25 console.log("页面相关事件处理函数:页面大小发生变化"); 26 }
4.整个小程序只有一个 App 实例,是全部页面共享的。可通过 getApp
方法获取到全局唯一的 App 实例,获取App上的数据或调用注册在 App
上的函数。
app.js:
1 /** 2 * 定义在app.js的数据 3 */ 4 App({ 5 object:{ 6 data:"全局" 7 } 8 })
index.js(页面js文件):
1 /** 2 * 获取App实例 3 */ 4 const app = getApp(); 5 6 Page({ 7 /** 8 * 生命周期函数--监听页面加载 9 */ 10 onLoad(options) { 11 console.log(app.object.data); 12 }, 13 })
分类:
微信小程序开发-组件篇
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端