頁面.js中的Page函數用來注冊一個頁面,指定頁面的初始數據、生命周期回調、事件處理函數等。
語法:Page(Object)
參數: Object json對象
1 Page({ 2 3 /** 4 * data 5 * 說明: 頁面的初始數據 6 **/ 7 data : { 8 // 定義本頁面所需的變量 9 text : "This is page data." 10 }, 11 12 13 /** 14 * onLoad(query) 15 * 說明: 頁面加載時觸發。一個頁面只會調用一次,可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。 16 * 參數: query [Object] 打開當前頁面路徑中的參數 17 **/ 18 onLoad : function(query){ 19 }, 20 21 22 /** 23 * onShow() 24 * 說明: 頁面顯示/切入前台時觸發。。 25 **/ 26 onShow : function(){ 27 }, 28 29 30 /** 31 * onReady() 32 * 說明: 頁面初次渲染完成時觸發。一個頁面只會調用一次,代表頁面已經准備妥當,可以和視圖層進行交互。 33 **/ 34 onReady : function(){ 35 }, 36 37 38 /** 39 * onHide() 40 * 說明: 頁面隱藏/切入后台時觸發。 如 navigateTo 或底部 tab 切換到其他頁面,小程序切入后台等。 41 **/ 42 onHide : function(){ 43 }, 44 45 46 /** 47 * onUnload() 48 * 說明: 頁面卸載時觸發。如redirectTo或navigateBack到其他頁面時。 49 **/ 50 onUnload : function(){ 51 }, 52 53 54 /** 55 * onPullDownRefresh() 56 * 說明: 監聽用戶下拉刷新事件。 57 * 注意: 58 * 1) 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。 59 * 2) 可以通過wx.startPullDownRefresh觸發下拉刷新,調用后觸發下拉刷新動畫,效果與用戶手動下拉刷新一致。 60 * 3) 當處理完數據刷新后,wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。 61 **/ 62 onPullDownRefresh : function(){ 63 }, 64 65 66 /** 67 * onReachBottom() 68 * 說明: 監聽用戶上拉觸底事件。 69 * 注意: 70 * 1) 可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。 71 * 2) 在觸發距離內滑動期間,本事件只會被觸發一次。 72 **/ 73 onReachBottom : function(){ 74 }, 75 76 77 /** 78 * onPageScroll(Object) 79 * 說明: 監聽用戶滑動頁面事件。 80 * 參數: Object,可以通過Object獲取以下數據: 81 * Object.scrollTop [Number] 頁面在垂直方向已滾動的距離(單位px) 82 **/ 83 onPageScroll : function(Object){ 84 }, 85 86 87 /** 88 * onShareAppMessage(Object) 89 * 說明: 監聽用戶轉發行為。是點擊轉發按鈕(<button> 組件 open-type="share")還是右上角菜單“轉發”按鈕的行為,並自定義轉發內容。 90 * 參數: Object,可以通過Object獲取以下數據: 91 * Object.from [button|menu] 轉發事件來源。值為 button 時表示點擊頁面轉發按鈕。 值為menu通過點擊頁面右上角轉發菜單。 92 * Object.target [Object] 如果 from 值是 button,則 target 是觸發這次轉發事件的 button,否則為 undefined 93 * Object.webViewUrl [String] 頁面中包含<web-view>組件時,返回當前<web-view>的url 94 * 95 * 注意: 96 * 1) 只有定義了此事件處理函數,右上角菜單才會顯示“轉發”按鈕 97 * 2) 該函數需要返回一個對象,用於自定義轉發內容 98 **/ 99 onShareAppMessage : function(Object){ 100 // 返回對象,定義轉發內容 101 return { 102 title : [String], 103 path : [String], // 當前頁面 path ,必須是以 / 開頭的完整路徑,比如:/page/user?id=123 104 imageUrl : [String] // [可選] 自定義圖片路徑,可以是任意圖片路徑,支持PNG及JPG。顯示圖片長寬比是 5:4。不設置時使用默認截圖 105 } 106 }, 107 108 109 /** 110 * onTabItemTap(Object) 111 * 說明: 監聽點擊 tab 時觸發 112 * 參數: Object,可以通過Object獲取以下數據: 113 * Object.index [String] 被點擊tabItem的序號,從0開始 114 * Object.pagePath [String] 被點擊tabItem的頁面路徑 115 * Object.text [String] 被點擊tabItem的按鈕文字 116 **/ 117 onTabItemTap : function(Object){ 118 }, 119 120 121 /** 122 * 自定義組件事件 123 * 組件中加入 bindtap="sample",在Page內定義該事件 124 * 比如組件: <view bindtap="sample">點我</view> 125 * 定義點擊事件示例: 126 **/ 127 sample : function(){ 128 // 這里定義單擊事件 129 }, 130 131 132 /** 133 * 屬性: this.route 134 * 說明: Page內置屬性,返回當前頁面的路徑,不含擴展名,比如: page/index/index 135 */ 136 137 138 /** 139 * 函數: this.setData(Object data, Function callback) 140 * 說明: 更改或增加page.data下的變量值,同時改變對應的視圖層調用數據 141 * 示例: 142 * this.setData({text : '新內容'}) // 更改或增加data下的text鍵值 143 * this.setData({'marray[0].text' : 123}); // 修改鍵名marray第一個元素的鍵名為text的值 144 * this.setData({'object.text' : 567}); // 修改鍵名object下的鍵名為text的值 145 * this.setData({'a.b' : 1}); // 如果this.data.a.b 不存在時,則新建這個鍵。不管是否存在this.data.a路徑 146 * 147 * 注意: 148 * 1) 要獲取data下定義的數據,采用 this.data.text 方式獲取 149 * 2) 直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致。 150 * 3) 單次設置的數據不能超過1024kB,請盡量避免一次設置過多的數據。 151 * 4) 請不要把 data 中任何一項的 value 設為 undefined ,否則這一項將不被設置並可能遺留一些潛在問題。 152 */ 153 154 })