微信小程序Page函数详解

在微信小程序中，页面交互的代码写在页面的JS文件中，每个页面都需要通过Page()函数进行注册。需要注意的是，Page()函数只能写在微信小程序每个页面对应的JS文件中，并且每个页面只能注册一个。

Page()函数的参数是一个对象，通过该对象可以指定页面初始数据、页面生命周期回调函数和页面事件处理函数。调用Page()函数的示例代码如下。

javascript 复制代码

Page({ 
      // 页面初始数据 
      data: { 
        msg1: 'Hello', 
        msg2: 'World' 
      },   
      // 页面生命周期回调函数，以onLoad()为例 
      onLoad: function () { 
        console.log('onLoad()函数执行了') 
      }, 
      // 页面事件处理函数，以onPullDownRefresh()为例 
      onPullDownRefresh: function () { 
        console.log('onPullDownRefresh()函数执行了') 
      } 
  })

上述代码在Page()函数的参数中定义了页面初始数据data、页面生命周期回调函数onLoad()和页面事件处理函数onPullDownRefresh()。

了解了Page()函数的作用后，下面对该函数中的页面初始数据、页面生命周期回调函数和页面事件处理函数分别进行讲解。

页面初始数据

页面初始数据是指页面第一次渲染时所用到的数据。下面演示如何定义页面初始数据，示例代码如下。

css 复制代码

      data: { 
        msg1: 'Hello', 
        msg2: 'World' 
      },

上述代码在data中定义了两个属性，分别是msg1和msg2，这两个属性为页面初始数据。

页面生命周期回调函数

在微信小程序中，页面的生命周期是指每个页面"加载→渲染→销毁"的过程，每个页面都有生命周期。如果想要在某个特定的时机进行特定的处理，则可以通过页面生命周期回调函数来完成。

页面生命周期回调函数用于实现在特定的时间点执行特定的操作，随着页面生命周期的变化，页面生命周期回调函数会自动执行。常见的页面生命周期回调函数如表3-1所示。

函数名	说明
onLoad	监听页面加载，且一个页面只会在创建完成后调用一次
onShow	监听页面显示，只要页面显示就会调用此函数
onReady	监听页面初次渲染完成，一个页面只会调用一次
onHide	监听页面隐藏，只要页面隐藏就会调用此函数
onUnload	监听页面卸载，只要页面被释放就会调用此函数

需要注意的是，页面生命周期回调函数监听的是当前页面的状态。

页面事件处理函数

在微信小程序中，用户可能会在页面上进行一些操作，例如上拉、下拉、滚动页面等，如何在发生这些操作的时候进行处理呢？可以通过页面事件处理函数来完成。

页面事件处理函数用于监听用户的行为，常见的页面事件处理函数如表3-2所示。

函数名	说明
onPullDownRefresh()	监听用户下拉刷新事件
onReachBottom()	监听用户上拉触底事件
onPageScroll()	监听用户滑动页面事件
onHide	监听页面隐藏，只要页面隐藏就会调用此函数
onUnload	监听页面卸载，只要页面被释放就会调用此函数

需要注意的是，使用onPullDownRefresh()函数前，需要在app.json配置文件中将enablePullDownRefresh配置项设为true。enablePullDownRefresh配置项表示是否开启当前页面下拉刷新，如果该配置项值为true，则当前页面开启下拉刷新，否则当前页面关闭下拉刷新。