ana_page_loop 0.1.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 59

简单的全局路由埋点处理插件

建议用在不太复杂的埋点场景中使用。

安装插件 #

在flutter项目中的pubspec.yaml,添加以下依赖项:

dependencies:
  ...
  ana_page_loop: ^x.x.x // 指定插件版本

使用方式 #

1、在MyApp入口处初始化anaPageLoop.init,并且添加监听对象anaAllObs。

import 'package:ana_page_loop/ana_page_loop.dart' show anaPageLoop, anaAllObs;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    anaPageLoop.init(
      beginPageFn: (name) {
        // 加入第三方统计代码(开始统计)
      },
      endPageFn: (name) {
        // 加入第三方统计代码(结束统计)
      },
      routeRegExp: ['/home', '/accountPage'], // 指定过滤的路由,当PageView或Tab组件要单独统计时,当前路由名称需要过滤掉。
      debug: false, // 是否开启调试,会输出路由栈相关信息
      // 自定义替换路由名称(可选参数),用于自定义埋点统计名称
      routeName: {
        '/home': '热门新闻', // 将原始/home路由名称 替换成 热门新闻
        '/search': '搜索页面',
      },
    );
    return MaterialApp(
      navigatorObservers: [
        // 添加路由监听
        ...anaAllObs(),
      ],
    );
  }
}

常规页面监听埋点处理完成,如有tab切换页面独立统计的,需要单独配置继承类

anaPageLoop.init参数介绍

参数类型default说明
beginPageFnFunction添加第三方埋点统计代码beginPageFn,与endPageFn配对使用
endPageFnFunction添加第三方埋点统计代码endPageFn,结束统计
routeRegExpList自定义过滤某些的路由统计
debugboolfalse是否开启调试,会输出路由栈相关信息
routeNameMap<String, String>自定义替换原始路由名称,用于埋点统计名称

anaPageLoop相关方法介绍
#

import 'package:ana_page_loop/ana_page_loop.dart' show anaPageLoop;

// 手动添加某页面埋点,传入当前页面名称(自定义)。只有特殊需求才需要手动添加
anaPageLoop.beginPageView('A页面'); // A页面 开始统计,和endPageView配对使用
anaPageLoop.endPageView('A页面'); // A页面 结束统计

anaPageLoop.pause(); // 临时暂停anaPageLoop监听流,可被唤醒
anaPageLoop.resume(); // 唤醒anaPageLoop流

anaPageLoop.close(); /// 完全关闭anaPageLoop监听流

PageViewListenerMixin类介绍 #


监听带有PageController类的组件页面,并且自动记录埋点事件。

首先在anaPageLoop.init中(routeRegExp)配置过滤掉当前route路由名称,然后继承PageViewListenerMixin类,演示PageView组件页面具体如下:

// 当前路由页面名称是 /home
class _HomeBarTabsState extends State<HomeBarTabs> with PageViewListenerMixin {
  PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

  @override
  void dispose() {
    pageController?.dispose();
    super.dispose();
  }

  // 实现PageViewListenerMixin类上的方法
  @override
  PageViewMixinData initPageViewListener() {
    return PageViewMixinData(
      controller: pageController, // 传递PageController控制器
      tabsData: ['首页', '分类', '购物车', '我的中心'], // 自定义每个页面记录的名称
    );
  }

  // 调用如下几个生命周期
  @override
  void didPopNext() {
    super.didPopNext();
  }

  @override
  void didPop() {
    super.didPop();
  }

  @override
  void didPush() {
    super.didPush();
  }

  @override
  void didPushNext() {
    super.didPushNext();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: pageController, // 控制器
        children: <Widget>[],
      ),
      // ...
    );
  }
}

TabViewListenerMixin类介绍 #

监听带有TabController类的组件页面,并且自动记录埋点事件。

首先在anaPageLoop.init中(routeRegExp)配置过滤掉当前route路由名称,然后继承TabViewListenerMixin类

演示TabBarView组件页面具体如下:

// 当前路由页面名称是 /accountPage
class _AccountPageState extends State<HomeBarTabs> with SingleTickerProviderStateMixin, TabViewListenerMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    _tabController?.dispose();
    super.dispose();
  }

  // 实现TabViewListenerMixin类上的方法
  @override
  TabViewMixinData initPageViewListener() {
    return TabViewMixinData(
      controller: _tabController, // 传递tab控制器
      tabsData: ['热门', '头条', '热点', '趣事'], // 用于记录每个tab页面的名称
    );
  }

  // 调用如下几个生命周期
  @override
  void didPopNext() {
    super.didPopNext();
  }

  @override
  void didPop() {
    super.didPop();
  }

  @override
  void didPush() {
    super.didPush();
  }

  @override
  void didPushNext() {
    super.didPushNext();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        controller: _tabController, // 控制器
        children: <Widget>[],
      ),
      // ...
    );
  }
}

0.1.7 #

容错处理

0.1.6 #

代码清余减小体积

0.1.4 #

修复mixin类初始前概率性调用问题

0.1.3 #

新增 可自定义路由埋点名称

0.1.2 #

优化调整loop逻辑

0.1.1 #

flutter路由栈管理,供页面统计埋点功能使用。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:ana_page_loop/ana_page_loop.dart';

import 'routes.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    anaPageLoop.init(
      beginPageFn: (name) {
        print('记录开始》》》$name');
      },
      endPageFn: (name) {
        print('记录结束》》》$name');
      },
      routeRegExp: ['/home', 'MyTabsPage'], // 过滤路由
      debug: true,
      // 自定义替换路由名称, key原始路由名称: value新路由名称
      routeName: {
        '首页': '首页2',
        'Search': '二级页面Search',
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: routesData,
      navigatorObservers: []..addAll(anaAllObs()),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  ana_page_loop: ^0.1.7

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:ana_page_loop/ana_page_loop.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
19
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
59
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • ana_page_loop that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test