注冊(cè)

微信小程序注冊(cè)頁(yè)面Page()函數(shù),Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面

2017-12-22
導(dǎo)讀:Page Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù),其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。 object 參數(shù)說(shuō)明: 屬性 類(lèi)型 描述 data Object 頁(yè)面的初始數(shù)據(jù) onLoad Fu...

Page


Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面。接受一個(gè) object 參數(shù),其指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

object 參數(shù)說(shuō)明:

屬性 類(lèi)型 描述
data Object 頁(yè)面的初始數(shù)據(jù)
onLoad Function 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
onReady Function 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
onShow Function 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
onHide Function 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
onUnload Function 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
onPullDownRefresh Function 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
onReachBottom Function 頁(yè)面上拉觸底事件的處理函數(shù)
onShareAppMessage Function 用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)
onPageScroll Function 頁(yè)面滾動(dòng)觸發(fā)事件的處理函數(shù)
其他 Any 開(kāi)發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中,在頁(yè)面的函數(shù)中用 this 可以訪問(wèn)

示例代碼:

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
   // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

初始化數(shù)據(jù)


初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層,所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式:字符串,數(shù)字,布爾值,對(duì)象,數(shù)組。

渲染層可以通過(guò) WXML 對(duì)數(shù)據(jù)進(jìn)行綁定。

示例代碼:

 

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

 

生命周期函數(shù)


  • onLoad: 頁(yè)面加載

    • 一個(gè)頁(yè)面只會(huì)調(diào)用一次,可以在 onLoad 中獲取打開(kāi)當(dāng)前頁(yè)面所調(diào)用的 query 參數(shù)。
  • onShow: 頁(yè)面顯示

    • 每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。
  • onReady: 頁(yè)面初次渲染完成

    • 一個(gè)頁(yè)面只會(huì)調(diào)用一次,代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng),可以和視圖層進(jìn)行交互。
    • 對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)?code>onReady之后設(shè)置。詳見(jiàn)生命周期
  • onHide: 頁(yè)面隱藏

    • 當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。
  • onUnload: 頁(yè)面卸載

    • 當(dāng)redirectTonavigateBack的時(shí)候調(diào)用。

生命周期的調(diào)用以及頁(yè)面的路由方式詳見(jiàn)

onLoad參數(shù)

類(lèi)型 說(shuō)明
Object 其他頁(yè)面打開(kāi)當(dāng)前頁(yè)面所調(diào)用的 query 參數(shù)

頁(yè)面相關(guān)事件處理函數(shù)


  • onPullDownRefresh: 下拉刷新

    • 監(jiān)聽(tīng)用戶下拉刷新事件。
    • 需要在configwindow選項(xiàng)中開(kāi)啟enablePullDownRefresh。
    • 當(dāng)處理完數(shù)據(jù)刷新后,wx.stopPullDownRefresh可以停止當(dāng)前頁(yè)面的下拉刷新。
  • onReachBottom: 上拉觸底

    • 監(jiān)聽(tīng)用戶下拉觸底事件。
  • onPageScroll: 頁(yè)面滾動(dòng)

    • 監(jiān)聽(tīng)用戶滑動(dòng)頁(yè)面事件。
    • 參數(shù)為 Object,包含以下字段:
字段 類(lèi)型 說(shuō)明
scrollTop Number 頁(yè)面在垂直方向已滾動(dòng)的距離(單位px)
  • onShareAppMessage: 用戶轉(zhuǎn)發(fā)
    • 只有定義了此事件處理函數(shù),右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕
    • 用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候會(huì)調(diào)用
    • 此事件需要 return 一個(gè) Object,用于自定義轉(zhuǎn)發(fā)內(nèi)容

自定義轉(zhuǎn)發(fā)字段

字段 說(shuō)明 默認(rèn)值
title 轉(zhuǎn)發(fā)標(biāo)題 當(dāng)前小程序名稱
path 轉(zhuǎn)發(fā)路徑 當(dāng)前頁(yè)面 path ,必須是以 / 開(kāi)頭的完整路徑

示例代碼

Page({
  onShareAppMessage: function () {
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      path: '/page/user?id=123'
    }
  }
})

 

 

事件處理函數(shù)


除了初始化數(shù)據(jù)和生命周期函數(shù),Page 中還可以定義一些特殊的函數(shù):事件處理函數(shù)。在渲染層可以在組件中加入事件綁定,當(dāng)達(dá)到觸發(fā)事件時(shí),就會(huì)執(zhí)行 Page 中定義的事件處理函數(shù)。

示例代碼:

<view bindtap="viewTap"> click me </view>
Page({
  viewTap: function() {
    console.log('view tap')
  }
})

Page.prototype.route


route 字段可以獲取到當(dāng)前頁(yè)面的路徑。

Page.prototype.setData()


setData 函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層,同時(shí)改變對(duì)應(yīng)的 this.data 的值。

setData() 參數(shù)格式


接受一個(gè)對(duì)象,以 key,value 的形式表示將 this.data 中的 key 對(duì)應(yīng)的值改變成 value。

其中 key 可以非常靈活,以數(shù)據(jù)路徑的形式給出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中預(yù)先定義。

注意:

  1. 直接修改 this.data 而不調(diào)用 this.setData 是無(wú)法改變頁(yè)面的狀態(tài)的,還會(huì)造成數(shù)據(jù)不一致
  2. 單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB,請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)

示例代碼:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

以下內(nèi)容你不需要立馬完全弄明白,不過(guò)以后它會(huì)有幫助。

生命周期


下圖說(shuō)明了 Page 實(shí)例的生命周期。

微信小程序注冊(cè)頁(yè)面Page()函數(shù),Page() 函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面

 

 

 

更多微信小程序開(kāi)發(fā)教程,可以關(guān)注hi小程序。
重磅推薦:小程序開(kāi)店目錄

第一部分:小商店是什么

第二部分:如何開(kāi)通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開(kāi)店任務(wù)常見(jiàn)問(wèn)題

第五部分:小商店可以賣(mài)什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開(kāi)發(fā)