---
title: 原生小程序页面介绍
summary: "介绍小程序页面的基本概念，包括页面文件组成、Page() 函数注册、页面结构、样式和配置。"
questions:
  - 涂鸦小程序中一个页面由哪些文件组成？
  - 如何使用 Page() 函数注册一个小程序页面？
  - 页面的 tyml 模板中如何绑定数据和事件？
  - 页面的 json 配置文件有什么作用？
  - setData 方法在页面中的作用是什么？
  - 页面结构中的 tyml 和 tyss 分别负责什么？
  - 哪些页面文件是可选的，哪些是必需的？
---

# 页面介绍

`Page` 代表应用的一个页面，负责页面展示和交互。每个页面对应一个子目录，一般有多少个页面，就有多少个子目录。它也是一个构造函数，用来指定页面的初始数据、生命周期回调、事件处理函数等。

每个原生小程序页面一般包含以下文件。

- `[pagePath].js`：注册页面
- `[pagePath].tyml`：页面结构
- `[pagePath].tyss`：页面样式（可选）
- `[pagePath].json`：页面配置（可选）
- `[pagePath].rjs`：页面渲染脚本文件（可选）

## 注册页面

原生小程序页面必须使用 [Page() 函数](/cn/miniapp/develop/miniapp/framework/api/page) 注册且只注册一次。

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

以上注册页面对象，且初始化数据为 `{ title: 'Smart' }`，并响应 `onShow` 生命周期函数。更多详细内容，请参考 [Page 函数](/cn/miniapp/develop/miniapp/framework/api/page)。

## 页面结构

页面结构通过[组件](/cn/miniapp/develop/miniapp/component)标签以及自定义组件标签，进行结构描述。页面由标签、属性和页面数据组成。

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

> 更多模板语法，请参考 [TYML 语法参考](/cn/miniapp/develop/miniapp/framework/tyml)。

## 页面样式

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

## 页面配置

```json
{
  "navigationBarTitleText": "页面名"
}
```

> 更多页面配置，请参考 [页面配置](/cn/miniapp/develop/miniapp/framework/page/json)。

以上示例初始化时展示 `Smart` 样式表现为蓝色。当单击后调用页面方法 `say()`，修改页面数据，重新渲染后，显示为 `hello world`。