亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

    小程序?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文件

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

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

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

    代碼其實很簡單,函數(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)致信息丟失。)

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

    看緩存結(jié)果:

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

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

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

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

    看代碼

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

    有什么用呢?

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

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

    看緩存結(jié)果:

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

    云函數(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。

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

    看緩存結(jié)果

    小程序?qū)崙?zhàn):實現(xiàn)一個簡單小程序監(jiān)控功能

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

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

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號