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

应用生命周期

指app.js

//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')
  }
})

页面生命周期

// 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')
  }
})