微信小程序数据统计和错误统计的实现方法

在某些情况下，我们需要统计一些小程序用户的行为，比如某个页面的UV UV、PV，某个功能的使用情况。让产品了解产品的整体功能。我们很多人都在网页上使用过Google Statistics，小程序中也有一些第三方的数据统计库，比如腾讯的MTA等等。但是第三方统计数据库的功能过于简单，无法满足需求，或者需要收费。(留下了贫困的眼泪。)等等，又不是你出钱，怕什么？贵一点就是贵一点。

嗯，没错。但是，公司团队希望实现一套完整的自己的数据统计系统来满足自己的需求。所以用第三方还是没用的。

那么，具体应该算什么呢？

生产部经理

想知道用户是如何进入我们的小程序的？用户在我们的小程序中停留的时间最长的是哪个页面？用户平均停留时间是多少？想知道最近我们开发的功能有多少人使用吗？我想统计一下有多少用户点击了小程序中的一些按钮来发展自己

在客户端重现bug总是很困难的。如果你能知道用户的手机型号、微信版本、网络环境、页面参数，以及用户出错时的错误信息，你想知道我们的小程序什么时候启动。界面在用户端的平均响应时间是多少？我们可以根据产品经理的要求知道哪些接口报告错误。Ta想要的是数据统计要实现的功能。对于开发，我们更关注错误系统小程序的性能。

好吧，在这里，我们的需求是明确的。就是实现了一套不仅可以统计常见的被埋没的数据，还可以统计一些小程序中特殊触发的事件，比如pawench、appHide等。并且还可以计算错误。

好了，我们先来看看如何满足产品的需求

当用户进入小程序时，他可以在小程序onLaunch回调中获取参数的场景值，这样他就可以知道用户是如何进入小程序的。小案子，对我来说很难。

嗯，第一个要求已经实现了，那么第二个怎么算呢？如何计算一页的停留时间？

这也难倒我了。当用户进入页面时会触发onShow事件，当他们离开页面(或剪切背景)时会触发onHide事件。我只需要在左边和右边记录时间，然后减去两次。

page({ data : { begintime : 0，endTime: 0 }，onShow:函数(){ //页面显示时做点什么。this . setdata({ begintime : new Date()。getTime() }) }，onHide:函数(){ //页面隐藏时做点什么。让stayTime=新日期()。getTime()-this . BeginTime；//这是用户在此页面的停留时间}、})等。这样需求才能真正实现，以防产品需要统计所有面孔的停留时间？为什么我们不把这写在每一页上？有没有更好的办法？

好了，接下来是数据统计实现的重点，就是截取微信的原始事件，这样我们在触发特殊事件的时候可以做一些统计。同时，我们还需要截取微信的网络请求的方法，这样就可以得到与网络请求相关的数据。最后，为了统计错误，我们需要截取微信错误的方法。

1.特殊事件的监控

应用程序(对象对象)

注册小程序。接受一个Object参数，它指定了小程序的生命周期回调等。

App()必须在app.js中调用，并且只能调用一次。否则，会有意想不到的后果。

拦截全局事件：以下是App注册方式小程序的官方文档：App({ on launch(options){//启动时做一些初始的事情。}，onShow(选项){ //显示时做点什么。}，onHide () { //隐藏时做点什么。}，onError (msg) { console.log(msg) }，Global data : '我是global data'})如果我们想在小程序onLaunch的时候打印一个hello Word，有什么方法实现呢？

方法1:

直接用onLaunch方法写

启动时(选项){console.log ('hello world')}方法2:

使用猴贴法猴贴

猴贴主要有以下用途：

替换方法、属性等。在运行时不修改第三方代码，并添加不支持的函数。在运行时，给内存中的对象添加补丁，而不是给磁盘的源代码添加栗子。如果我们首先在console.log方法中打印出当前时间戳，我们可以这样做：

varoldlog=console . log console . log=function(){ oldlog . call(this，newdate()。gettime ()) oldlog.apply (this，arguments)}同样，我们为onLaunch修补猴子

var oldAp=AppApp=function(options){ var oldOnLaunch=options . onLaunch options[' onLaunch ']=function(t){//做一些我们想做的事console.log ('hello word . '))//调用原来的onlunch方法oldonrunch . call(this，t)}//调用原来的App方法oldApp(options) //想象一下，小程序应该这样调用onlunch方法：options。onrunch(params)}//有时候，我们可能不会注册某个事件，比如页面的onShow，所以我们需要判断参数是否传递了对应的方法Page({ onLoad (options) {}，OnHide(options){ })//针对这种情况，我们需要写varold Page=Page Page Page=function(options){ If(options [' onShow ']){//如果你在Show上注册了，这个回调var oldOnShow=options . onShow//onShow方法调用总是在Show上传递一个对象options ['调用(this，t)} }//来调用原来的Page方法。旧页面。应用(null，[]。切片。call(arguments))//注意：以下两种写法都会报错：VM 2335633601 Options不是对象3360 { ' 0 ' : } } Pages/badge . js中出现问题的具体原因还没有找到。//oldPage.call (null，arguments)//old page(arguments)}通过上面的方法，我们可以截取App方法注册的一些全局方法，比如onShow、onShow、onHide，以及onShow、onHide、onLoad、onPullDownRefresh等页面注册事件。

2.监控网络请求

想法：拦截微信的请求事件。

let请求={ request:函数{让成功=e[0].成功，失败=e[0].失败，beginTime=smaUtils.getTime()，endTime=0 //拦截请求成功方法e[0].success=function(){ end time=Smautils。GetTime()常量性能={ type :常量映射。性能，event: eventMap.wxRequest，url: e[0].url，状态：参数[0]。statusCode，begin: beginTime，end: endTime，total : end time-begin time } smautils。loginfo('成功绩效： '，绩效)//这里做上报的事情//SMA。绩效报告(绩效)成功。apply(this，[].slice.call(arguments)) } //拦截请求失败方法e[0].fail=function(){ end time=Smautils。GetTime()常量性能={ type :常量映射。性能，event: eventMap.wxRequest，url: e[0].url，状态：参数[0]。statusCode，begin: beginTime，end: endTime，total : end time-begin time } smautils。loginfo(' fail performance : '，performance) //这里做上报的事情//SMA。性能报告(性能)失败失败。apply(this，[].slice.call(arguments)) }，} //替换微信相关属性让旧的Wx=Wx，新的wx={ }用于(wx中的var p){ if(Request[p]){ }让p2=p . tostring()新wx[p2]=function(){ Request[p2](参数)//调用原来的请求方法旧Wx[p2].apply(oldWx，[])。切片。call(arguments))} } else { new wx[p]=oldWx[p]}//eslint-disable-next-line wx=new wx疑惑：为什么要使用替换整个女式特大号女式特大号对象的方法呢？不直接用我们的请求方法替换请求方法

var oldRequest=wx。请求wx。request=function(e){//DosMeming()；console.log('请求拦截操作.')oldRequest.call(this，e)；//调用老的请求方法}//结果报错了：//TypeError:无法设置只有getter3的[对象对象]的属性请求。错误的监听

3.1 拦截应用里注册的载入错误事件

var oldAp=AppApp=函数(选项){ var oldOnError=选项。onErrr选项[' onErrr ']=函数(t){//做一些我们自己想做的事情console.log('统计错误.'，t) //调用原来的函数方法oldOnError.call(this，t) } //调用原来的应用方法旧App(选项)}3.2拦截错误

控制台。error=function(){ var e=[]。切片。调用(参数)if(！e . length){ return true } const currrroute=Smautils。GetPagePath()//统计错误事件//SMA。错误报告({ event :事件映射。onerror，route: currRoute，errrMsg:参数[0]}) smaUtils.logInfo('捕捉到错误事件，'，e) oldError.apply(控制台，e) }至此，我们已经有能力在小程序发起请求时，发生错误时，生命周期或者特殊函数回调时，我们都能在里面做一些我们想要的数据统计功能了。

说了这么多大家估计也看累了。鉴于篇幅，具体的代码就不在这里贴了。

最终实现的数据统计模块大致实现了以下功能：

普通埋点信息上报功能错误信息上报功能性能数据上报功能具体的上报时机支持配置支持指定网络环境上报支持统计数据缓存到微信本地功能整个统计代码的配置文件如下：

const wxa config={ project : ' my miniprogram '，//项目名称trakurl3360 ' https://youhost.com/batch',//后台数据统计接口error URL : ' https://youhost.com/batch',//background错误报告接口performance URL 3360 ' https://youhost.com/batch',//background性能报告接口版本： '0.1 '，Prefix3360' _ wxa _ '，优先级： ['track '，' performance '，' error']，//发送请求的优先级，发送时，usestorage: true将依次发送，//是否关闭errorReport: false，//是否启用错误报告performanceReport: false，//接口性能报告给maxReportNum: 20，//一次报告的最大项目数为IntervalsTime3360 15，//定期报告的时间间隔以S为单位，只有启用定期报告时才有效。Networklist : ['WiFi '，' 4G '，' 3G '，//允许报告网络环境的机会：' PageHome'//PageHome，appHide，real(实时报告)，timing(定时报告)，四选一}导出Default WXA Config时，特别报告，报告。

该项目已传输到GitHub-GitHub门户网站-wxa

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。