微信小程序学习笔记——小程序生命周期

应用生命周期

指app.js

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化
onShow	function		否	监听小程序启动或切前台
onHide	function		否	监听小程序切后台
onError	function		否	错误监听函数
onPageNotFound	function		否	页面不存在监听函数

//app.js
App({
  //1 应用第一次启动就会触发的事件
  onLaunch(){
    //应用场景：在应用第一次启动的时候，获取用户的个人信息
    // wx.navigateTo({
    //   url: '/11/22',
    // })
  },
  //2 应用 被用户看到  切到前台
  onShow(){
    //应用场景：对应用的数据或页面效果 重置
    console.log('程序onshow')
  },
  //3 应用被隐藏  切到后台
  onHide(){
    //应用场景：暂停或者清除定时器 
    console.log('程序onhide')
  },
  //4 应用的代码发生了报错的时候，j就会触发
  onError(err){
    //应用场景：在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误信息发送给后台
    console.log(err)

  },
  // 5 页面找不到就会触发
  //应用第一次启动的时候，如果找不到第一个入口页面 才会触发
  onPageNotFound(){
   //如果页面不存在了 通过js的方式来重新跳转页面  重新跳到第二个首页
   //不能跳到tabBar页面 导航组件类型
   wx.navigateTo({
     url: 'pages/checkboxPage/checkboxPage',
   })
    console.log('notFound')
  }
})

页面生命周期

属性	类型	说明
data	Object	页面的初始化数据
onLoad	function	生命周期回调——监听页面加载
onShow	function	生命周期回调——监听页面显示
onReady	function	生命周期回调——监听页面初次渲染完后
onHide	function	生命周期回调——监听页面隐藏
onUnload	function	生命周期回调——监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachButton	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见  响应显示区域变化
onTabItemTap	function	当前是tab页时，点击自己的tabItem时触发

// pages/componentPage/componentPage.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:true
      },
      {
        id:1,
        name:'原创',
        isActive:false
      },
      {
        id:2,
        name:'分类',
        isActive:false
      },
      {
        id:3,
        name:'关于',
        isActive:false
      }
    ]
  },
  //自定义事件  用来接收子组件传递的数据的
  handleItemChange(e){
    console.log(e)
     let {index} = e.detail
      //最严谨的写法 重新拷贝一份数组 ，在对这个额数组的备份进行处理
      //let list = JSON.parse(JSON.stringify(this.data.tabs))
      //不要直接修改 this.data.数据
      let list = this.data.tabs;
      list.forEach((v,i) => {
       // i===index ?v.isActive = true: v.isActive = false
        if(i==index){
          v.isActive = true
        }else{
          v.isActive = false
        }
      });
      this.setData({
        tabs:list
      })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //场景：发送异步请求来初始化页面数据
    console.log('页面OnLoad')
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //触发条件： 切前台  以及 页面跳转回来后
    console.log('页面onShow')
  },
   /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log('页面onReadey')
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    //触发条件：切后台 以及 超链接跳转时，open-type="navigate"(保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面) 的页面跳转
    console.log('页面onHide')
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    //触发条件：超链接跳转时，open-type的值为关闭当前页面时  
    console.log('页面onUnload')
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   * 前置条件：在app.json或当前页面的json中配置了  "enablePullDownRefresh":true,
   */
  onPullDownRefresh: function () {
    //场景：页面的数据或者效果 重新刷新
    console.log('onPullDownRefresh')
  },
  /**
   * 页面上拉触底事件的处理函数
   * 前置条件：需要让页面出现上下滚动才行
   */
  onReachBottom: function () {
    //场景：上拉加载下一页数据
    console.log('onReachBottom：上拉')
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log('onShareAppMessage:用户点击右上角分享')
    //然后触发： 页面onHide 程序onHide
  },
  /**页面滚动 */
  onPageScroll(){
    // 触发条件：页面滚动时触发
    console.log('onPageScroll:页面滚动')
  },
  /**页面尺寸发生改变的时候触发
   * 前置条件：手机时，在app.json或当前页面的json中配置了  "pageOrientation":true,
   * 前置条件：iPad时，在app.json或当前页面的json中配置了 "resizable": true
   * 官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html#%E5%B1%8F%E5%B9%95%E6%97%8B%E8%BD%AC%E4%BA%8B%E4%BB%B6
   */
  onResize(){
    // 触发条件：横屏和竖屏的相互改变时
    console.log('onResize:横屏和竖屏的相互改变时')
  },
  /*
  当前是tab页时，点击自己tabItem时触发
  */
  onTabItemTap(){
    console.log('onTabItemTap:tab')
  }
})