小程序页面介绍 -凯发app官方网站

更新时间：2023-02-23 11:00:03

贡献者

订阅更新

我的文档

设置

page

代表应用的一个页面，负责页面展示和交互。每个页面对应一个子目录，一般有多少个页面，就有多少个子目录。它也是一个构造函数，用来生成页面实例。每个小程序页面一般包含四个文件。

●

[pagename].js：页面逻辑。

●

[pagename].axml：页面结构。

●

[pagename].json：页面配置。

●

[pagename].acss：页面样式（可选）。

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

page({

data: {

title: 'alipay',

array: [{ user: 'li' }, { user: 'zhao' }],

});

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

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

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

<view ontap="handletap">click meview>

以上代码指定用户点击按钮时，调用 handletap 方法。

page({

handletap() {

console.log('yo! view tap!');

});

页面重新渲染，需要在页面脚本里面调用 this.setdata 方法。

<view>{{text}}view> <button ontap="changetext">change normal databutton>

以上代码指定用户点击按钮时，调用 changetext 方法。

page({

data: {

text: 'init data',

changetext() {

this.setdata({

text: 'changed data',

});

上面代码中，changetext 方法里面调用 this.setdata 方法，会导致页面重新渲染。