注册页面

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

使用 Page 构造器注册页面

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

代码示例：

  1. //index.js
  2. Page({
  3.   data: {
  4.     text: "This is page data."
  5.   },
  6.   onLoad: function(options) {
  7.     // 页面创建时执行
  8.   },
  9.   onShow: function() {
  10.     // 页面出现在前台时执行
  11.   },
  12.   onReady: function() {
  13.     // 页面首次渲染完毕时执行
  14.   },
  15.   onHide: function() {
  16.     // 页面从前台变为后台时执行
  17.   },
  18.   onUnload: function() {
  19.     // 页面销毁时执行
  20.   },
  21.   onPullDownRefresh: function() {
  22.     // 触发下拉刷新时执行
  23.   },
  24.   onReachBottom: function() {
  25.     // 页面触底时执行
  26.   },
  27.   onShareAppMessage: function () {
  28.     // 页面被用户分享时执行
  29.   },
  30.   onPageScroll: function() {
  31.     // 页面滚动时执行
  32.   },
  33.   onResize: function() {
  34.     // 页面尺寸变化时执行
  35.   },
  36.   onTabItemTap(item) {
  37.     // tab 点击时执行
  38.     console.log(item.index)
  39.     console.log(item.pagePath)
  40.     console.log(item.text)
  41.   },
  42.   // 事件响应函数
  43.   viewTap: function() {
  44.     this.setData({
  45.       text: 'Set some data for updating view.'
  46.     }, function() {
  47.       // this is setData callback
  48.     })
  49.   },
  50.   // 自由数据
  51.   customData: {
  52.     hi: 'MINA'
  53.   }
  54. })

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

在页面中使用 behaviors

基础库 2.9.2 开始支持，低版本需做兼容处理。

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

  1. // my-behavior.js
  2. module.exports = Behavior({
  3.   data: {
  4.     sharedText: 'This is a piece of data shared between pages.'
  5.   },
  6.   methods: {
  7.     sharedMethod: function() {
  8.       this.data.sharedText === 'This is a piece of data shared between pages.'
  9.     }
  10.   }
  11. })
  1. // page-a.js
  2. var myBehavior = require('./my-behavior.js')
  3. Page({
  4.   behaviors: [myBehavior],
  5.   onLoad: function() {
  6.     this.data.sharedText === 'This is a piece of data shared between pages.'
  7.   }
  8. })

具体用法参见 behaviors 。

使用 Component 构造器构造页面

基础库 1.6.3 开始支持，低版本需做兼容处理。

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

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

代码示例：

  1. Component({
  2.   data: {
  3.     text: "This is page data."
  4.   },
  5.   methods: {
  6.     onLoad: function(options) {
  7.       // 页面创建时执行
  8.     },
  9.     onPullDownRefresh: function() {
  10.       // 下拉刷新时执行
  11.     },
  12.     // 事件响应函数
  13.     viewTap: function() {
  14.       // ...
  15.     }
  16.   }
  17. })

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

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