页面介绍
Page 代表应用的一个页面，负责页面展示和交互。每个页面对应一个子目录，一般有多少个页面，就有多少个子目录。它也是一个构造函数，用来指定页面的初始数据、生命周期回调、事件处理函数等。
每个小程序页面一般包含以下文件。
[pagePath].js：注册页面[pagePath].tyml：页面结构[pagePath].tyss：页面样式（可选）[pagePath].json：页面配置（可选）[pagePath].rjs：页面渲染脚本文件（可选）
注册页面
小程序页面必须使用 Page() 函数 注册且只注册一次。
Page({
data: {
title: 'Smart',
},
onShow: function () {
ty.showToast({ title: this.data.title });
},
say: function () {
this.setData({ title: 'hello world' });
},
});以上注册页面对象，且初始化数据为 { title: 'Smart' }，并响应 onShow 生命周期函数。
页面结构
页面结构通过组件标签以及自定义组件标签，进行结构描述。页面由标签、属性和页面数据组成。
<view class="my-view" bind:tap="say">{{title}}</view>更多模板语法，请参考 TYML 语法参考。
页面样式
.my-view {
color: blue;
}页面配置
{
"navigationBarTitleText: "页面名"
}以上示例初始化时展示 Smart 样式表现为蓝色。当单击后调用页面方法 say()，修改页面数据，重新渲染后，显示为 hello world。
[pagePath].json 文件用于配置当前页面的窗口表现。页面配置比 app.json 全局配置简单得多，只能设置 window 相关配置项，但无需写 window 这个键。页面配置项会优先于全局配置项。
配置项
用于设置小程序当前页面的状态栏、导航条、标题、窗口背景色。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| backgroundColor | HexColor | #ffffff | 窗口的背景色。 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色，仅 iOS 支持。 |
| backgroundColorTop | string | #ffffff | 顶部窗口的背景色，仅 iOS 支持。 |
| backgroundTextStyle | string | dark | 下拉 loading 的样式，仅支持 dark 和 light。 |
| disableScroll | boolean | false | 是否禁用页面滚动。默认 false。开启后页面将无法滚动。 |
| enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新。 |
| navigationBarBackgroundColor | HexColor | #ffffff | 导航栏背景颜色，如 #000000。 |
| navigationBarTextStyle | string | black | 导航栏标题颜色，仅支持 black 和 white。 |
| navigationBarTitleText | string | 导航栏标题文字内容。 | |
| navigationStyle | string | default | 导航栏样式。default：默认样式。custom 自定义导航栏，只保留右上角胶囊按钮。 |
| onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为 px。 |
| pageOrientation | string | portrait | 屏幕旋转设置。取值范围：portrait：竖屏，默认值。landscape：横屏。auto：自动。 |
| usingComponents | object | 当前页面引用的自定义组件。 | |
| boardMenus | array[] | 自定义菜单配置。容器版本 ≥ 2.3.0。 |
usingComponents
声明页面引用组件。当一个组件被多个页面所引用时，避免重复在页面配置中声明，可使用全局声明的形式。组件路径支持：
- 绝对路径形式，以
/开头，表示小程序源码目录。 - 相对路径形式，以
.开头，基于当前 json 文件所在目录。 npm三方包。
{
"usingComponents": {
"foo": "/absolute/foo/index",
"foo": "./relative/foo/index",
"foo": "package/es/foo/index"
}
}注意：路径地址必须精确到文件名，不可省略缺省 index。
完整示例
{
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "首页",
"navigationStyle": "default",
"backgroundColor": "#000",
"backgroundTextStyle": "dark",
"backgroundColorTop": "#fff",
"backgroundColorBottom": "#fff",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50,
"disableScroll": false,
"pageOrientation": "portrait",
"usingComponents": {
"foo": "/components/foo/index"
},
"boardMenus": [
{
"key": "home",
"iconPath": "@iconPath1",
"text": "主页"
}
]
}页面运行机制
小程序启动时，将所有页面注册到逻辑层中，等待路由进入具体页面时将其实例化。在启动阶段（或路由变更），触发应用生命周期及页面生命周期。
页面生命周期
小程序由视图层和逻辑层两个部分组成。视图层和逻辑层同时运行。
- 应用逻辑层启动后运行
app.onLaunch和app.onShow以完成 App 创建，再运行page.onLoad和page.onShow以完成 Page 创建。此时，等待视图层初始化完成通知运行。 - 视图层初始化完成通知逻辑层，逻辑层将初始化数据发送给视图层进行渲染。此时，视图层完成第一次数据渲染。
- 第一次渲染完成后，视图层进入就绪状态并通知逻辑层。逻辑层调用
page.onReady函数并进入活动状态。 - 逻辑层进入活动状态后，每次数据修改将会通知视图层进行渲染。当切换页面进入后台，逻辑层调用
page.onHide函数后，进入存活状态。页面返回到前台将调用page.onShow函数，进入活动状态。当页面返回或重定向到其它页面后，将调用page.onUnload函数，进行页面销毁。
详细有关
Page的生命周期，请参考 Page。
下图说明了页面 Page 实例过程中，视图层与逻辑层的进程关系及页面生命周期的触发顺序。
可逐步在实际业务开发中增加对上图的理解。
页面路由
在小程序中所有页面的路由全部由框架进行管理。
路由栈
小程序中的页面路由是一个栈结构，只能通过 ty.navigateTo 和 ty.redirectTo 等方式操作。且页面路由栈最多十层。路由操作则不再生效。
路由方式
对于路由的触发方式以及页面生命周期函数如下：
| 路由方式 | 触发时机 | 路由前页面 | 路由后页面 | 页面栈 |
|---|---|---|---|---|
| 初始化 | 小程序打开的第一个页面 | onLoad onShow onReady | [A] | |
| 打开新页面 | ty.navigateTo | onHide | onLoad onShow onReady | [A, B] |
| 页面重定向 | ty.redirectTo | onUnload | onLoad onShow onReady | [A, C] |
| 页面返回 | ty.navigateBack | onUnload | onShow | [A] |
| Tab 切换 | ty.switchTab | 各种情况请参考下表 | [D] | |
| 重启动 | ty.reLaunch | onUnload | onLoad onShow onReady | [A] |
Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：
| 当前页面 | 路由后页面 | 触发的生命周期（按顺序） |
|---|---|---|
| A | A | Nothing happend |
| A | B | A.onHide(), B.onLoad(), B.onShow() |
| A | B（再次打开） | A.onHide(), B.onShow() |
| C | A | C.onUnload(), A.onShow() |
| C | B | C.onUnload(), B.onLoad(), B.onShow() |
| D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
| D（从转发进入） | A | D.onUnload(), A.onLoad(), A.onShow() |
| D（从转发进入） | B | D.onUnload(), B.onLoad(), B.onShow() |
路由路径 URL
路由路径是一个绝对路径，以 / 开头，后面跟随页面的路径，如 /pages/index/index。路由路径是一个相对于小程序根目录的路径。
路由路径必须是一个有效的路径，在 app.json 中声明过的页面路径。
相对路径模式
相对路径模式是指在路由路径中不以 / 开头，如 index/index。相对路径模式会以当前页面为基准，进行路径的拼接。
Page({
onLoad() {
// 当前页面是 /pages/home
ty.navigateTo({
url: 'index/index', // 跳转到 /pages/index/index (相对于 /pages/home)
})
},
})注意：任何时候优先使用绝对路径模式，避免出现路径错误的情况。除非你明确知道当前页面的路径！
注意事项
- navigateTo, redirectTo 只能打开非 tabBar 页面。 -switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的 onLoad(query) 中获取。
