【page.js】配置及Page函數說明


頁面.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 })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM