日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

Page

---

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

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為尚志等服務(wù)建站，尚志等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為尚志企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

object 參數(shù)說明：

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

示例代碼：

//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ù)將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對象，數(shù)組。

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

示例代碼：

{{text}}
{{array[0].msg}}

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

生命周期函數(shù)

---

• onLoad: 頁面加載

  • 一個(gè)頁面只會調(diào)用一次，可以在 onLoad 中獲取打開當(dāng)前頁面所調(diào)用的 query 參數(shù)。

• onShow: 頁面顯示

  • 每次打開頁面都會調(diào)用一次。

• onReady: 頁面初次渲染完成

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

• onHide: 頁面隱藏

  • 當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。

• onUnload: 頁面卸載

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

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

onLoad參數(shù)

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

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

---

• onPullDownRefresh: 下拉刷新

  • 監(jiān)聽用戶下拉刷新事件。
  • 需要在config的window選項(xiàng)中開啟enablePullDownRefresh。
  • 當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng)前頁面的下拉刷新。

• onReachBottom: 上拉觸底

  • 監(jiān)聽用戶下拉觸底事件。

• onPageScroll: 頁面滾動(dòng)

  • 監(jiān)聽用戶滑動(dòng)頁面事件。
  • 參數(shù)為 Object，包含以下字段：

字段	類型	說明
scrollTop	Number	頁面在垂直方向已滾動(dòng)的距離（單位px）

• onShareAppMessage: 用戶轉(zhuǎn)發(fā)
  • 只有定義了此事件處理函數(shù)，右上角菜單才會顯示“轉(zhuǎn)發(fā)”按鈕
  • 用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候會調(diào)用
  • 此事件需要 return 一個(gè) Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容

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

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

示例代碼

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í)，就會執(zhí)行 Page 中定義的事件處理函數(shù)。

示例代碼：

 click me 

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

Page.prototype.route

---

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

Page.prototype.setData()

---

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

setData() 參數(shù)格式

---

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

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

注意：

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

示例代碼：

{{text}}
 Change normal data 
{{num}}
 Change normal num 
{{array[0].text}}
 Change Array data 
{{object.text}}
 Change Object data 
{{newField.text}}
 Add new data 

//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)容你不需要立馬完全弄明白，不過以后它會有幫助。

生命周期

---

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

當(dāng)前題目：創(chuàng)新互聯(lián)小程序教程：微信小程序注冊頁面Page()函數(shù)
文章地址：http://m.5511xx.com/article/cdieecj.html