HarmonyOS 鸿蒙Next埋点探究

背景

大多数软件产品上线前，都会采用有规则的日志来对软件进行相关数据的采集，这个过程称为：埋点，采集的数据主要用于产品分析。

埋点技术已在PC端, 移动端非常成熟，并且有大批量以此为生的公司。

本篇将探究一下HarmonyOS中的埋点，目标是统计用户浏览页面轨迹

准备

• 了解移动端的埋点技术方案
• 了解HarmonyOS页面生命周期

声明周期

先回顾一下有关页面显示的生命周期

UIAbility

在HarmonyOS中这个算是一个页面容器，因为它仅仅加载带@Entry装饰的自定义组件，几乎所有和业务相关的逻辑都是从自定义组件中触发。

这个容器共有四个状态，创建（Create），回到前台（Foreground）, 回到后台(Background), 销毁(Destrory)

被@Entry修饰的自定义组件

在HarmonyOS中的业务页面，实际上指的就是这个。这个对移动端的Web开发人员 ，React Native开发人员，Flutter开发人员比容易接受。

注意：这种自定义组件的生命周期，容易产生混淆

被 @Entry 修饰

总共有三个生命周期接口

• onPageShow，页面每次显示时触发一次
• onPageHide，页面每次隐藏时触发一次
• onBackPress，当用户点击返回按钮时触发

被 @Component 修饰

• aboutToAppear，组件即将出现时回调该接口
• aboutToDisappear，自定义组件析构销毁之前执行

预研小结

• 对于UIAbility的生命周期监测，可以监听事件‘abilityLifecycle‘事件，进而实现应用全局监测
• 对于@Entry修饰的组件生命周期监测，目前还没有可统一监听的事件，只能手动在相应的方法中添加埋点

本篇探究的对象就是针对@Entry修饰的组件，实现生命周期的统一监听

探究

1）注解/装饰器方案

HarmonyOS 应用研发语言ArkTS，是基于TypeScript扩展而来，因此，理论上是可以自定义装饰器来完成对函数执行时的统计。

TypeScript装饰器可以了解一下

准备代码

定义一个统计方法

export function Harvey(params?: string) {
  return function(target:any, methodName:any, desc:any){
    console.log(params);
    console.log(JSON.stringify(target));
    console.log(JSON.stringify(methodName));
    console.log(JSON.stringify(desc));
  }
}

布局测试页面

[@Entry](/user/Entry)
[@Component](/user/Component)
struct RadomIndex {
 
  @Harvey('注解-aboutToAppear')
  aboutToAppear(){
     console.log('方法内-aboutToAppear')
  }

  @Harvey('注解-aboutToDisappear')
  aboutToDisappear(){
    console.log('方法内-aboutToDisappear')
  }

  @Harvey('注解-onPageShow')
  onPageShow(){
    console.log('方法内-onPageShow')
  }

  @Harvey('注解-onPageHide')
  onPageHide(){
    console.log('方法内-onPageHide')
  }

  @Harvey('注解-onBackPress')
  onBackPress(){
    console.log('方法内-onBackPress')
  }

  @Harvey('注解-build')
  build() {
     ......
  }
}

运行效果

日志分析

• 所有的生命周期上的装饰器方法全部跑了一遍，即 “注解-” 开头的日志
• 生命周期API最后运行，即 “方法内-” 开头的日志

2）TypeScript AST

结论

这种方案暂时没有尝试成功

相关链接

3) 脚本硬插入代码

这个方案比较原始，属于最笨的方法。

适用编译场景： 打包机编译

原因：编译前会直接修改源文件

大概流程如下

最终效果

尝试

创建埋点文件

import common from '@ohos.app.ability.common';

export default class PageLifecycle{

  public static record(uiContext: common.UIAbilityContext, fileName: string,  funName: string){
    console.log('埋点：' + uiContext.abilityInfo.bundleName + ' -> ' + uiContext.abilityInfo.moduleName +
    ' -> ' + uiContext.abilityInfo.name + ' -> ' + fileName + ' -> ' + funName)
  }

}

插入时机

entry 模块中的 hvigorfile.ts

注意： hvigorfile.ts 文件中提示文件不能修改，暂时不用去关心它

脚本代码

import * as fs from 'fs';
import * as path from 'path';

const INSERT_FUNCTION: string[] = [
  'aboutToAppear',
  'aboutToDisappear',
  'onPageShow',
  'onPageHide',
  'onBackPress'
]

const PAGELIFECYCLE_NAME = 'PageLifecycle.ets'

//开始复制埋点文件
copyConfigFile(process.cwd() + `/Project/${PAGELIFECYCLE_NAME}`, __dirname + `/src/main/ets/${PAGELIFECYCLE_NAME}`)

//遍历所有带[@Entry](/user/Entry)装饰器的自定义组件
findAllPagesFiles(__dirname + '/src/main/ets/', __dirname + '/src/main/ets/', PAGELIFECYCLE_NAME);

结尾

内容不多，祝你好运