Page Introduction

Page represents a page of Mini Program, taking charge of the display and interaction of page. Each page will have a subdirectory in the project, basically there are as many subdirectories as there are pages. It is also a constructor to generate instance of page.

Each page consists of four files:

• [PageName].js: page logic

• [PageName].axml: page structure

• [PageName].json: page configuration (optional)

• [PageName].acss: page style sheet (optional)

When page is initialized, the data should be provided.

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

According to the data provided, the page can be rendered.

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

The function should be specified when defining interaction.

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

The above code shows when user clicks the view, the handleTap function will be invoked.

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

If you want to re-render the page, you need to call this.setData function in the [PageName].js script.

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

The above code shows when user click the view, the changeText function will be invoked.

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

In the changeText function, this.setData is called to change the text data, and then the page will re-render to show the changed data.