# 页面简介

本文未包括页面生命周期的详细介绍，需另见页面

# 页面生命周期

组合式	选项式	Android	iOS	web	描述
onLoad	onLoad	3.9	4.11	4.0	生命周期回调监听页面加载页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onPageShow	onShow	3.9	4.11	4.0	生命周期回调监听页面显示页面显示/切入前台时触发。
onReady	onReady	3.9	4.11	4.0	生命周期回调监听页面初次渲染完成页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onPageHide	onHide	3.9	4.11	4.0	生命周期回调监听页面隐藏页面隐藏/切入后台时触发。如 `navigateTo` 或底部 `tab` 切换到其他页面，应用切入后台等。
onUnload	onUnload	3.9	4.11	4.0	生命周期回调监听页面卸载页面卸载时触发。如 `redirectTo` 或 `navigateBack` 到其他页面时。
onPullDownRefresh	onPullDownRefresh	3.9	4.11	4.0	监听用户下拉动作 - 需要在 `pages.json` 的页面配置中开启 `enablePullDownRefresh` 。 - 可以通过 `uni.startPullDownRefresh` 触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。 - 当处理完数据刷新后，`uni.stopPullDownRefresh` 可以停止当前页面的下拉刷新。
onReachBottom	onReachBottom	3.9	4.11	4.0	页面上拉触底事件的处理函数 - 可以在 `pages.json` 的页面配置中设置触发距离 `onReachBottomDistance` 。 - 在触发距离内滑动期间，本事件只会被触发一次。
onPageScroll	onPageScroll	3.9	4.13	4.0	页面滚动触发事件的处理函数监听用户滑动页面事件。
onResize	onResize	3.9	4.11	4.0	页面尺寸改变时触发
onBackPress	onBackPress	3.9	4.11	4.0	监听页面返回
onInit	onInit	x	x	x	生命周期回调监听页面初始化页面初始化时触发。一个页面只会调用一次，可以在 onInit 的参数中获取打开当前页面路径中的参数。
onShareAppMessage	onShareAppMessage	x	x	x	用户点击右上角转发监听用户点击页面内转发按钮（`<button>` 组件 `open-type="share"`）或右上角菜单“转发”按钮的行为，并自定义转发内容。
onShareTimeline	onShareTimeline	x	x	x	用户点击右上角转发到朋友圈监听右上角菜单“分享到朋友圈”按钮的行为，并自定义发享内容。
onAddToFavorites	onAddToFavorites	x	x	x	用户点击右上角收藏监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。
onTabItemTap	onTabItemTap	x	x	4.0	当前是 tab 页时，点击 tab 时触发
onNavigationBarButtonTap	onNavigationBarButtonTap	x	x	4.0	监听原生标题栏按钮点击事件
onNavigationBarSearchInputChanged	onNavigationBarSearchInputChanged	x	x	4.0	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	onNavigationBarSearchInputConfirmed	x	x	4.0	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	onNavigationBarSearchInputClicked	x	x	4.0	监听原生标题栏搜索输入框点击事件

示例代码, 详见

# 页面onLoad生命周期

页面初始化时，会触发onLoad生命周期。此时Dom还未构建渲染完毕（需要等onReady）。

所以onLoad页面常见的用途是开始联网取数，由于联网是异步的，在onLoad发起联网，等到获取到服务器数据后，也就可以更新到data上了。

页面的URL支持参数传递，这个参数也是在onLoad生命周期中获取。

通过uni.navigateTo API 或 <navigator>组件，可跳转到目标页面，比如从list页面跳转到detail页面，如下：

// 发起跳转，并传入post_id参数
uni.navigateTo({
  url: '/pages/template/list-news/detail/detail?post_id=' + post_id
})

// 在detail页面的onLoad中接收URL中传递的参数
export default {
  data() {
    return {
      post_id: ""
    }
  },
  onLoad(event : OnLoadOptions) { // 类型非必填，可自动推导
    this.post_id = event["post_id"] ?? "";
    // 可根据详情页id继续联网请求数据...
  },