微信小程序初始化、前后台切换生命周期顺序

  1. 下面有三个文件 app.js 、index.js 、app.json
	//app.js
	App({
	  onLaunch: function (options) {
	    console.log("app.js ---onLaunch---");
	  },
	  onShow: function () {
	    console.log("app.js ---onShow---");
	  },
	  onHide: function () {
	    console.log("app.js ---onHide---");
	  },
	  onError: function (msg) {
	    console.log("app.js ---onError---");
	  },
	  globalData: {
	    userInfo: null
	  }
	})
	//index.js
	Page({
	  /**
	   * 页面的初始数据
	   */
	  data: {
	    
	  },
	
	  /**
	   * 生命周期函数--监听页面加载
	   */
	  onLoad: function (options) {
	    console.log("index.js ---onLoad---");
	  },
	
	  /**
	   * 生命周期函数--监听页面初次渲染完成
	   */
	  onReady: function () {
	    console.log("index.js ---onReady---");
	  },
	
	  /**
	   * 生命周期函数--监听页面显示
	   */
	  onShow: function () {
	    console.log("index.js ---onShow---");
	  },
	
	  /**
	   * 生命周期函数--监听页面隐藏
	   */
	  onHide: function () {
	    console.log("index.js ---onHide---");
	  },
	
	  /**
	   * 生命周期函数--监听页面卸载
	   */
	  onUnload: function () {
	    console.log("index.js ---onUnload---");
	  },
	
	  /**
	   * 页面相关事件处理函数--监听用户下拉动作
	   */
	  onPullDownRefresh: function () {
	    console.log("index.js ---onPullDownRefresh---");
	  },
	
	  /**
	   * 页面上拉触底事件的处理函数
	   */
	  onReachBottom: function () {
	    console.log("index.js ---onReachBottom---");
	  },
	
	  /**
	   * 用户点击右上角分享
	   */
	  onShareAppMessage: function () {
	    console.log("index.js ---onShareAppMessage---");
	  }
	})
	//app.json
	{
	  "pages":[
	    "pages/index/index"
	  ],
	  "window":{
	    "backgroundTextStyle":"light",
	    "navigationBarBackgroundColor": "#fff",
	    "navigationBarTitleText": "WeChat",
	    "navigationBarTextStyle":"black"
	  }
	}

  1. 页面加载时console输出生命周期的状态

在这里插入图片描述

  1. 切后台时控制台输出生命周期状态
    在这里插入图片描述
  2. 切回前台生命周期状态在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39043923/article/details/88661768
今日推荐