Android开发探究微信小程序（四）（界面生命周期）_android生命周期和高级组件的运用微信-优快云博客

本文链接：https://blog.youkuaiyun.com/MagicMHD/article/details/80770459

本文探讨了微信小程序的界面生命周期，类似于Android应用的生命周期，通过监听页面变化来响应用户操作。文中详细解释了`onLoad`、`onReady`、`onShow`、`onHide`和`onUnload`等关键生命周期方法，并提供了相应的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：界面生命周期是指当我们从一个界面跳转到另外一个界面时我们的程序所发送的变化。这个也是和android类似的，都是通过监听的方法来识别我们对程序的操作的，下面来详细介绍一下。

来看一下具体的代码部分（index.js）：

/**

* 页面的初始数据

data: {

phone:'',

password:'',

onLoad: function (options) {

// 页面初始化 options为页面跳转所带来的参数

/**

* 生命周期函数--监听页面初次渲染完成

onReady: function () {

/**

* 生命周期函数--监听页面显示

onShow: function () {

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

index界面的wxml+wxss+js代码如下：

index.wxml

<!--index.wxml-->
<view class="container">
<!--绑定点击事件-->
  <view  bindtap="bindViewTap" class="userinfo">
  </view>
  <view class="usermotto">
  <!--数据绑定-->
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

index.wxss

/**index.wxss**/

.container {
  width: 800;
  height: 800;
}
.userinfo {
  width: 120rpx;
  height: 120rpx;
  background: red;
}

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  /**
   * 通过data初始化数据
   */
  data: {
    motto: '点击上面View跳转',
    // userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    //通过调用API进行跳转
    wx.navigateTo({//这里要注意，navigateTo是跳转到非tabBar的item里面的，如果要跳转到tabBar的item，则要使用switchTab！
      url: '../logs/logs'
    })
  },
  /**
   * 监听页面开在加载的状态
   *    页面加载完成之后就不会在执行
   */
  onLoad: function () {
    console.log('index---------onLoad()')
    // //this指的就是本页面对象
    // var that = this
    // //调用应用实例的方法获取全局数据
    // app.getUserInfo(function(userInfo){
    //   //更新数据
    //   that.setData({
    //     userInfo:userInfo
    //   })
    //   //更新本页面
    //   that.update()
    // })
  },
  /**
   *  监听页面显示，
   *    当从当前页面调转到另一个页面
   *    另一个页面销毁时会再次执行
   */
  onShow: function() {
    console.log('index---------onShow()')
  },
  /**
   * 监听页面渲染完成
   *    完成之后不会在执行
   */
  onReady: function() {
    console.log('index---------onReaday()');
  },
  /**
   * 监听页面隐藏
   *    当前页面调到另一个页面时会执行
   */
  onHide: function() {
    console.log('index---------onHide()')
  },
  /**
   * 当页面销毁时调用
   */
  onUnload: function() {
    console.log('index---------onUnload')
  }

})