Architecture►第三章：基础规范

埋点方案-页面和视图的显示和离开

[toc]

埋点方案-页面和视图的进入和离开

一、页面进入、离开的监控方案

视图创建基类 LifeCyclePage，使用 route 方法，并提供以下方法

1
2
3
4
5
// 当前页面显示了，底层必须先执行 super.viewDidAppear
void viewDidAppear(AppearBecause appearBecause)

// 当前页面消失了，底层必须先执行 super.viewDidDisappear
void viewDidDisappear(DisAppearBecause disAppearBecause);

二、视图进入、离开的监控方案

场景：运行需要知道页面下的tab、页面下的tab的《子tab/子视图》的浏览时间。

方案1：点击–view_show/hide–不推荐

使用点击 view_show/hide 方案，实现步骤如下：

点击tab1：记tab1 view_show 事件，并记下当前显示的tab，备后续切换的时候为本tab添加 view_hide 事件。

点击tab2：记tab1 view_hide 事件，tab2 view_show 事件，并记下当前显示的tab，备后续切换的时候为本tab添加 view_hide 事件。

缺点：tab点击时候，记下当前显示的tab，备后续切换的时候为本tab添加 view_hide 事件。

方案2：视图是否显示监控–visibility–推荐方案

视图创建基类 LifeCycleView，使用 visibility 方案，并提供以下方法

1
2
3
4
5
// 当前页面显示了，底层必须先执行 super.viewDidAppear
void viewDidAppear(AppearBecause appearBecause)

// 当前页面消失了，底层必须先执行 super.viewDidDisappear
void viewDidDisappear(DisAppearBecause disAppearBecause);

2.1、原理：创建 VisibilityDetector 视图类，并设置 onVisibilityChanged 回调方法；

1
2
3
4
5
6
7
const VisibilityDetector({
    required Key key,
    required Widget child,
    required this.onVisibilityChanged,
  })  : assert(key != null),
        assert(child != null),
        super(key: key, child: child);

优点：不用每个视图(如tab页)去处理。

总结

页面和视图的进入和离开方案，总结如下：

序号 类型 方案 优点与不足
1 页面 LifeCyclePage + route 能比view增加具体显示和离开的原因
2 页面内的视图 LifeCycleView + visibility 只能知道显示、还是离开

End