本篇文章給大家?guī)?lái)一個(gè)小程序?qū)崙?zhàn)，手把手教大家實(shí)現(xiàn)一個(gè)簡(jiǎn)單小程序監(jiān)控功能，希望對(duì)大家有所幫助！

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

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

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

當(dāng)然本文講的是比較簡(jiǎn)單的，因?yàn)殡y的我也不會(huì)而且目前還沒(méi)有參與開(kāi)發(fā)真正的項(xiàng)目。。

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

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

實(shí)現(xiàn)記錄用戶進(jìn)出頁(yè)面的記錄

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

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

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

新的問(wèn)題又來(lái)了，如何給所有事件再套一層呢？

我們先看看一個(gè)page的index.js文件

通過(guò)向Page這個(gè)方法傳入一個(gè)對(duì)象， 而這個(gè)對(duì)象里就包含了所有的事件（點(diǎn)擊，滑動(dòng)，CSS3動(dòng)畫(huà)等等），生命周期。

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

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

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

看緩存結(jié)果：

實(shí)現(xiàn)對(duì)所有點(diǎn)擊事件的監(jiān)聽(tīng)

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

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

看代碼

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

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

有什么用呢？

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

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

看緩存結(jié)果：

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

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

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

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

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

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

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

看緩存結(jié)果

可能結(jié)構(gòu)有點(diǎn)亂，畢竟第一次寫(xiě)而且還沒(méi)有實(shí)際應(yīng)用上。

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