啟動(dòng)頁(yè)面

page(params) 是進(jìn)入某個(gè)頁(yè)面的時(shí)候會(huì)執(zhí)行的頁(yè)面入口函數(shù)，params 是一個(gè) object 類型的參數(shù)，定義了頁(yè)面初始數(shù)據(jù)，生命周期鉤子函數(shù)，事件處理函數(shù)等。

params 參數(shù)說明：

如果不注冊(cè) onShareAppMessage，會(huì)默認(rèn)隱藏右上角膠囊按鈕菜單里的分享按鈕

示例代碼：

// index.js
Page({
  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
  },
  // Event handler.
  viewTap: function() {
    this.setData(
      {
        text: "Set some data for updating view."
      },
      function() {
        // this is setData callback
      }
    );
  },
  customData: {
    foo: "bar"
  }
});

啟動(dòng)參數(shù)

onLoad生命周期函數(shù)會(huì)接受到當(dāng)前頁(yè)面打開時(shí)設(shè)置的query參數(shù)。比如

// 頁(yè)面url是'page/index/index?a=1&key=value'
...
onLoad: functions (options) {
	console.log(options) // {a: '1', key: 'value'}
}

頁(yè)面首次渲染

初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。data 將會(huì)以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成 JSON 的格式：字符串，數(shù)字，布爾值，對(duì)象，數(shù)組。

渲染層可以通過 TTML 對(duì)數(shù)據(jù)進(jìn)行綁定。

示例代碼：

<!-- index.ttml -->
<view>{{text}}</view>
<view>{{array[0].msg}}</view>

// index.js
Page({
  data: {
    text: "init data",
    array: [{ msg: "1" }, { msg: "2" }]
  }
});

頁(yè)面事件處理

除了初始化數(shù)據(jù)和生命周期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在組件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(zhí)行 Page 中定義的事件處理函數(shù)。

示例代碼：

<!-- index.ttml -->
<view bindtap="viewTap"> click me </view>

// index.js
Page({
  viewTap: function() {
    console.log("view tap");
  }
});

更新頁(yè)面渲染 setData()

參數(shù) data 以 key，value 的形式表示將 this.data 中的 key 對(duì)應(yīng)的值改變成 value。 callback 是一個(gè)回調(diào)函數(shù)，在這次 setData 對(duì)界面渲染完畢后調(diào)用。

示例代碼：

<!--index.ttml-->
<view>{{text}}</view>
<button bindtap="changeText">Change normal data</button>
<view>{{num}}</view>
<button bindtap="changeNum">Change normal num</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bindtap="addNewField">Add new data</button>

//index.js
Page({
  data: {
    text: "init data",
    num: 0,
    array: [{ text: "init data" }],
    object: {
      text: "init data"
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // 這樣無法更新UI
    this.setData({
      text: "changed data"
    });
  },
  changeNum: function() {
    this.data.num = 1;
    this.setData({
      num: this.data.num
    });
  },
  changeItemInArray: function() {
    this.setData({
      "array[0].text": "changed data"
    });
  },
  changeItemInObject: function() {
    this.setData({
      "object.text": "changed data"
    });
  },
  addNewField: function() {
    this.setData({
      "newField.text": "new data"
    });
  }
});