智能小程序页面配置、运行机制及路由

页面介绍

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 生命周期函数。

页面结构

页面结构通过组件标签以及自定义组件标签，进行结构描述。页面由标签、属性和页面数据组成。

{{title}}

更多模板语法，请参考 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

声明页面引用组件。当一个组件被多个页面所引用时，避免重复在页面配置中声明，可使用全局声明的形式。组件路径支持：

1. 绝对路径形式，以 / 开头，表示小程序源码目录。
2. 相对路径形式，以 . 开头，基于当前 json 文件所在目录。
3. 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) 中获取。