文档中心 > 店铺动态卡片-开发指引

应用页面介绍

更新时间:2023/02/02 访问次数:27254

Page 代表应用的一个页面,负责页面展示和交互。每个页面对应一个子目录,一般有多少个页面,就有多少个子目录。它也是一个构造函数,用来生成页面实例。


每个应用页面一般包含四个文件。

1)[pageName].js:页面逻辑;

2)[pageName].axml:页面结构;

3)[pageName].acss:页面样式(可选);

4)[pageName].json:页面配置(可选)。


页面初始化时,提供数据。

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


根据以上提供的数据,渲染页面内容。

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


定义交互行为时,需要指定响应函数。

<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 方法,会导致页面重新渲染。


FAQ

关于此文档暂时还没有FAQ
返回
顶部