支付寶小程序框架 頁(yè)面·介紹

Page 代表應(yīng)用的一個(gè)頁(yè)面，負(fù)責(zé)頁(yè)面展示和交互。每個(gè)頁(yè)面對(duì)應(yīng)一個(gè)子目錄，一般有多少個(gè)頁(yè)面，就有多少個(gè)子目錄。它也是一個(gè)構(gòu)造函數(shù)，用來(lái)生成頁(yè)面實(shí)例。

每個(gè)小程序頁(yè)面一般包含四個(gè)文件。

• [pageName].js：頁(yè)面邏輯
• [pageName].axml：頁(yè)面結(jié)構(gòu)
• [pageName].acss：頁(yè)面樣式（可選）
• [pageName].json：頁(yè)面配置（可選）

頁(yè)面初始化時(shí)，提供數(shù)據(jù)。

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

根據(jù)以上提供的數(shù)據(jù)，渲染頁(yè)面內(nèi)容。

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

定義交互行為時(shí)，需要指定響應(yīng)函數(shù)。

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

以上代碼指定用戶觸摸按鈕時(shí)，調(diào)用 handleTap 方法。

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

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

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

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

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

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