页面介绍
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/homety.navigateTo({url: 'index/index', // 跳转到 /pages/index/index (相对于 /pages/home)})},
})
注意:任何时候优先使用绝对路径模式,避免出现路径错误的情况。除非你明确知道当前页面的路径!
注意事项
- navigateTo, redirectTo 只能打开非 tabBar 页面。 -switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的 onLoad(query) 中获取。