本篇文章給大家?guī)硪粋€小程序?qū)崙?zhàn)，手把手教大家實現(xiàn)一個簡單小程序監(jiān)控功能，希望對大家有所幫助！

在此之前，我們的小程序一旦報錯，全靠用戶截圖反饋，開發(fā)者再一點點去復(fù)現(xiàn)

后面就再想，有沒有個東西可以去記錄用戶的行為，如果小程序報錯則自動將用戶的操作記錄上傳到服務(wù)器并通知開發(fā)者處理呢？

后面才知道原來這個就叫前端監(jiān)控。

當(dāng)然本文講的是比較簡單的，因為難的我也不會而且目前還沒有參與開發(fā)真正的項目。。

實現(xiàn)的這個小程序監(jiān)控有什么功能？

1）記錄用戶進出頁面的時間
2）監(jiān)聽所有點擊事件
3）記錄用戶的大概操作軌跡。
4）云函數(shù)調(diào)用失敗自動上報數(shù)據(jù)庫提醒開發(fā)者處理。

實現(xiàn)記錄用戶進出頁面的記錄

我們都知道小程序有幾個生命周期函數(shù)，其中，我選擇的是在onShow,onHide,unload這三個生命周期進行記錄。

比較笨的方法就是直接在每個頁面的生命周期函數(shù)里進行記錄頁面顯示和隱藏/卸載的時間，但這太重復(fù)了，

所以我們可以給這幾個生命周期函數(shù)再套一層（在Javascript設(shè)計模式中這個叫裝飾者模式）

新的問題又來了，如何給所有事件再套一層呢？

我們先看看一個page的index.js文件

通過向Page這個方法傳入一個對象， 而這個對象里就包含了所有的事件（點擊，滑動，CSS3動畫等等），生命周期。

所以我們可以自定義一個方法去代替Page這個方法， 在這個方法里拿到傳進來的對象進行修改， 最后記得執(zhí)行一遍原有的Page(Obj)即可。 看代碼結(jié)構(gòu)

代碼其實很簡單，函數(shù)一被調(diào)用，讀取緩存，如果data存在，則往數(shù)組元素追加加當(dāng)前頁面的信息， 如果數(shù)組長度大于10則剔除第一個元素，保持數(shù)組長度在11。

之所以要使用定時器，是因為在測試中如果沒有加定時器有時候讀取不到最新的數(shù)據(jù)， 拿到老的數(shù)據(jù)進行修改而后進行賦值最后重新設(shè)置緩存（因為在onshow函數(shù)執(zhí)行的時候，上一個頁面的onhide函數(shù)不一定執(zhí)行完畢，而在這個函數(shù)又會修改緩存，所以導(dǎo)致onshow函數(shù)里拿到的并不是最新的緩存，導(dǎo)致信息丟失。）

看緩存結(jié)果：

實現(xiàn)對所有點擊事件的監(jiān)聽

1）最簡單方法就是用發(fā)布訂閱的模式去實現(xiàn)，但是太麻煩了。

2）給頁面內(nèi)的所有事件再套一層，事件觸發(fā)會有一個參數(shù)e，判斷e.type即可。

看代碼

最后返回對原函數(shù)的調(diào)用， 接下來看看replaceOld這個函數(shù)，它實現(xiàn)的就是對原有的事件進行一次包裝（裝飾者模式）

對頁面內(nèi)的每一函數(shù)對執(zhí)行replace這個方法。

有什么用呢？

我們可以看到這個函數(shù)把原有的方法進行了一次包裝，具體怎樣包裝就看傳進來的這個函數(shù)replacement，

這個函數(shù)最后返回了對原函數(shù)的執(zhí)行，所以包裝的內(nèi)容就是函數(shù)體內(nèi)對是否為點擊事件的判斷， 是的話保存數(shù)據(jù)即可。

看緩存結(jié)果：

云函數(shù)調(diào)用失敗自動上報數(shù)據(jù)庫提醒開發(fā)者處理。

利用 Object.defineProperty（）對云函數(shù)的調(diào)用進行劫持，多包一層而后返回對云函數(shù)的調(diào)用

但是這里有個需要注意的點，云函數(shù)的調(diào)用方式有兩種，

1） 有傳入回調(diào)函數(shù)，結(jié)果在回調(diào)函數(shù)中拿到。

2）沒有傳入回調(diào)函數(shù)是用await等待調(diào)用結(jié)果，而且我們又需要俘獲云函數(shù)調(diào)用的錯誤，

所以直接在劫持的時候就拿到結(jié)果而后返回一個Promise。

自動通知開發(fā)者處理其實很簡單在云函數(shù)里面調(diào)用微信提供的模板消息即可。

看緩存結(jié)果

可能結(jié)構(gòu)有點亂，畢竟第一次寫而且還沒有實際應(yīng)用上。

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】