Page 代表應用的一個頁面，負責頁面展示和交互。每個頁面對應一個子目錄，一般有多少個頁面，就有多少個子目錄。它也是一個構造函數，用來生成頁面實例。

頁面初始化

• 頁面初始化時，需要提供數據作為頁面的第一次渲染：

  <view>{{title}}</view>
  <view>{{array[0].user}}</view>

  Page({
  data: {
    title: 'Alipay',
    array: [{user: 'li'}, {user: 'zhao'}]
  }
  })

• 定義交互行為時，需要在頁面腳本中指定響應函數：

  <view onTap="handleTap">click me</view>

  上面模板定義用戶點擊時，調用了 handleTap 方法：

  Page({
  handleTap() {
    console.log('yo! view tap!')
  }
  })

• 頁面重新渲染，需要在頁面腳本中調用 this.setData 方法。

  <view>{{text}}</view>
  <button onTap="changeText"> Change normal data </button>

  上面代碼指定用戶觸摸按鈕時，調用了 changeText 方法。

  Page({
  data: {
    text: 'init data',
  },
  changeText() {
    this.setData({
      text: 'changed data'
    })
  },
  })

  上面代碼中，在 changeText 方法中調用了 this.setData 方法，會導致頁面的重新渲染。

Page()

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

//index.js
Page({
  data: {
    title: "Alipay"
  },
  onLoad(query) {
    // 頁面加載
  },
  onReady() {
    // 頁面加載完成
  },
  onShow() {
    // 頁面顯示
  },
  onHide() {
    // 頁面隱藏
  },
  onUnload() {
    // 頁面被關閉
  },
  onTitleClick() {
    // 標題被點擊
  },
  onPullDownRefresh() {
    // 頁面被下拉
  },
  onReachBottom() {
    // 頁面被拉到底部
  },
  onShareAppMessage() {
   // 返回自定義分享信息
  },
  viewTap() {
    // 事件處理
    this.setData({
      text: 'Set data for update.'
    })
  },
  go() {
    // 帶參數的跳轉，從 page/index 的 onLoad 函數的 query 中讀取 xx
    my.navigateTo('/page/index?xx=1')
  },
  customData: {
    hi: 'alipay'
  }
})

上面的代碼中，Page() 方法的參數對象說明如下：

生命周期方法

• onLoad：頁面加載。一個頁面只會調用一次，query 參數為 my.navigateTo 和 my.redirectTo 中傳遞的 query 對象。

• onShow：頁面顯示。每次頁面顯示都會調用一次。

• onReady：頁面初次渲染完成。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。對界面的設置，如 my.setNavigationBar 請在 onReady 之后設置。

• onHide：頁面隱藏。當使用 my.navigateTo 跳轉到其他頁面或在底部使用 tab 切換 tab 時調用。

• onUnload：頁面卸載。當使用 my.redirectTo 或 my.navigateBack 跳轉到其他頁面的時候調用。

事件處理函數

• onPullDownRefresh：下拉刷新。監聽用戶下拉刷新事件，需要在 的 window 選項中開啟 pullRefresh。當處理完數據刷新后，my.stopPullDownRefresh 可以停止當前頁面的下拉刷新。

• onShareAppMessage：用戶分享，詳見 分享。

Page.prototype.setData()

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

setData 接受一個對象作為參數。對象的鍵名 key 可以非常靈活，以數據路徑的形式給出，如 array[2].message、a.b.c.d，并且不需要在 this.data 中預先定義。

示例代碼

<view>{{text}}</view>
<button onTap="changeTitle"> Change normal data </button>
<view>{{array[0].text}}</view>
<button onTap="changeArray"> Change Array data </button>
<view>{{object.text}}</view>
<button onTap="changePlanetColor"> Change Object data </button>
<view>{{newField.text}}</view>
<button onTap="addNewKey"> Add new data </button>

Page({
  data: {
    text: 'test',
    array: [{text: 'a'}],
    object: {
      text: 'blue'
    }
  },
  changeTitle() {
    // 錯誤！不要直接去修改 data 里的數據
    // this.data.text = 'changed data'

    // 正確
    this.setData({
      text: 'ha'
    })
  },
  changeArray() {
    // 可以直接使用數據路徑來修改數據
    this.setData({
      'array[0].text':'b'
    })
  },
  changePlanetColor(){
    this.setData({
      'object.text': 'red'
    });
  },
  addNewKey() {
    this.setData({
      'newField.text': 'c'
    })
  }
})

getCurrentPages()

getCurrentPages() 函數用于獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。下面代碼可以用于檢測當前頁面棧是否具有 5 層頁面深度。

if(getCurrentPages().length === 5) {
  my.redirectTo('/xx');
} else {
  my.navigateTo('/xx');
}

框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候，頁面棧的表現如下：

page.json

每一個頁面也可以使用 [page名].json 文件來對本頁面的窗口表現進行配置。

頁面的配置比 app.json 全局配置簡單得多，只能設置 window 相關的配置項，所以無需寫 window 這個鍵。注意，頁面配置會覆蓋 app.json 的 window 屬性中的配置項。

格外支持 optionMenu 配置導航圖標，點擊后觸發 onOptionMenuClick。

例如：

{
  "optionMenu": {
    "icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
  }
}

page 樣式

每個頁面中的根元素為 page，需要設置高度或者背景色時，可以利用這個元素。

page {
  background-color: #fff;
}