wx:小程序.生命周期（超大杯）

微信小程序的生命周期可以分为两个层次：应用生命周期和页面生命周期。

1. 应用生命周期包括以下几个阶段：

• onLaunch(options): 当小程序初始化完成时触发，全局只触发一次；
• onShow(options): 当小程序启动或从后台进入前台显示时触发；
• onHide(): 当小程序从前台进入后台时触发；
• onError(error): 当小程序发生脚本错误或 API 调用失败时触发。

2. 页面生命周期包括以下几个阶段：

• onLoad(options): 当页面加载时触发，支持传入参数；
• onShow(): 当页面显示时触发；
• onReady(): 当页面初次渲染完成时触发；
• onHide(): 当页面隐藏时触发；
• onUnload(): 当页面卸载时触发。

3.微信小程序中的组件生命周期和页面生命周期类似，组件生命周期包括以下几个生命周期函数：

• created: 组件实例刚刚被创建时触发，可以在这个函数里面进行数据初始化；
• attached: 组件实例被 Attached 到页面节点树中时触发；
• ready: 组件在被 Attached 到页面节点树后，每次渲染完整个组件节点树后都会触发；
• moved: 组件实例被移动到新节点树后触发；
• detached: 组件实例被移除节点树，即将被销毁时触发。

以上生命周期函数名称和顺序与小程序开发的规范和语法需要严格遵守。在组件的生命周期函数中，可以进行对组件数据的操作、页面事件的监听和卸载等相关操作。不同的生命周期函数有不同的用途，开发者可以根据需要灵活应用，从而实现更为高效的小程序开发。同时，在组件的生命周期函数中应该尽量避免大的数据操作或事件调用，以免影响小程序的性能和用户体验。

onLaunch 是微信小程序的一个应用生命周期函数，当小程序初始化完成时触发，全局只触发一次。onLaunch 一般用于完成小程序的初始化工作，比如获取用户信息、登录验证、数据预加载等操作，从而为小程序后续的页面和组件开发提供支持。

应用生命周期

 onLaunch 的应用场景：

获取用户信息：小程序可以通过 wx.getUserInfo() 接口或者使用云函数的方式获取用户信息，可以在 onLaunch 函数中调用这些接口获取用户信息。

App({
  onLaunch: function() {
    wx.getUserInfo({
      success: function(res) {
        console.log(res.userInfo)
      },
      fail: function(res) {
        console.log('获取用户信息失败：' + res.errMsg)
      }
    })
  }
})

登录验证：小程序需要通过登录验证注册用户信息，以便在小程序后续的页面和组件中使用用户信息。可以在 onLaunch 函数中完成登录验证操作，从而为后续的页面和组件开发提供支持。

App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          // 发送 res.code 到后台换取用户登录凭证
        } else {
          console.log('wx.login 登录失败！' + res.errMsg)
        }
      }
    })
  }
})

数据预加载：小程序需要在启动时预先将数据加载到本地，从而提高小程序的访问速度和性能。可以在 onLaunch 函数中完成数据的预加载。

App({
onLaunch: function() {
  wx.request({
    url: 'https://juejin.com',
    success: res => {
      console.log(res.data)
    },
    fail: res => {
      console.log('数据加载失败！')
    }
  })
}
})

初始化用户自定义配置：小程序还可以根据用户的自定义配置初始化小程序中的样式和数据等内容，可以在 onLaunch 函数中完成这些操作。

App({
  onLaunch: function() {
    // 获取用户自定义配置
    const userConfig = wx.getStorageSync('userConfig') || {}
    // 初始化小程序配置
    this.globalData.config = Object.assign({}, this.globalData.config, userConfig)
  },
  globalData: {
    config: {
      themeColor: '#000000',
      appVersion: '1.0'
    }
  }
})

总之，在小程序开发过程中，了解 onLaunch 的应用场景可以更好地规划小程序的功能和开发流程，从而提高小程序的开发效率和用户体验。

onShow 是微信小程序的一个应用生命周期函数，当小程序启动或从后台进入前台显示时触发。onShow 函数通常用于小程序前台显示时需要进行的处理操作，例如重新加载数据、更新变量状态等。

 onShow 的应用场景：

1. 加载缓存数据：当用户从后台返回小程序，可以在 onShow 函数中读取缓存数据，避免重复加载数据和加快小程序运行速度。
2. 更新变量状态：当用户从后台返回小程序，可以在 onShow 函数中更新变量状态，从而刷新小程序界面和数据。
3. 检查登录状态：当用户从后台返回小程序，可以在 onShow 函数中检查用户登录状态，从而提高小程序的安全性和用户体验。
4. 重新加载数据：当用户从后台返回小程序，可以在 onShow 函数中重新加载数据，从而保证小程序的数据最新和正确。

总之，onShow 在微信小程序中有着广泛的应用场景，可以针对性地为小程序添加更多的功能和优化，提高小程序的性能和用户体验。

示例代码：

App({
  onShow: function(options) {
    const currentPage = getCurrentPages().pop()
    if (currentPage) {
      // 重新加载页面数据
      currentPage.onLoad(currentPage.options)
    }
  }
})

以上代码以重新加载页面数据为例，在小程序前台显示时调用当前页面的 onLoad 函数，从而实现页面数据的更新。

onHide 是微信小程序的应用生命周期函数之一，当小程序从前台进入后台时触发。onHide 通常用于保存小程序当前的状态或数据，例如保存用户填写的表单内容、关闭定时器、暂停音乐播放等操作。

 onHide 的应用场景：

1. 保存用户输入数据：当用户从前台进入后台，可以在 onHide 函数中将用户输入的数据保存在本地，以便用户下次再次进入小程序时使用。
2. 关闭定时器：当用户从前台进入后台，可以在 onHide 函数中关闭定时器，以减少小程序后台资源的占用。
3. 暂停音乐播放：当用户从前台进入后台，可以在 onHide 函数中暂停音乐播放，以便用户在后台可以正常听取其他音频信息。
4. 保存小程序状态：当用户从前台进入后台，可以在 onHide 函数中保存小程序当前的状态或数据，以便下次进入小程序时立即恢复之前的状态。

总之，onHide 在微信小程序开发中有着广泛的应用场景，可以根据需要选择合适的应用场景，从而更好地完成小程序的功能和用户体验。

示例代码：

Page({
  data: {
    inputValue: ''
  },
  onHide: function() {
    // 当用户从前台进入后台保存用户输入数据
    wx.setStorageSync('inputValue', this.data.inputValue)
  },
  onLoad: function(options) {
    // 在页面初始化时读取缓存的数据
    const inputValue = wx.getStorageSync('inputValue') || ''
    this.setData({
      inputValue: inputValue
    })
  }
})

以上代码以保存用户输入数据为例，在页面 onHide 事件触发时，将用户输入的内容保存在本地存储中。在页面加载时，从本地存储中读取已有的数据。

onError 是微信小程序的应用生命周期函数之一，当小程序运行过程中出现错误时，会触发 onError 函数。onError 通常用于监听并处理小程序运行时的错误，以便更好地处理错误和优化小程序的运行。

onError 的应用场景：

1. 监测代码错误：当小程序运行出现代码错误时，可以在 onError 函数中监听和处理错误信息，以便及时发现和解决这些问题。
2. 监测网络错误：当小程序运行时出现网络请求错误时，可以在 onError 函数中监听和处理错误信息，以便及时排查并修复这些问题。
3. 监测用户操作意外：当用户在小程序中进行操作时，由于操作疏漏或意外而导致小程序出错时，可以在 onError 函数中监听和处理错误，以便提高小程序的鲁棒性和用户体验。
4. 监测硬件问题：当小程序运行过程中涉及到硬件问题时，例如摄像头或音频硬件出现故障，可以在 onError 函数中监听和处理错误信息，以便及时解决这些问题。

总之，onError 在微信小程序开发中非常重要，可以帮助开发者从多个角度监测和处理小程序运行中的错误，以提高小程序的质量和用户体验。

示例代码：

App({
  onError: function(err) {
    console.log('小程序发生错误：', err)
  }
})

**

以上代码在小程序全局定义了 onError 函数，当小程序运行过程中出现错误时将错误日志输出到控制台，以便开发者跟踪和解决问题。

页面生命周期

onLoad 的应用场景：

onLoad(options) 是小程序中页面生命周期函数之一，表示页面加载时触发的函数。它常用于以下场景：

1. 在页面加载完成后，获取并初始化页面所需的数据。
2. 在页面加载之前，从上一个页面或网络获取数据并传递到这个页面中。
3. 对页面进行必要的配置和初始化。
4. 处理从其他页面传递过来的参数，根据传递的参数来展示页面的不同内容。

需要注意的是，在 onLoad 函数中不能直接调用页面数据、组件和选择器等，需要在页面生命周期函数 onReady 中使用。同时，options 参数包含着路径后的查询参数，可以通过 options 获取到上一个页面传递过来的参数。

示例代码：

Page({
  data: {
    userInfo: null
  },
  onLoad: function (options) {
    // 获取上一个页面传递过来的参数
    console.log(options);
    // 从本地缓存中获取用户信息
    var userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      // 更新页面数据
      this.setData({
        userInfo: userInfo
      })
    } else {
      // 跳转到登录页面
      wx.redirectTo({
        url: '/pages/login/login'
      })
    }
  }
})

在以上示例中，onLoad(options) 函数首先通过输出 options 参数来查看上一个页面传递过来的参数，并从本地缓存中获取用户信息。如果用户信息存在，则更新页面数据；否则，跳转到登录页面。通过这种方式，开发者可以方便地实现从上一个页面获取参数，并对页面进行必要的初始化和配置。

onShow 的应用场景：

onShow() 是小程序中页面生命周期函数之一，表示页面显示时触发的函数。它常用于以下场景：

1. 页面被展示之前，从缓存或服务器上获取最新数据，确保数据的及时性。
2. 对页面数据进行动态更新，响应用户的操作或系统事件。
3. 对页面中的组件和选择器等进行必要的重新渲染，确保页面显示的正确性。

需要注意的是，在 onShow() 函数中不能直接调用页面数据、组件和选择器等，需要在 onReady() 中使用。同时，开发者需要注意在 onHide() 函数中保存页面数据，以便在下一次展示时恢复数据状态。

以下是一个简单的使用 onShow() 函数的代码示例：

Page({
  data: {
    messages: [],
  },

  onLoad() {
    this.loadMessages();
  },

  onShow() {
    this.loadMessages();
  },

  loadMessages: function() {
    // 从服务器获取最新的消息数据
    wx.request({
      url: 'https://example.com/messages',
      success: res => {
        this.setData({
          messages: res.data,
        });
      },
    });
  },
})

在以上示例中，onLoad() 函数和 onShow() 函数都调用了 loadMessages() 函数来从服务器获取最新的消息数据，以确保数据的及时性。同时，由于 onShow() 函数会在页面被展示时触发，因此在用户每次打开页面时会获取最新的数据。

onReady 的应用场景：

onReady() 是小程序中页面生命周期函数之一，表示页面初次渲染完成时触发的函数。它常用于以下场景：

1. 在 onReady() 中可以初始化一些页面组件或插件等，以确保页面正常展示。
2. 在 onReady() 中可以通过 wx.createCanvasContext() 方法创建画布，以便在接下来的页面中进行画图操作。
3. 在 onReady() 中可以访问并使用页面数据、组件和选择器等。

需要注意的是，onReady() 函数只会在页面初次渲染完成时触发一次，因此开发者在使用此函数时需要注意保留页面数据，以便在页面被销毁后再次打开时使用。

以下是一个简单的使用 onReady() 函数的代码示例：

Page({
  data: {
    score: 0,
    ctx: null,
  },

  onReady() {
    // 获取画布上下文对象
    this.setData({
      ctx: wx.createCanvasContext('myCanvas')
    });
  },

  drawScore: function() {
    // 在画布上绘制分数
    const ctx = this.data.ctx;
    ctx.setFontSize(20);
    ctx.fillText(`Score: ${this.data.score}`, 15, 20);
    ctx.draw();
  },
})

在以上示例中，onReady() 函数调用了 wx.createCanvasContext() 方法创建画布上下文对象。在 drawScore() 函数中，开发者可以通过画布上下文对象在画布上绘制分数，以便在页面中展示用户得分。通过这种方式，开发者可以方便地在页面初次渲染完成后，初始化并使用一些页面组件或插件等。

onHide 的应用场景：

onHide() 是小程序中页面生命周期函数之一，表示页面隐藏时触发的函数。它常用于以下场景：

1. 在 onHide() 函数中，可以对页面数据进行保存，在下次页面被展示时恢复之前的状态，确保用户交互的连续性。
2. 在 onHide() 函数中，可以停止并释放页面一些定时器、动画或媒体等资源，以便在页面重新展示时重新加载这些资源。
3. 在 onHide() 函数中，可以对页面中的数据进行清理，以便下次展示时重新加载。

需要注意的是，onHide() 函数会在页面隐藏时触发，因此在页面被销毁时也会触发此函数。开发者需要在此函数中保存页面数据，并注意避免在此函数中对已被销毁的页面组件、选择器等进行访问操作。

以下是一个简单的使用 onHide() 函数的代码示例：

Page({
  data: {
    timer: null,
  },

  onShow() {
    // 开始一个定时器
    this.data.timer = setInterval(() => {
      console.log('timer tick');
    }, 1000);
  },

  onHide() {
    // 在页面隐藏时停止定时器
    clearInterval(this.data.timer);
    this.data.timer = null;
  },
})

在以上示例中，onShow() 函数开启了一个定时器，并将其保存到 data 对象中。在 onHide() 函数中，将停止定时器并将其引用置为 null。通过这种方式，开发者可以确保在页面隐藏时停止并释放定时器等资源，以便在页面重新展示时重新加载这些资源。

onUnload 的应用场景：

onUnload() 是小程序中页面生命周期函数之一，表示页面卸载时触发的函数。它常用于以下场景：

1. 在 onUnload() 函数中，可以进行页面数据的释放和清理，以便在下次页面被加载时重新使用。
2. 在 onUnload() 函数中，可以停止并释放页面一些定时器、动画或媒体等资源，以达到卸载页面的目的。
3. 在 onUnload() 函数中，可以对页面进行一些必要的收尾工作，以确保页面正常退出。

需要注意的是，onUnload() 函数只有在页面被销毁时才会被触发，因此在此函数中不能访问已被销毁的页面数据、组件和选择器等。同时，开发者需要注意在 onHide() 或 onUnload() 函数中保存页面数据，以便在下次页面被加载时恢复之前的数据状态。

以下是一个简单的使用 onUnload() 函数的代码示例：

Page({
  data: {
    timer: null,
  },

  onLoad() {
    // 开始一个定时器
    this.data.timer = setInterval(() => {
      console.log('timer tick');
    }, 1000);
  },

  onUnload() {
    // 在页面卸载时释放定时器
    clearInterval(this.data.timer);
    this.data.timer = null;
  },
})

在以上示例中，onLoad() 函数开启了一个定时器，并将其保存到 data 对象中。在 onUnload() 函数中，将停止定时器并将其引用置为 null。通过这种方式，开发者可以确保页面卸载时释放和清理页面资源，以便在下次页面被加载时重新使用。

组件生命周期

created 的应用场景

在小程序中，每个页面也有自己的生命周期函数。created 生命周期函数在页面被创建时触发，是比较早的一个生命周期函数。在该函数中，我们可以执行一些初始化的操作，例如：

1. 发起网络请求：在 created 生命周期函数中可以发起网络请求，获取初始数据。通常，我们可以使用微信小程序提供的 wx.request 或 wx.fetch 方法发起网络请求，并在获取到数据后将其存储在 data 数据块中。
2. 读取本地缓存：在 created 生命周期函数中可以通过 wx.getStorageSync 方法读取本地缓存中的数据，并将其存储在 data 数据块中，以供页面渲染和交互使用。
3. 初始化页面数据：我们可以在 created 生命周期函数中对页面中的数据进行初始化，例如将一些默认值指定给页面中的变量，以便在后续的生命周期函数中使用。

总之，created 生命周期函数可以用来进行一些初始化操作，为后续的数据渲染、交互等操作做好准备。需要注意的是，在 created 生命周期函数中并不能使用 this.setData() 来修改页面中的数据，如果需要修改数据，应该将其存储在 data 中。

代码示例：

Page({
  data: {
    title: 'Hello, World!'
  },
  created() {
    console.log('页面 created')
    // 发起网络请求，获取数据
    wx.request({
      url: 'https://example.com/api/data',
      success: (res) => {
        // 将获取到的数据存储在 data 中
        this.setData({
          dataList: res.data
        })
      }
    })
  },
  onLoad() {
    console.log('页面 onLoad')
  }
})

在上面的代码中，我们定义了一个名为 created 的生命周期函数，用于在页面被创建时执行一些初始化操作。具体来说，我们在该函数中使用 wx.request 方法向远程服务器发起请求，获取数据，并将获取到的数据存储在 dataList 变量中，以便后续的渲染和操作使用。

attached 的应用场景：

在微信小程序中，attached 是组件生命周期函数之一，它表示组件被添加到页面中的时候触发。attached 生命周期函数常用于进行一些初始化操作，例如：

1. 发起网络请求：在 attached 生命周期函数中可以发起网络请求，获取组件需要的初始数据。通常，我们可以使用微信小程序提供的 wx.request 或 wx.fetch 方法发起网络请求，并在获取到数据后将其存储在 data 数据块中。
2. 初始化组件数据：我们可以在 attached 生命周期函数中对组件中的数据进行初始化，例如将一些默认值指定给组件中的变量，以便在后续的生命周期函数中使用。
3. 实现组件内部逻辑：在 attached 生命周期函数中可以实现组件内的逻辑，例如更新组件的视图、添加事件监听器等。

下面是一个示例代码，演示在 attached 生命周期函数中发起网络请求，获取组件的初始数据：

Component({
  data: {
    dataList: []
  },
  attached() {
    console.log('组件 attached')
    // 发起网络请求，获取数据
    wx.request({
      url: 'https://example.com/api/data',
      success: (res) => {
        // 将获取到的数据存储在 data 中
        this.setData({
          dataList: res.data
        })
      }
    })
  }
})

在上面的代码中，我们在 attached 生命周期函数中使用 wx.request 方法向远程服务器发起请求，获取组件需要的初始数据，并将获取到的数据存储在 dataList 变量中，以便后续的渲染和操作使用。

需要注意的是，微信小程序中的生命周期函数有自己的调用顺序，在页面加载时，attached 生命周期函数会在 onLoad 生命周期函数之后调用。如果我们只需要在页面加载时获取数据，可以使用 onLoad 生命周期函数来实现。

ready的应用场景：

在小程序中，每个页面和自定义组件都有自己的生命周期函数。ready 是页面/组件生命周期函数之一，它表示页面或组件渲染完毕后执行的生命周期函数。具体来说，ready 生命周期函数会在页面/组件渲染完成后立即触发，此时已经可以访问到页面/组件的 DOM 元素和属性。

在 ready 生命周期函数中，我们可以进行一些需要访问 DOM 元素或属性的操作，例如：

1. 获取 DOM 元素：由于 ready 生命周期函数会在页面/组件渲染完成后触发，因此我们可以在该函数中通过 this.selectComponent 或 wx.createSelectorQuery 方法获取到 DOM 元素，并进行一些操作，如绑定事件监听器等。
2. 获取组件属性：在 ready 生命周期函数中，我们也可以通过 this.properties 访问组件的属性，在组件初始化后进行一些操作。例如，在第一次渲染后可能需要进行某些计算，并将结果展示在页面上。

下面是一个示例代码，演示在 ready 生命周期函数中获取 DOM 元素，实现点击按钮后显示提示框的功能：

Page({
  onReady() {
    console.log('页面 ready')
    // 获取按钮元素
    const btn = this.selectComponent('#btn')
    // 绑定按钮点击事件
    btn.onTap(() => {
      wx.showToast({
        title: 'Hello, World!',
        icon: 'none'
      })
    })
  }
})

在上面的代码中，我们在 onReady 生命周期函数中通过 this.selectComponent 获取到按钮的 DOM 元素，并绑定了按钮的点击事件。当按钮被点击时，会弹出一个提示框。需要注意的是，只有在 onReady 生命周期函数中才能获取 DOM 元素，如果在其它生命周期函数中进行获取会报错。

总之，ready 生命周期函数是一个非常重要的生命周期函数，我们可以在其中进行需要访问 DOM 元素或属性的操作，实现更加灵活的页面/组件开发。

moved 的应用场景： 

在小程序中，moved 是组件生命周期函数之一，它表示组件被移动时触发，通常用于实现视图拖拽、拖拉等功能。

在 moved 生命周期函数中，我们可以获取到组件当前的位置信息，使用 this.pageX 和 this.pageY 获取当前位置的 x 和 y 坐标值。通过监听 moved 生命周期函数，我们可以在视图被拖拉移动时及时更新组件的位置和状态，从而实现视图拖拽的效果。

下面是一个在微信小程序中使用 moved 生命周期函数实现视图拖拽功能的示例代码：

Component({
  data: {
    x: 0,
    y: 0
  },
  moved: function(event) {
    // 获取组件当前位置信息
    var x = event.pageX
    var y = event.pageY

    // 更新组件位置
    this.setData({
      x: x,
      y: y
    })
  },
})

在上面的代码中，我们在 moved 生命周期函数中监听组件移动事件，并获取当前组件的位置信息，然后使用 setData 更新组件的位置信息。最终实现了视图拖拽的效果。

需要注意的是，在使用 moved 生命周期函数时，必须要将组件的 movable 属性设置为 true，否则该函数将无法触发。同时，moved 生命周期函数的触发频率较高，可能会导致性能问题，因此在实现拖拽功能时需要注意优化代码。

detached 的应用场景：

在小程序中，detached 是组件生命周期函数之一，它表示组件被从页面卸载时触发。通常，我们在 detached 生命周期函数中做一些组件销毁的操作，例如清除定时器、解除绑定的事件监听器等。

在 detached 生命周期函数中，我们可以进行一些组件必须要进行的清理操作，以防止内存泄漏和性能问题，同时也可以释放一些不必要的资源。

下面是一个示例代码，演示在 detached 生命周期函数中清除定时器和解除事件监听器的操作：

Component({
  data: {
    timer: null,
    message: 'Hello, World!'
  },
  attached() {
    // 创建定时器
    this.data.timer = setInterval(() => {
      console.log(this.data.message)
    }, 1000)
    // 绑定事件监听器
    this.bindEvent()
  },
  bindEvent() {
    console.log('绑定事件监听器')
    // 事件监听器代码省略
  },
  detached() {
    console.log('组件 detached')
    // 销毁定时器
    clearInterval(this.data.timer)
    // 解除事件监听器绑定
    this.unbindEvent()
  },
  unbindEvent() {
    console.log('解除事件监听器绑定')
    // 事件监听器解除代码省略
  }
})

在上面的代码中，我们在 attached 生命周期函数中创建了一个定时器，并在 bindEvent 方法中绑定了一些事件监听器。在 detached 生命周期函数中，我们在 unbindEvent 方法中解除了事件监听器的绑定，并使用 clearInterval 销毁了定时器，以便在组件被卸载后及时释放资源。

需要注意的是，在 detached 生命周期函数中，我们不应该再对组件进行渲染、修改数据等操作，因为此时组件已经被从页面中卸载，无法再对其进行更新。

===========

还是要多用