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: 頁面卸載

當redirectTo或navigateBack的時候調用。

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

onLoad參數

類型說明Object其他頁面打開當前頁面所調用的 query 參數頁面相關事件處理函數

onPullDownRefresh: 下拉刷新

監聽用戶下拉刷新事件。

需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。

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

onReachBottom: 上拉觸底

監聽用戶上拉觸底事件。

可以在app.json的window選項中或頁面配置中設置觸發距離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對界面渲染完畢后調用。

當前名稱：小程序頁面注冊Page() 函數
URL地址：http://www.js-pz168.com/news29/181929.html

成都網站建設公司_創新互聯，為您提供App設計、建站公司、網站導航、小程序開發、搜索引擎優化、企業建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯