這篇文章帶給大家一個(gè)小程式實(shí)戰(zhàn)，手把手教大家實(shí)現(xiàn)一個(gè)簡單小程式監(jiān)控功能，希望對大家有幫助！

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

後面就再想，有沒有東西可以去記錄使用者的行為，如果小程式報(bào)錯(cuò)則自動(dòng)將使用者的操作記錄上傳到伺服器並通知開發(fā)者處理呢？

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

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

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

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

實(shí)作記錄使用者進(jìn)出頁面的記錄

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

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

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

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

我們先來看看一個(gè)page的index.js檔案

#透過向Page這個(gè)方法傳入一個(gè)對象， 而這個(gè)物件裡就包含了所有的事件（點(diǎn)擊，滑動(dòng)，CSS3動(dòng)畫等等），生命週期。

所以我們可以自訂一個(gè)方法去代替Page這個(gè)方法， 在這個(gè)方法拿到傳進(jìn)來的物件進(jìn)行修改， 最後記得執(zhí)行一遍原有的Page(Obj)即可。 看程式碼結(jié)構(gòu)

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

之所以要使用定時(shí)器，是因?yàn)樵跍y試中如果沒有加定時(shí)器有時(shí)候讀取不到最新的數(shù)據(jù)， 拿到舊的資料進(jìn)行修改而後進(jìn)行賦值最後重新設(shè)定快?。ㄒ?yàn)樵趏nshow函數(shù)執(zhí)行的時(shí)候，上一個(gè)頁面的onhide函數(shù)不一定執(zhí)行完畢，而在這個(gè)函數(shù)又會(huì)修改緩存，所以導(dǎo)致onshow函數(shù)裡拿到的並不是最新的緩存，導(dǎo)致資訊遺失。）

#看快取結(jié)果：

實(shí)作對所有點(diǎn)擊事件的監(jiān)聽

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

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

看程式碼

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

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

有什麼用呢？

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

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

看快取結(jié)果：

雲(yún)端函數(shù)呼叫失敗自動(dòng)上報(bào)資料庫提醒開發(fā)者處理。

利用Object.defineProperty（）對雲(yún)函數(shù)的呼叫進(jìn)行劫持，多包一層而後返回對雲(yún)函數(shù)的調(diào)用

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

1） 有傳入回呼函數(shù)，結(jié)果在回呼函數(shù)拿到。

2）沒有傳入回呼函數(shù)是用await等待呼叫結(jié)果，而且我們又需要俘獲雲(yún)函數(shù)呼叫的錯(cuò)誤，

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

自動(dòng)通知開發(fā)者處理其實(shí)很簡單在雲(yún)端函數(shù)裡面呼叫微信提供的範(fàn)本訊息即可。

看快取結(jié)果

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

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

以上是小程式實(shí)戰(zhàn)：實(shí)作一個(gè)簡單小程式監(jiān)控功能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！