支付寶小程序框架 Page

簡介

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

頁面初始化時，需要提供數(shù)據(jù)將作為頁面的第一次渲染。

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

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

定義交互行為時，需要在頁面腳本里面指定響應函數(shù)。

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

上面模板定義用戶點擊時，調(diào)用handleTap方法。

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

頁面重新渲染，需要在頁面腳本里面調(diào)用this.setData方法。

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

上面代碼指定用戶觸摸按鈕時，調(diào)用changeText方法。

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

上面代碼中，changeText方法里面調(diào)用this.setData方法，會導致頁面的重新渲染。

Page()

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

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

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

（1）生命周期方法的說明

• onLoad: 頁面加載。一個頁面只會調(diào)用一次，query 參數(shù)為 my.navigateTo和 my.redirectTo 中傳遞的 query 對象。
• onShow: 頁面顯示。每次打開頁面都會調(diào)用一次。
• onReady: 頁面初次渲染完成。一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互。對界面的設置，如my.setNavigationBarTitle請在onReady之后設置，詳見生命周期。
• onHide: 頁面隱藏。當navigateTo或底部tab切換時調(diào)用。
• onUnload: 頁面卸載。當redirectTo或navigateBack的時候調(diào)用。

（2）事件處理函數(shù)的說明

• onPullDownRefresh: 下拉刷新。監(jiān)聽用戶下拉刷新事件，需要在app.json的window選項中開啟pullRefresh，當處理完數(shù)據(jù)刷新后，my.stopPullDownRefresh可以停止當前頁面的下拉刷新。
• onShareAppMessage: 用戶分享，詳見分享。

Page.prototype.setData()

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

注意：

1. 直接修改this.data無效，無法改變頁面的狀態(tài)，還會造成數(shù)據(jù)不一致。
2. 請盡量避免一次設置過多的數(shù)據(jù)。

setData接受一個對象作為參數(shù)。對象的鍵名key可以非常靈活，以數(shù)據(jù)路徑的形式給出，如 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 里的數(shù)據(jù)
    // this.data.text = 'changed data'  

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

getCurrentPages()

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

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

注意：不要嘗試修改頁面棧，會導致路由以及頁面狀態(tài)錯誤。

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

page.json

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

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

page 樣式

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

page {
  background-color: #fff;
}