小程序开放平台

文档中心
起步
目录
配置小程序
小程序框架
框架
逻辑层
注册小程序
注册页面
页面生命周期
页面路由
模块化
API
视图层
小程序运行时
自定义组件
基础能力
开放能力
性能优化
转发
事件回调
基础库
调试
数据分析
服务端调试

注册页面

开发
>
指南
>
小程序框架
>
逻辑层
>
注册页面
>
更新时间:2024-11-28 14:15:00

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

使用 Page 构造器注册页面

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

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 页面创建时执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  },
  onPullDownRefresh: function() {
    // 触发下拉刷新时执行
  },
  onReachBottom: function() {
    // 页面触底时执行
  },
  onPageScroll: function() {
    // 页面滚动时执行
  },
  onResize: function() {
    // 页面尺寸变化时执行
  },
  // 事件响应函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

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

页面中使用 behavior

页面可以引用 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')
  
  Page({
    behaviors: [myBehavior],
    onLoad: function() {
      this.data.sharedText === 'This is a piece of data shared between pages.'
    }
  })

具体用法参见 behavior

使用 Component 构造器构造页面

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

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

代码示例:

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

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

具体用法参见 Component