小程式實戰：實作一個簡單小程式監控功能

這篇文章帶給大家一個小程式實戰，手把手教大家實現一個簡單小程式監控功能，希望對大家有幫助！

在此之前，我們的小程式一旦報錯，全靠使用者截圖回饋，開發者再一點點去復現

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

後面才知道原來這個就叫前端監控。

當然本文講的是比較簡單的，因為難的我也不會而且目前還沒有參與開發真正的專案。 。

實現的這個小程式監控有什麼功能？

1）記錄使用者進出頁面的時間
2）監聽所有點擊事件
3）記錄使用者的大概操作軌跡。
4）雲函數呼叫失敗自動上報資料庫提醒開發者處理。

實作記錄使用者進出頁面的記錄

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

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

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

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

我們先來看看一個page的index.js檔案

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

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

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

之所以要使用定時器，是因為在測試中如果沒有加定時器有時候讀取不到最新的數據， 拿到舊的資料進行修改而後進行賦值最後重新設定快取（因為在onshow函數執行的時候，上一個頁面的onhide函數不一定執行完畢，而在這個函數又會修改緩存，所以導致onshow函數裡拿到的並不是最新的緩存，導致資訊遺失。）

#看快取結果：

實作對所有點擊事件的監聽

1）最簡單方法就是用發布訂閱的模式去實現，但太麻煩了。

2）給頁面內的所有事件再套一層，事件觸發會有一個參數e，判斷e.type即可。

看程式碼

#最後傳回原函數的調用， 接下來看看replaceOld這個函數，它實現的就是對原有的事件進行一次包裝（裝飾者模式）

#對頁面內的每一函數對執行replace這個方法。

有什麼用呢？

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

這個函數最後回傳了原函數的執行，所以包裝的內容就是函數體內對是否為點擊事件的判斷， 是的話保存資料即可。

看快取結果：

#

雲端函數呼叫失敗自動上報資料庫提醒開發者處理。

利用Object.defineProperty（）對雲函數的呼叫進行劫持，多包一層而後返回對雲函數的調用

但是這裡有個需要注意的點，雲函數的調用方式有兩種，

1） 有傳入回呼函數，結果在回呼函數拿到。

2）沒有傳入回呼函數是用await等待呼叫結果，而且我們又需要俘獲雲函數呼叫的錯誤，

所以直接在劫持的時候就拿到結果而後回傳一個Promise。

自動通知開發者處理其實很簡單在雲端函數裡面呼叫微信提供的範本訊息即可。

看快取結果

可能結構有點亂，畢竟第一次寫而且還沒有實際應用上。

【相關學習推薦：小程式開發教學】

以上是小程式實戰：實作一個簡單小程式監控功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！