24小時服務電話:17712205170 查看騰訊廣告代理商資質
  • 微信官網
    訪問微信官網
  • 小程序
    訪問小程序

小程序注冊頁面

 
2019-09-05人氣:所屬分類:開發動态
 
 
對于小程序中的每個頁面,都需要在頁面對應的 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() {
    // 頁面觸底時執行
  },
  onShareAppMessage: function () {
    // 頁面被用戶分享時執行
  },
  onPageScroll: function() {
    // 頁面滾動時執行
  },
  onResize: function() {
    // 頁面尺寸變化時執行
  },
  onTabItemTap(item) {
    // tab 點擊時執行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件響應函數
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由數據
  customData: {
    hi: 'MINA'
  }
})
詳細的參數含義和使用請參考 Page 參考文檔 。
 
使用 Component 構造器構造頁面
 
Page 構造器适用于簡單的頁面。但對于複雜的頁面, Page 構造器可能并不好用。
 
此時,可以使用 Component 構造器來構造頁面。 Component 構造器的主要區别是:方法需要放在 methods: { } 裡面。
 
代碼示例:
 
Page({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 頁面創建時執行
    },
    onPullDownRefresh: function() {
      // 下拉刷新時執行
    },
    // 事件響應函數
    viewTap: function() {
      // ...
    }
  }
})
這種創建方式非常類似于 自定義組件 ,可以像自定義組件一樣使用 behaviors 等高級特性。
 
具體細節請閱讀 Component 構造器 章節。