生命周期函数

# onInit(Object query)

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

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

参数:

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

代码示例

function getData(param) {
    return new Promise((resolve, reject) => {
        swan.request({
            url: 'xxx',
            success: res => resolve(res)
        });
    });
}
Page(
    // 使用一个标记位,确保只请求一次主数据
    hasRequest: false
    data: {
       value: ''
    },
    onInit(param) {
        if (!this.hasRequest) {
            this.hasRequest = true;
            getData(param).then(res => {
                this.setData({
                    value: res.data
                });
            })
        }
    },
    onLoad(param) {
        if (!this.hasRequest) {
            this.hasRequest = true;
            getData(param).then(res => {
                this.setData({
                    value: res.data
                });
            })
        }
    }
);

使用建议

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

# onLoad(Object query)

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

参数:

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

代码示例

// 添加onLoad代理示例

var originPage = Page

function MyPage(config) {
   this.lifetimeProxy = {
     onLoad: config.onLoad
   }
   config.onLoad = function(options) {
     // 自定义代码
     // 公共的初始化代码
     this.userData = getUserData()
   }
  
  // ...

  originPage(config)
}

# onShow()

页面显示/切入前台时触发。

# onReady()

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

# onHide()

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

# onUnload()

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

注意

  • 在解析 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 生命周期无法触发

更多内容参见生命周期