开发
API

注册页面

对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。

使用 Page 构造器注册页面

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

代码示例:

//index.js
Page({
  data: {
    text: "This is page data.",
  },
  onLoad: function (options) {
    // Do some initialize when page load.
  },
  onShow: function () {
    // Do something when page show.
  },
  onReady: function () {
    // Do something when page ready.
  },
  onHide: function () {
    // Do something when page hide.
  },
  onUnload: function () {
    // Do something when page close.
  },
  onReachBottom: function () {
    // Do something when page reach bottom.
  },
  onPageScroll: function () {
    // Do something when page scroll
  },
  onResize: function () {
    // Do something when page resize
  },
  // Event handler.
  viewTap: function () {
    this.setData(
      {
        text: "Set some data for updating view.",
      },
      function () {
        // this is setData callback
      },
    );
  },
  // Custom Data
  customData: {
    hi: "hello",
  },
});

详细的参数含义和使用请参考 Page 参考文档

使用 Component 构造器构造页面

Page 构造器适用于简单的页面。但对于复杂的页面, Page 构造器可能并不好用。

此时,可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是:方法需要放在 methods: { } 里面。

代码示例:

Component({
  data: {
    text: "This is page data.",
  },
  methods: {
    onLoad: function (options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function () {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function () {
      // ...
    },
  },
});

这种创建方式非常类似于 自定义组件 ,可以像自定义组件一样使用 behaviors 等高级特性。

具体细节请阅读 Component 构造器 章节。

在页面中使用 behaviors

使用 Component 构造器来构造的页面可以引用 behaviors 。 behaviors 可以用来让多个页面有相同的数据字段和方法。

// my-behavior.js
module.exports = Behavior({
  data: {
    sharedText: "This is a piece of data shared between pages.",
  },
  methods: {
    sharedMethod: function () {
      this.data.sharedText === "This is a piece of data shared between pages.";
    },
  },
});
// page-a.js
var myBehavior = require("./my-behavior.js");
Component({
  behaviors: [myBehavior],
  methods: {
    onLoad: function () {
      this.data.sharedText === "This is a piece of data shared between pages.";
    },
  },
});

具体用法参见 behaviors

点击纠错
评价此篇文档