页面埋点

页面埋点在本示例中分为两类：监听页面切换和采集页面加载性能。以下将从Navigation和Router两种路由方案进行讲解。

Navigation路由：

针对Navigation方案，UIObserver提供navDestinationSwitch事件，用于监听页面切换，并支持在回调中获取当前页面的切换信息。在EntryAbility中统一注册UIObserver的navDestinationSwitch事件监听。

// entry\src\main\ets\entryability\EntryAbility.ets
uiContext.getUIObserver().on('navDestinationSwitch', (info) => {
  const switchCallback = CallbackManager.getInstance().getSwitchCallback();
  switchCallback(info);
});

回调函数中的info包含context、from、to和operation，用于标识页面的来源和去向。

此外还可以通过UIObserver的on("navDestinationUpdate")事件监听页面的显示与隐藏，回调传参中包含页面名称、状态信息以及页面的唯一标识ID。

Router路由：

针对Router路由方案，UIObserver提供了on('routerPageUpdate')监听事件，在页面切换过程中触发相应回调。

// entry\src\main\ets\entryability\EntryAbility.ets
uiContext.getUIObserver().on('routerPageUpdate', (info) => {
  const switchCallback = CallbackManager.getInstance().getSwitchCallback();
  switchCallback(info);
});

比如调用Router.pushUrl从A页面跳转到B页面时，该回调会被触发三次：第一次触发的页面名称为PageB，页面状态为ABOUT_TO_APPEAR即将显示；第二次触发的页面名称为PageA，页面状态为ON_PAGE_HIDE页面隐藏；第三次触发的页面名称为PageB，页面状态为ON_PAGE_SHOW页面显示。回调传参同样包含页面上下文、触发事件的页面名称等等。

| 字段名  | 类型                                                         | 含义                     |
| :------ | :----------------------------------------------------------- | :----------------------- |
| context | UIContext                                                    | 页面上下文信息           |
| index   | number                                                       | 触发页面在路由栈中的位置 |
| name    | String                                                       | 触发页面名称             |
| path    | String                                                       | 触发页面路径             |
| state   | [RouterPageState](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-observer#routerpagestate) | 页面状态                 |
| pageId  | String                                                       | 页面唯一标识             |

页面加载性能：

页面加载性能可以通过计算首帧绘制与绘制结束的时间差来判断。UIObserver同样提供了on("willDraw")事件和on("didLayout")事件，可以在首帧监听中记录初始时间，在完成绘制时记录结束时间。此事件监听需要在页面中注册，Navigation与Router路由相同，本示例以Navigation为例。在aboutToAppear注册on("willDraw")和on("didLayout")事件。

import { hilog } from '@kit.PerformanceAnalysisKit';
import { router } from '@kit.ArkUI';


@Entry
@Component
struct NavigationPage {
  // ...


  aboutToAppear(): void {
    const uiContext = this.getUIContext();
    // Registering a Listening Event
    uiContext.getUIObserver().on('willDraw', () => {
      this.startTime = Date.now();
    })
    uiContext.getUIObserver().on('didLayout', () => {
      this.endTime = Date.now();
    })
  }
  // ...
  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('100%')
          .onClick(() => {
            // Put the NavDestination page information specified by name into the stack.
            this.pageInfos.pushPath({ name: 'pageOne' });
          })
        Button('Use interception', { stateEffect: true, type: ButtonType.Capsule })
          // ...
          .onClick(() => {
            this.isUseInterception = !this.isUseInterception;
            if (this.isUseInterception) {
              // Register Interceptor.
              this.registerInterception();
            } else {
              // Do not use interceptors.
              this.pageInfos.setInterception(undefined);
            }
          })
        Button($r('app.string.back'), { stateEffect: true, type: ButtonType.Capsule })
          // ...
          .onClick(() => {
            router.back();
          })
      }
      // ...
    }
    // ...
  }
}