【整理】小程序页面Page构造页面-初始数据、生命周期回调、事件处理函数

开始学习小程序开发，常用的基础内容进行记录。

使用 Page 构造器注册页面

简单的页面可以使用 Page() 进行构造。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
    //页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
  },
  onShow: function() {
    // 页面出现在前台时执行 
    //页面显示/切入前台时触发。
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
    //页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

    //注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行。详见生命周期 
  },
  onHide: function() {
    // 页面从前台变为后台时执行
    //页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
  },
  onUnload: function() {
    // 页面销毁时执行
    //页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
    //监听用户下拉刷新事件。
    //要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
    //可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
    //当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
  },
  onReachBottom: function() {
    // 页面触底时执行
    //监听用户上拉触底事件。
    //可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
    //在触发距离内滑动期间，本事件只会被触发一次
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

Page(Object object)

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

参数

Object object

属性	类型	默认值	必填	说明
data	Object			页面的初始数据
onLoad	function			生命周期回调—监听页面加载
onShow	function			生命周期回调—监听页面显示
onReady	function			生命周期回调—监听页面初次渲染完成
onHide	function			生命周期回调—监听页面隐藏
onUnload	function			生命周期回调—监听页面卸载
onPullDownRefresh	function			监听用户下拉动作
onReachBottom	function			页面上拉触底事件的处理函数
onShareAppMessage	function			用户点击右上角转发
onAddToFavorites	function			用户点击右上角收藏
onPageScroll	function			页面滚动触发事件的处理函数
onResize	function			页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function			当前是 tab 页时，点击 tab 时触发
其他	any			开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

 

 

PageObject[] getCurrentPages()

获取当前页面栈。数组中第一个元素为首页，最后一个元素为当前页面。

注意：

• 不要尝试修改页面栈，会导致路由以及页面状态错误。
• 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

页面page实例的生命周期：