微信小程序 注冊頁面

注冊頁面

對于小程序中的每個頁面，都需要在頁面對應(yīng)的 js 文件中進行注冊，指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。

使用 Page 構(gòu)造器注冊頁面

簡單的頁面可以使用 Page() 進行構(gòu)造。

代碼示例：

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 頁面創(chuàng)建時執(zhí)行
  },
  onShow: function() {
    // 頁面出現(xiàn)在前臺時執(zhí)行
  },
  onReady: function() {
    // 頁面首次渲染完畢時執(zhí)行
  },
  onHide: function() {
    // 頁面從前臺變?yōu)楹笈_時執(zhí)行
  },
  onUnload: function() {
    // 頁面銷毀時執(zhí)行
  },
  onPullDownRefresh: function() {
    // 觸發(fā)下拉刷新時執(zhí)行
  },
  onReachBottom: function() {
    // 頁面觸底時執(zhí)行
  },
  onShareAppMessage: function () {
    // 頁面被用戶分享時執(zhí)行
  },
  onPageScroll: function() {
    // 頁面滾動時執(zhí)行
  },
  onResize: function() {
    // 頁面尺寸變化時執(zhí)行
  },
  onTabItemTap(item) {
    // tab 點擊時執(zhí)行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件響應(yīng)函數(shù)
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由數(shù)據(jù)
  customData: {
    hi: 'MINA'
  }
})

詳細的參數(shù)含義和使用請參考 Page 參考文檔 。

在頁面中使用 behaviors

基礎(chǔ)庫 2.9.2 開始支持，低版本需做兼容處理。

頁面可以引用 behaviors 。 behaviors 可以用來讓多個頁面有相同的數(shù)據(jù)字段和方法。

// 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.'
  }
})

具體用法參見 behaviors 。

使用 Component 構(gòu)造器構(gòu)造頁面

基礎(chǔ)庫 1.6.3 開始支持，低版本需做兼容處理。

Page 構(gòu)造器適用于簡單的頁面。但對于復(fù)雜的頁面， Page 構(gòu)造器可能并不好用。

此時，可以使用 Component 構(gòu)造器來構(gòu)造頁面。 Component 構(gòu)造器的主要區(qū)別是：方法需要放在 methods: { } 里面。

代碼示例：

Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 頁面創(chuàng)建時執(zhí)行
    },
    onPullDownRefresh: function() {
      // 下拉刷新時執(zhí)行
    },
    // 事件響應(yīng)函數(shù)
    viewTap: function() {
      // ...
    }
  }
})

這種創(chuàng)建方式非常類似于 自定義組件 ，可以像自定義組件一樣使用 behaviors 等高級特性。

具體細節(jié)請閱讀 Component 構(gòu)造器 章節(jié)。