溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
某些情況下我們需要對小程序某些用戶的行為進行數據進行統計，比如統計某個頁面的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)
注冊小程序。接受一個 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.log
console.log = function() {
oldLog.call(this, new Date().getTime())
oldLog.apply(this, arguments)
}
同理，我們針對onLaunch 進行猴子補丁
var oldAp = App
App = function(options) {
var oldOnLaunch = options.onLaunch
options['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 = Page
Page = 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-line
wx = newWx
疑惑：為什么要使用替換整個wx對象的方法呢？ 不直接用我們的request 方法 替換 wx.request 方法
var oldRequest = wx.request
wx.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 = App
App = function(options) {
var oldOnError = options.onErrr
options['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://youhost.com/batch', // 后臺數據統計接口
errorUrl: 'https://youhost.com/batch', // 后臺錯誤上報接口
performanceUrl: 'https://youhost.com/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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
