uniapp+vue自定义埋点数据收集和提交

公司开发了一款为高考学生服务的APP，技术站选用的uniapp+vue全家桶，是一款非常实用的高考志愿管理服务应用软件。开发后期领导新提出需求，需要自己写事件埋点，自己统计PV、UV数据。经过不懈的加班抠唆出了些许的优化代码，在此做个记录：

首先是明确需要收集什么信息和什么时候收集信息：经过和相关同事探讨后我们一致通过了一下几个字段为必要数据

收集什么信息？

 // 规定传参的字段
  const dataOrder = [
    'timeStamp',
    'uuid',
    'appChannel',
    'eventType',
    'path',
    'loginType',
    'userId',
    'appVersion',
    'netType'
  ] 

timeStamp是时间戳，uuid是设备的唯一标识，appChannel是app的下载渠道，eventType是该数据的事件类型（页面/事件），path页面的路径，loginType登录状态（0非登录；1登录），userId用户的唯一标识，appVersion是app的版本号，netType是网络类型。

什么时候收集发送信息？

上述信息中大多都和设备有关系并且收集一次足够，所以需要咱们在onLaunch应用生命周期也就是当uni-app 初始化完成时（全局只触发一次）完成大多数的数据收集，收集到数据之后存储到vuex状态状态管理中，方便在全局其他地方使用，其中’timeStamp’、‘timeStamp’、‘eventType’、‘path’、'loginType’是时效性强的数据需要再传输的时候在获取。

发送信息的时机分两种情况，一种是进入页面显示内容的时候，另外一种就是事件类触发的时候，比如app的显示和隐藏、点击按钮的触发等，事件类一定是触发的时候发送信息，那进入页面的时候需要在每个页面都写一遍发送方法吗？这样既不美观也不好维护，容易漏写忘记，显然不是一个好的办法。这个时候想起vue的mixin,可以动态的注册组件的生命周期，等后边实现的时候再看代码实现

// 事件类型 是事件还是页面
const _S_TYPE = {
  EVENT: 'event',
  PAGE: 'page'
} 

代码实现

基础信息罗列清楚后就开始撸代码吧

首先单独弄一个统计的statistics模块

/**
 * index.js
 * 统计埋点的所有方法
*/
import store from '@/store/index.js'
import Api from '@/api/login/login.js' // 获取用户数据的一个接口
import { sendStatData } from '@/api/statistics/index.js' // 发送统计数据的接口

// 规定传参的字段
const dataOrder = [
  'timeStamp',
  'uuid',
  'appChannel',
  'eventType',
  'path',
  'loginType',
  'userId',
  'appVersion',
  'netType'
]
// 事件类型 是事件还是页面
const _S_TYPE = {
  EVENT: 'event',