|
某些情况下我们需要对小程序某些用户的行为进行数据进行统计，比如统计某个页面的UV, PV等，统计某个功能的使用情况等。好让产品对于产品的整个功能有所了解。 在网页里，我们很多人都用过谷歌统计，小程序里也有一些第三方数据统计的库, 比如腾讯的MTA等等。 但是，第三方的数据统计库要么功能太简单，满足不了需求，要么就是要收费。（留下了贫穷的泪水。） 等等，又不是你出钱，怕啥？ 贵一点就贵一点呀。 嗯，说的没错。但是，公司团队内部想实现一套完整的自己的数据统计系统以满足自己的需求。所以，还是没有用第三方的。 所以，具体要统计些啥？ 产品经理
开发自己
针对产品经理的需求，我们可以知道，Ta想要的是就是数据统计要实现的功能。对于开发来说，我们关注的更多就是错误统小程序性能这块的东西。 好，到这里，我们需求是明白了。就是要实现一套既能统计普通的埋点数据，也要能统计到小程序里一些特殊触发的事件，比如appLaunch, appHide 等，还要可以统计错误。 好，那先来看看如何实现产品的需求吧 用户进入小程序可以在 小程序 onLaunch 回调里拿到参数 的scene 值，这样就可以知道用户是怎么进入小程序的了。小case, 难不到我。 嗯，第一个需求实现了，那如何统计第二个呢？如何统计某个页面的停留时间呢？ 这也难不倒我，用户在进入页面时会触发onShow 事件， 同样，在离开页面（或者切后台时）会触发onHide事件，我只需要在onShow里记录一下时间，同时在onHide 里也记录一下时间，把两个时间一减就可以了。 Page({data: {beginTime: 0,endTime: 0},onShow: function() {// Do something when page show.this.setData({beginTime: new Date().getTime()})},onHide: function() {// Do something when page hide.let stayTime = new Date().getTime() - this.beginTime;// 这个就是用户在这个页面的停留时间了},})复制代码 等等，这样确实实现了需求，万一产品要统计所有也面的停留时长？ 那我们岂不要在每一个页面都这样写一遍？有没有更好的方法呢？ 好，接下来就是数据统计实现的要点了，即拦截微信原生事件，这样可以在某个特殊事件触发时，做一些我们统计的事情。同时，还要拦截微信发生网络请求的方法，这样可以拿到网络请求相关的数据，最后，为了能统计到错误，还需要拦截微信发生错误的方法。 1.特殊事件的监听 App(Object object)注册小程序。接受一个 App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。
App({onLaunch (options) {// Do something initial when launch.},onShow (options) {// Do something when show.},onHide () {// Do something when hide.},onError (msg) {console.log(msg)},globalData: 'I am global data'})复制代码 假如我们要在小程序onLaunch 时打印一句hello Word，我们有哪些方法实现？ 方法1： 直接写在onLaunch方法里 onLaunch (options) {console.log('hello World')}复制代码 方法2： 使用 monkey patch方法 猴子补丁(monkey patch)
举个栗子，假如我们在console.log 方法里都先打印出当前的时间戳，我们可以这样： var oldLog = console.logconsole.log = function() {oldLog.call(this, new Date().getTime())oldLog.apply(this, arguments)}复制代码 同理，我们针对onLaunch 进行猴子补丁 var oldAp = AppApp = function(options) {var oldOnLaunch = options.onLaunchoptions['onLaunch'] = function(t) {// 做一些我们自己想做的事情console.log('hello word....')// 调用原来的onLaunch 方法oldOnLaunch.call(this, t)}// 调用原来的App 方法oldApp(options)// 想像一下，小程序内部调用onLaunch 方法应该是这样子的：options.onLaunch(params)}// 问题，有的时候，我们可能没有注册某一个事件，比如页面的onShow, 所有，我们在替换的时候还需要判断一下参数是否传了对应的方法Page({onLoad (options) {},onHide (options) {}})// 针对这种情况，我们需要这样写var oldPage = PagePage = function(options) {if (options['onShow']) {// 如过有注册onShow 这个回调var oldOnShow = options.onShow// onShow 方法调用时都是 传了一个对象options['onShow'] = function(t) {// doSomething()oldOnShow.call(this, t)}}// 调用原来的Page 方法。oldPage.apply(null, [].slice.call(arguments))// 注意： 下面这两种写都会报错: VM23356:1 Options is not object: {"0":{}} in pages/Badge.js 问题具体原因暂时未找到。// oldPage.call(null, arguments)// oldPage(arguments)}复制代码 通过上面的方法，我们可以拦截了 App 方法注册的一些全局方法，比如 onLaunch , onShow, onHide, 和Page 注册的事件如 onShow, onHide， onLoad, onPullDownRefresh, 等页面注册事件。 2.网络请求的监听 思路： 拦截微信的请求事件。 let Request = {request: function (e) {let success = e[0].success,fail = e[0].fail,beginTime = smaUtils.getTime(),endTime = 0// 拦截请求成功方法e[0].success = function () {endTime = smaUtils.getTime()const performance = {type: constMap.performance,event: eventMap.wxRequest,url: e[0].url,status: arguments[0].statusCode,begin: beginTime,end: endTime,total: endTime - beginTime}smaUtils.logInfo('success performance:', performance)// 这里做上报的事情// SMA.performanceReport(performance)success && success.apply(this, [].slice.call(arguments))}// 拦截请求失败方法e[0].fail = function () {endTime = smaUtils.getTime()const performance = {type: constMap.performance,event: eventMap.wxRequest,url: e[0].url,status: arguments[0].statusCode,begin: beginTime,end: endTime,total: endTime - beginTime}smaUtils.logInfo('fail performance:', performance)// 这里做上报的事情// SMA.performanceReport(performance)fail && fail.apply(this, [].slice.call(arguments))}},}// 替换微信相关属性let oldWx = wx,newWx = {}for (var p in wx) {if (Request[p]) {let p2 = p.toString()newWx[p2] = function () {Request[p2](arguments)// 调用原来的wx.request 方法oldWx[p2].apply(oldWx, [].slice.call(arguments))}} else {newWx[p] = oldWx[p]}}// eslint-disable-next-linewx = newWx复制代码 疑惑：为什么要使用替换整个wx对象的方法呢？ 不直接用我们的request 方法 替换 wx.request 方法 var oldRequest = wx.requestwx.request = function(e) {// doSomething();console.log('请求拦截操作...')oldRequest.call(this, e); // 调用老的request方法}// 结果报错了：// TypeError: Cannot set property request of [object Object] which has only a getter复制代码 3.错误的监听 3.1 拦截App里注册的 onError事件 var oldAp = AppApp = function(options) {var oldOnError = options.onErrroptions['onErrr'] = function(t) {// 做一些我们自己想做的事情console.log('统计错误....', t)// 调用原来的onLaunch 方法oldOnError.call(this, t)}// 调用原来的App 方法oldApp(options)}复制代码 3.2 拦截 conole.error console.error = function() {var e = [].slice.call(arguments)if (!e.length) { return true }const currRoute = smaUtils.getPagePath()// 统计错误事件// SMA.errorReport({event: eventMap.onError, route: currRoute, errrMsg: arguments[0]})smaUtils.logInfo('捕捉到error 事件,', e)oldError.apply(console, e)}复制代码 至此，我们已经有能力在小程序发起请求时，发生错误时，生命周期或者特殊函数回调时，我们都能在里面做一些我们想要的数据统计功能了。 说了这么多大家估计也看累了。鉴于篇幅,具体的代码就不在这里贴了。 最终实现的数据统计模块大致实现了以下功能：
整个统计代码的配置文件如下： const wxaConfig = {project: 'myMiniProgram', // 项目名称trackUrl: 'https:///batch', // 后台数据统计接口errorUrl: 'https:///batch', // 后台错误上报接口performanceUrl: 'https:///batch', // 后台性能上报接口version: '0.1',prefix: '_wxa_',priority: ['track', 'performance', 'error'], // 发送请求的优先级，发送时，会依次发送useStorage: true, // 是否开启storage缓存debug: false, // 是否开启调试（显示log）autoTrack: true, // 自动上报 onShow, onHide, 分享等 内置事件errorReport: false, // 是否开启错误上报performanceReport: false, // 接口性能上报maxReportNum: 20, // 当次上报最大条数intervalTime: 15, // 定时上报的时间间隔，单位 s, 仅当开启了定时上报有效。networkList: ['wifi', '4g', '3g'], // 允许上报的网络环境opportunity: 'pageHide' // pageHide、appHide、realTime(实时上报)、timing(定时上报) 上报的时机，四选一}export default wxaConfig复制代码 具体上报时，上报的数据结构大致长这样： 项目已传到GitHub -> GitHub传送门-wxa
|
|
|
