5个姿势夹到男人爽_免耽漫画网免费的动漫_国产一级做性视频_调教双性大乳浪荡美人受师尊

0411-39943997
工作時間:周一至周日 8:30-17:30
技術文庫
Technical Library

小程序頁面注冊Page() 函數

標簽: 小程序開發   訪問: 21502018-01-26

Page

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

object 參數說明:

屬性類型描述
dataObject頁面的初始數據
onLoadFunction生命周期函數--監聽頁面加載
onReadyFunction生命周期函數--監聽頁面初次渲染完成
onShowFunction生命周期函數--監聽頁面顯示
onHideFunction生命周期函數--監聽頁面隱藏
onUnloadFunction生命周期函數--監聽頁面卸載
onPullDownRefreshFunction頁面相關事件處理函數--監聽用戶下拉動作
onReachBottomFunction頁面上拉觸底事件的處理函數
onShareAppMessageFunction用戶點擊右上角轉發
onPageScrollFunction頁面滾動觸發事件的處理函數
onTabItemTapFunction當前是 tab 頁時,點擊 tab 時觸發
其他Any開發者可以添加任意的函數或數據到 object 參數中,在頁面的函數中用 this 可以訪問

object 內容在頁面加載時會進行一次深拷貝,需考慮數據大小對頁面加載的開銷

示例代碼:

//index.jsPage({
  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
  },
  onTabItemTap(item) {    console.log(item.index)    console.log(item.pagePath)    console.log(item.text)
  },  // Event handler.
  viewTap: function() {    this.setData({
      text: 'Set some data for updating view.'
    }, function() {      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

初始化數據

初始化數據將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層,所以其數據必須是可以轉成 JSON 的格式:字符串,數字,布爾值,對象,數組。

渲染層可以通過 WXML 對數據進行綁定。

示例代碼:

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

生命周期函數

  • onLoad: 頁面加載

    • 一個頁面只會調用一次,可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。

  • onShow: 頁面顯示

    • 每次打開頁面都會調用一次。

  • onReady: 頁面初次渲染完成

    • 一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互。

    • 對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。詳見生命周期

  • onHide: 頁面隱藏

    • navigateTo或底部tab切換時調用。

  • onUnload: 頁面卸載

    • redirectTonavigateBack的時候調用。

生命周期的調用以及頁面的路由方式詳見

onLoad參數

類型說明
Object其他頁面打開當前頁面所調用的 query 參數

頁面相關事件處理函數

  • onPullDownRefresh: 下拉刷新

    • 監聽用戶下拉刷新事件。

    • 需要在app.jsonwindow選項中或頁面配置中開啟enablePullDownRefresh

    • 當處理完數據刷新后,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

  • onReachBottom: 上拉觸底

    • 監聽用戶上拉觸底事件。

    • 可以在app.jsonwindow選項中或頁面配置中設置觸發距離onReachBottomDistance

    • 在觸發距離內滑動期間,本事件只會被觸發一次。

  • onPageScroll: 頁面滾動

    • 監聽用戶滑動頁面事件。

    • 參數為 Object,包含以下字段:

字段類型說明
scrollTopNumber頁面在垂直方向已滾動的距離(單位px)
  • onShareAppMessage: 用戶轉發

    • 只有定義了此事件處理函數,右上角菜單才會顯示“轉發”按鈕

    • 用戶點擊轉發按鈕的時候會調用

    • 此事件需要 return 一個 Object,用于自定義轉發內容

自定義轉發字段

字段說明默認值
title轉發標題當前小程序名稱
path轉發路徑當前頁面 path ,必須是以 / 開頭的完整路徑

示例代碼

Page({
  onShareAppMessage: function () {    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123'
    }
  }
})

事件處理函數

除了初始化數據和生命周期函數,Page 中還可以定義一些特殊的函數:事件處理函數。在渲染層可以在組件中加入事件綁定,當達到觸發事件時,就會執行 Page 中定義的事件處理函數。

示例代碼:

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

Page.prototype.route

基礎庫 1.2.0 開始支持,低版本需做兼容處理

route 字段可以獲取到當前頁面的路徑。

Page.prototype.setData()

setData 函數用于將數據從邏輯層發送到視圖層(異步),同時改變對應的 this.data 的值(同步)。

setData() 參數格式

字段類型必填描述最低版本
dataObject這次要改變的數據
callbackFunction回調函數1.5.0

object 以 key,value 的形式表示將 this.data 中的 key 對應的值改變成 value。 callback 是一個回調函數,在這次setData對界面渲染完畢后調用。

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

注意:

  1. 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致

  2. 單次設置的數據不能超過1024kB,請盡量避免一次設置過多的數據

  3. 請不要把 data 中任何一項的 value 設為 undefined ,否則這一項將不被設置并可能遺留一些潛在問題。

示例代碼:

<!--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.jsPage({
  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'
    })
  }
})

以下內容你不需要立馬完全弄明白,不過以后它會有幫助。

生命周期

下圖說明了 Page 實例的生命周期。


Copyright? 2020 仟億科技,All rights reserved.