---
title: Page Introduction
---

# Page Introduction

A `page` represents a page of a miniapp. This topic describes how to develop pages to achieve desired display and interaction effect. Each page has a subdirectory configured, so the number of pages determines the number of subdirectories. `Page` is a constructor that defines the initial data, lifecycle callbacks, event handler functions, and other required data of pages.

Each page includes the following files:

- `[pagePath].js`: the registration page.
- `[pagePath].tyml`: the page structure.
- `[pagePath].tyss`: the page style (optional).
- `[pagePath].json`: the page configuration (optional).
- `[pagePath].rjs`: the rendering script file of the page (optional).

## Registration page

Each page must be registered with the [Page() function](/en/miniapp/develop/miniapp/framework/api/page), and it is registered only once.

```js
Page({
  data: {
    title: 'Smart',
  },
  onShow: function () {
    ty.showToast({ title: this.data.title });
  },
  say: function () {
    this.setData({ title: 'hello world' });
  },
});
```

The above code block shows how to register a page object with the initialization data `{ title: 'Smart' }`, and respond to the `onShow` lifecycle function. For more information, see [Page Function](/en/miniapp/develop/miniapp/framework/api/page).

## Page structure

The page structure is described by [component](/en/miniapp/develop/miniapp/component) tags and custom component tags. A page consists of tags, properties, and page data.

```html
<view class="my-view" bind:tap="say">{{title}}</view>
```

> For more information about the template syntax, see [TYML Reference](/en/miniapp/develop/miniapp/framework/tyml).

## Page style

```css
.my-view {
  color: blue;
}
```

## Page configuration

```json
{
  "navigationBarTitleText: "Page name"
}
```

> For more information about page configuration, see [Page Configuration](/en/miniapp/develop/miniapp/framework/page/json).

The above example shows that the `Smart` style appears blue when initialized. When the page method `say()` is called after tapping, the page data is modified, and re-rendering is performed. And then, `hello world` is displayed.