基于uni-app的埋点sdk设计

一、统计app激活状态

在App.vue 中 利用onShow生命周期验证 或者操作

onShow: function () {

uni.showToast({

title: 'onShow'

})

},

二、页面级别的统计 （进入页面、停留时长、手机系统信息、网络状态、页面路径、标题）

需要收集的数据

{

"pageType": "leavePage",

"networkType": "wifi",

"pageInfo": {

"pageUrl": "pages/index/newIndex",

"title": ""

},

"entryTime": "2024-04-10 13:18:50",

"leaveTime": "2024-04-10 13:18:51",

"nowTime": "2024-04-10 13:18:51",

"stayTime": 279,

"sysTemInfo": {

"appName": "某某app",

"appVersion": "2.1.4",

"brand": "apple",

"platform": "ios",

"system": "iOS 17.3.1"

},

"pageLoadTime": 873

}

通过混入mixins 每个页面生命周期埋点统计、编写逻辑方法

三、页面内部事件级别的统计 （各种事件信息集合eventTrack（点击、复制、下载、来源某个特定页面的操作）、 手机系统信息、网络状态、页面路径、标题）

需要收集的数据

{

"networkType": "unknown",

"pageInfo": {

"pageUrl": "pages/order/index",

"title": "订单"

},

"sysTemInfo": {

"appName": "某某app",

"appVersion": "2.1.4",

"brand": "xiaomi",

"platform": "android",

"system": "Android 12"

},

"eventTrack": { // 事件所需要的埋点字段

"eventCode": "B0004"

}

}

通过混入mixins 每个页面生命周期埋点统计、编写逻辑方法

四、具体的设计流程

1、创建 埋点sdk方法 pointCom.js

主要三个方法

myPointPage, 页面级别触发的

toDateDetail, 时间转化函数

myPointEvent, 页面内部事件触发的

详细编码

import { pagesObj } from '@/uni-config/pages.js' // 页面路由和标题的映射map

console.log(pagesObj, 'uni-config')

async function