--- title: 页面运行机制 summary: "介绍小程序页面的运行机制，包括视图层与逻辑层的协作流程及页面生命周期的触发顺序。" questions: - 涂鸦小程序页面的生命周期函数执行顺序是怎样的？ - 视图层和逻辑层在页面初始化过程中是如何协作的？ - 页面从活动状态进入存活状态时会触发哪个生命周期函数？ - 页面第一次渲染完成后会触发什么回调？ - onUnload 生命周期函数在什么场景下会被调用？ --- # 页面运行机制 小程序启动时，将所有页面注册到逻辑层中，等待路由进入具体页面时将其实例化。在启动阶段（或路由变更），触发应用生命周期及页面生命周期。 ## 页面生命周期 小程序由视图层和逻辑层两个部分组成。视图层和逻辑层同时运行。 - 应用逻辑层启动后运行 `app.onLaunch` 和 `app.onShow` 以完成 App 创建，再运行 `page.onLoad` 和 `page.onShow` 以完成 Page 创建。此时，等待视图层初始化完成通知运行。 - 视图层初始化完成通知逻辑层，逻辑层将初始化数据发送给视图层进行渲染。此时，视图层完成第一次数据渲染。 - 第一次渲染完成后，视图层进入就绪状态并通知逻辑层。逻辑层调用 `page.onReady` 函数并进入活动状态。 - 逻辑层进入活动状态后，每次数据修改将会通知视图层进行渲染。当切换页面进入后台，逻辑层调用 `page.onHide` 函数后，进入存活状态。页面返回到前台将调用 `page.onShow` 函数，进入活动状态。当页面返回或重定向到其它页面后，将调用 `page.onUnload` 函数，进行页面销毁。 > 详细有关 `Page` 的生命周期，请参考 [Page](/cn/miniapp/develop/miniapp/framework/api/page)。 下图说明了页面 `Page` 实例过程中，视图层与逻辑层的进程关系及页面生命周期的触发顺序。 > 可逐步在实际业务开发中增加对上图的理解。