生命周期函数

onInit(Object query)

基础库 3.160.12 开始支持，低版本建议参考代码示例做兼容处理。

页面初始化时触发。一个页面只会调用一次，可以在 onInit 的参数中获取打开当前页面路径中的参数。详情请参考在 onInit 请求首屏主数据。
onInit 执行时机早于 onLoad 。如果开发者有性能优化的需求，建议将页面的数据网络请求放在 Page.onInit 中，并在网络请求的回调中执行 setData ，可以提升页面的加载速度。

参数说明

属性名类型说明
queryObject打开当前页面路径中的参数

代码示例

  • JS
  1. function getData(param) {
  2.     return new Promise((resolve, reject) => {
  3.         swan.request({
  4.             url: 'xxx',
  5.             success: res => resolve(res)
  6.         });
  7.     });
  8. }
  9. Page(
  10.     // 使用一个标记位，确保只请求一次主数据
  11.     hasRequest: false,
  12.     data: {
  13.        value: ''
  14.     },
  15.     onInit(param) {
  16.         if (!this.hasRequest) {
  17.             this.hasRequest = true;
  18.             getData(param).then(res => {
  19.                 this.setData({
  20.                     value: res.data
  21.                 });
  22.             })
  23.         }
  24.     },
  25.     onLoad(param) {
  26.         if (!this.hasRequest) {
  27.             this.hasRequest = true;
  28.             getData(param).then(res => {
  29.                 this.setData({
  30.                     value: res.data
  31.                 });
  32.             })
  33.         }
  34.     }
  35. );

使用建议

  1. 不能进行任何依赖视图层的操作，包括且不限于： selectComponent、selectAllComponents、swan.createSelectorQuery、swan.createMapContext、swan.createCameraContext、swan.createCanvasContext 等；
  2. 因为并非所有版本的基础库都支持此生命周期，所以开发者可以参考上述代码片段，增加兼容逻辑。

onLoad(Object query)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

调用 swan.reLaunch 的页面，会触发目标页面的 onLoad 。

参数说明

属性名类型说明
queryObject打开当前页面路径中的参数

代码示例

  • JS
  1. // 添加onLoad代理示例
  3. var originPage = Page
  5. function MyPage(config) {
  6.    this.lifetimeProxy = {
  7.      onLoad: config.onLoad
  8.    }
  9.    config.onLoad = function(options) {
  10.      // 自定义代码
  11.      // 公共的初始化代码
  12.      this.userData = getUserData()
  13.    }
  15.   // ...
  17.   originPage(config)
  18. }

onShow()

页面显示 / 切入前台时触发。可以在 onShow 中获取打开当前页面路径中的参数。
代码示例

  • JS
  1. // 目标页面
  2. Page({
  3.     // 在 onShow 中获取
  4.     onShow: function() {
  5.         // 获取当前小程序的页面栈
  6.         let pages = getCurrentPages();
  7.         // 数组中索引最大的页面--当前页面
  8.         let currentPage = pages[pages.length - 1];
  9.         // 打印出当前页面中的 options
  10.         console.log(currentPage.options);
  11.     }
  12. });

onReady()

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

onHide()

页面隐藏 / 切入后台时触发。 如通过调用 swan.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等时触发。

onUnload()

页面卸载时触发。如通过调用 swan.redirectTo 或 swan.navigateBack 到其他页面时触发。

onForceReLaunch()

单击右上角菜单栏的重启按钮时触发。

注意：
在解析 query 的时候，基础库会使用 decodeURIComponent 对 query 的参数值进行一次解码，该功能将在新的版本中下线。
如页面跳转时传递了 encode 后的值作为参数，为避免发生页面错误，使用时请自行将拿到的值使用 decodeURIComponent 进行一次 decode 操作。

Web 态说明

由于 Web 态框架暂不支持当前是否进入前、后台的状态检测，因此在下列场景中，Page.onShow、Page.onHide 生命周期无法触发。

  • 当 Web 态小程序从后台切换至前台时，如从任务管理器进入、或关闭显示在上层的语音助手等，Page.onShow 生命周期无法触发。
  • 当 Web 态小程序从前台切换至后台时，如按下 Home 键，Page.onHide 生命周期无法触发。
  • 当从 Web 态小程序跳转至其它第三方网页或应用时，如从 Web 态小程序打开拨号界面，Page.onHide 生命周期无法触发。
  • 关闭 Web 态小程序，Page.onHide 生命周期无法触发。

更多内容参见生命周期。