微信小程序 Page() 函数详解

什么是 Page() 函数

在微信小程序中，一个页面通常对应着一个 .js 文件，这个 .js 文件中定义了一个名为 Page() 的函数。Page() 函数是小程序开发中最基础、最重要的函数之一，它用于定义一个页面，包括页面的生命周期函数、页面事件处理函数以及数据等内容。

Page() 函数语法

Page({
  data: {
    // 页面的初始数据
  },
  onLoad: function (options) {
    // 页面创建时执行
  },
  onShow: function () {
    // 页面显示时执行
  },
  onReady: function () {
    // 页面首次渲染完毕时执行
  },
  onHide: function () {
    // 页面隐藏时执行
  },
  onUnload: function () {
    // 页面销毁时执行
  },
  onPullDownRefresh: function () {
    // 下拉刷新时执行
  },
  onReachBottom: function () {
    // 上拉触底时执行
  },
  onShareAppMessage: function () {
    // 页面转发时执行
  },
  // 其他自定义函数和事件处理函数
  customFunction: function () {}
})

Page() 函数详细说明

data

data 是一个对象，用于存储页面的初始数据。在页面中，可以通过 this.data 来获取和修改当前页面的数据。例如：

Page({
  data: {
    name: 'Tom',
    age: 18
  },
  onLoad: function (options) {
    // 获取数据
    console.log(this.data.name); // 输出 Tom
    // 修改数据
    this.setData({
      age: 20
    })
  }
})

生命周期函数

微信小程序的每个页面都有一组生命周期函数，它们会在特定时间点自动触发，开发者可以在这些函数中编写自己的代码，实现页面的逻辑。以下是小程序页面的生命周期函数：

• onLoad: 页面创建时触发，可以在此函数中获取页面 URL 中的参数。
• onShow: 页面显示时触发。
• onReady: 页面首次渲染完毕时触发。
• onHide: 页面隐藏时触发。
• onUnload: 页面销毁时触发。
• onPullDownRefresh: 下拉刷新时触发。
• onReachBottom: 上拉触底时触发。
• onShareAppMessage: 分享当前页面时触发。

以下是一个生命周期函数的示例代码：

Page({
  onLoad: function (options) {
    console.log('页面创建了');
  },
  onShow: function () {
    console.log('页面显示了');
  },
  onReady: function () {
    console.log('页面渲染完毕');
  },
  onHide: function () {
    console.log('页面隐藏了');
  },
  onUnload: function () {
    console.log('页面销毁了');
  }
})

页面事件处理函数

在小程序页面中，我们可以通过 bind 绑定事件处理函数，例如：

<view bindtap="handleTap">点击我</view>

在 .js 文件中，定义一个事件处理函数：

Page({
  handleTap: function () {
    console.log('被点击了');
  }
})

setData

setData 是一个用于修改页面数据的函数，它接受一个对象作为参数，对象的属性名与 data 中定义的属性名一一对应。例如：

Page({
  data: {
    name: 'Tom',
    age: 18
  },
  handleTap: function () {
    this.setData({
      age: 20
    })
  }
})

通过 this.setData 修改页面数据后，页面会自动重新渲染，展示最新的数据。但 setData 函数也有一些需要注意的地方：

• 修改数据的时候，只能修改 data 中已经定义的属性，否则会出现 undefined 。
• 修改数据不能直接给 data 赋值，而是需要使用 this.setData({})。
• setData 是一个异步函数，如果有多次修改请使用Promise.all包装。

示例代码

示例1: 显示当前页面的路径

Page({
  onLoad: function () {
    // 获取当前页面路径
    var pages = getCurrentPages(); // 获取页面栈
    var currentPage = pages[pages.length - 1]; // 获取当前页面对象
    console.log(currentPage.route); // 当前页面路径
  }
})

示例2: 模拟下拉刷新

Page({
  onPullDownRefresh: function () {
    // 模拟刷新操作
    setTimeout(function () {
      // 结束下拉刷新
      wx.stopPullDownRefresh();
    }, 1000);
  }
})

总结

我们通过该篇文章了解了 Page() 函数的语法、用法和示例代码。在日常小程序开发中，开发者需要熟练掌握 Page() 函数，才能更好地开发出功能完善、性能优良的小程序。