微信小程序——生命周期详解(代码解读)

✅作者简介: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知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目《国学周更---心性养成之路》,学习技术的同时,我们也注重了心性的养成。

相关推荐
丁总学Java几秒前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域1 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8681 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165022 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦9 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac12 小时前
微信小程序的组件
微信小程序
stormjun13 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck14 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23416 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong16 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序