✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。
🍎个人主页:Java Fans的博客
🍊个人信条:不迁怒,不贰过。小知识,大智慧。
💞当前专栏:微信小程序学习分享
✨特色专栏:国学周更-心性养成之路
🥭本文内容:微信小程序------使用 Vant 组件实现 Popup 弹出层(各位置弹出详细代码分享)
文章目录
一、生命周期分类
小程序中的生命周期函数可以分为两类:应用生命周期和页面生命周期。
1、应用生命周期
定义: 小程序的生命周期函数是在app.js中调用,通过App(Object)函数用来注册一个小程序,指定其小程序的生命周期回调。
- onLaunch:
小程序初始化时触发,只执行一次。可以做一些全局的初始化操作。
- onShow:
小程序启动或从后台进入前台时触发。可以在此进行页面状态的更新或数据的初始化。
- onHide:
小程序从前台进入后台时触发。可以在此做一些资源释放或数据保存的操作。
- onError:
小程序发生脚本错误或 API 调用失败时触发。
在应用生命周期中,onLaunch是小程序初始化的入口函数,而onShow和onHide则是用来处理小程序的前后台切换。onError用于处理小程序中的错误,比如脚本错误或 API 调用失败等。
2、页面生命周期
- onLoad:
页面加载时触发,只执行一次。可以在此进行页面初始化的操作,比如发送网络请求获取数据。
- onShow:
页面被显示时触发,可以用来进行页面状态更新。
- onReady:
页面初次渲染完成时触发,表示页面已经准备好,可以和视图层进行交互。
- onHide:
页面被隐藏时触发,可以做一些资源释放或数据保存的操作。
- onUnload:
页面被关闭时触发,可以做一些清理工作。
在页面生命周期中,onLoad和onReady是页面的初始化阶段,onShow和onHide用于在页面显示和隐藏时进行响应,而onUnload则是在页面被完全关闭时触发。
二、生命周期案例详解
1、应用生命周期函数案例
- onLaunch:
该函数在小程序初始化时触发,只执行一次。
可以在此进行全局的初始化操作,比如获取用户信息、登录等。
示例代码:
javascript
App({
onLaunch: function() {
// 小程序初始化时执行的操作
console.log("小程序初始化");
// 获取用户信息
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo);
}
});
}
})
- onShow:
该函数在小程序启动或从后台进入前台时触发。
可以在此进行页面状态的更新或数据的初始化。
示例代码:
javascript
App({
onShow: function() {
// 小程序启动或从后台进入前台时执行的操作
console.log("小程序显示");
// 更新用户状态
this.globalData.isLogin = true;
}
})
- onHide:
该函数在小程序从前台进入后台时触发。
可以在此做一些资源释放或数据保存的操作。
示例代码:
javascript
App({
onHide: function() {
// 小程序从前台进入后台时执行的操作
console.log("小程序隐藏");
// 保存数据
wx.setStorageSync('data', this.globalData.data);
}
})
- onError:
该函数在小程序发生脚本错误或 API 调用失败时触发。
可以在此做错误处理或日志记录。
示例代码:
javascript
App({
onError: function(err) {
// 小程序发生错误时执行的操作
console.log("小程序出错", err);
// 记录日志
wx.reportAnalytics('error', {
message: err.message,
stack: err.stack
});
}
})
2、页面生命周期函数案例
- onLoad:
该函数在页面加载时触发,只执行一次。
可以在此进行页面初始化的操作,比如发送网络请求获取数据。
示例代码:
javascript
Page({
onLoad: function(options) {
// 页面加载时执行的操作
console.log("页面加载");
// 发送网络请求
wx.request({
url: 'https://api.example.com/data',
success: function(res) {
console.log(res.data);
}
});
}
})
- onShow:
该函数在页面被显示时触发。
可以用来进行页面状态更新。
示例代码:
javascript
插入代码
复制代码
Page({
onShow: function() {
// 页面显示时执行的操作
console.log("页面显示");
// 更新页面状态
this.setData({
isReady: true
});
}
})
- onReady:
该函数在页面初次渲染完成时触发。
表示页面已经准备好,可以和视图层进行交互。
示例代码:
javascript
Page({
onReady: function() {
// 页面初次渲染完成时执行的操作
console.log("页面渲染完成");
// 执行交互操作
wx.showToast({
title: "页面已加载"
});
}
})
- onHide:
该函数在页面被隐藏时触发。
可以做一些资源释放或数据保存的操作。
示例代码:
javascript
插入代码
复制代码
Page({
onHide: function() {
// 页面隐藏时执行的操作
console.log("页面隐藏");
// 释放资源
this.data.list = null;
}
})
- onUnload:
该函数在页面被关闭时触发。
可以做一些清理工作。
示例代码:
javascript
插入代码
复制代码
Page({
onUnload: function() {
// 页面被关闭时执行的操作
console.log("页面关闭");
// 清理工作
wx.removeStorageSync('data');
}
})
码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识,点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更---心性养成之路》,学习技术的同时,我们也注重了心性的养成。