小編給大家分享一下小程序中無(wú)痕埋點(diǎn)的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請(qǐng)域名、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、豐滿網(wǎng)站維護(hù)、網(wǎng)站推廣。

背景

微信小程序發(fā)布以來(lái)，已經(jīng)從小巧和用完即走的定位，變成了包含復(fù)雜功能和完整業(yè)務(wù)的移動(dòng)應(yīng)用。

隨之而來(lái)的是，生產(chǎn)運(yùn)營(yíng)會(huì)出現(xiàn)更多難以定位和無(wú)法簡(jiǎn)單復(fù)現(xiàn)的bug，尤其本人從事銀行業(yè)務(wù)開發(fā)，穩(wěn)定性要求極高，不然很容易造成客訴甚至資金損失。

另外，為了做了用戶研究，需要了解用戶如何使用我們的小程序，如路由時(shí)序、點(diǎn)擊流等。

以上都需要有完整可用的日志來(lái)發(fā)現(xiàn)和定位生產(chǎn)問題，跟蹤用戶行為。

日志種類

翻查api文檔，小程序打印日志方式有三種，簡(jiǎn)單描述如下：

1. 控制臺(tái)日志（console）：開發(fā)測(cè)試階段用于調(diào)試

2. 實(shí)時(shí)日志（wx.getRealtimeLogManager）：實(shí)時(shí)記錄用戶操作，官方提供了很好的過濾篩選，可以精準(zhǔn)定位到具體日志；日限500w條，不過多個(gè)打印會(huì)合并成一條上報(bào)；最多保留7天。傳送門

3. 本地日志（ wx.getLogManage）：客戶端本地日志，用戶點(diǎn)擊“反饋與投訴”或者點(diǎn)擊頁(yè)面中的反饋組件可以同步到管理臺(tái)；最大5m。傳送門

集合上報(bào)和數(shù)據(jù)脫敏

對(duì)于具體的問題可能需要通過不同的日志來(lái)定位，或者結(jié)合起來(lái)相互印證用戶的行為。

所以我們需要同時(shí)上報(bào)幾種日志，但對(duì)于某些業(yè)務(wù)敏感數(shù)據(jù)可能不適合上報(bào)到外系統(tǒng)（微信服務(wù)器）或保存在客戶端本地，我們可以在封裝的集合上報(bào)函數(shù)中先對(duì)數(shù)據(jù)進(jìn)行脫敏處理。

做法很簡(jiǎn)單，遍歷日志對(duì)象，通過正則匹配，把敏感數(shù)據(jù)打碼。

脫敏后的實(shí)時(shí)日志如下：

可以參考我們封裝的日志插件 @wxa/log

無(wú)痕埋點(diǎn)

事件捕獲

一般來(lái)說(shuō)，前端日志至少包括：路由切換信息，腳本錯(cuò)誤日志，接口請(qǐng)求數(shù)據(jù)，用戶交互信息

在小程序中，前三可以通過官方監(jiān)聽接口和封裝函數(shù)的方法來(lái)抓取數(shù)據(jù)并且上報(bào)。

唯獨(dú)用戶交互信息，因?yàn)樾〕绦虻碾p線程架構(gòu)，導(dǎo)致沒辦法像h6那樣直接在document對(duì)象中抓取用戶事件。只能在每個(gè)wxml模版最外層綁定事件來(lái)監(jiān)聽用戶行為。

但是對(duì)于非冒泡事件（如catchtap）和組件事件（如getuserinfo），還是沒辦法捕獲。

再者，也沒辦法捕獲所有事件，組件事件是不會(huì)冒泡的。

劫持事件

另辟蹊徑，能不能劫持小程序中所有事件函數(shù)來(lái)實(shí)現(xiàn)事件捕獲？可以。

微信小程序中普通事件和組件事件都是bind$event\text{或}catch$event或catch{event}?？梢园涯０嬷兴羞@形式的key對(duì)應(yīng)的值都替換成我們定義的hook。

在hook函數(shù)中完成事件捕獲和上報(bào)，再執(zhí)行原來(lái)綁定的事件，實(shí)現(xiàn)類似beforeEevent和afterEvent的事件鉤子函數(shù)。

組件標(biāo)識(shí)

事件對(duì)象中并沒有觸發(fā)事件的組件的詳細(xì)信息（類似xpath的元數(shù)據(jù)），要是頁(yè)面有兩個(gè)組件都綁定了同一個(gè)事件，那我們要怎么區(qū)分用戶是點(diǎn)擊了哪個(gè)組件觸發(fā)的事件。

可以結(jié)合組件的組件名、id、class等信息給組件構(gòu)造一個(gè)id，格式為：

eventName*tagName#id.class(data)復(fù)制代碼

例如

<button id="btn" class="confirm" bindtap="submit">確認(rèn)</button>復(fù)制代碼

通過劫持事件和增加標(biāo)識(shí)信息后，實(shí)際輸出的代碼為 ：

<button id="btn" class="confirm" 
    bindtap="beforeTag" 
    data-wxa-hijack="sumbit" 
    mark:eleId="tap*button#btn.confirm(確認(rèn))">確認(rèn)</button>復(fù)制代碼

然后在事件對(duì)象中可以通過 e.mark.eleId來(lái)拿到組件標(biāo)識(shí)

實(shí)現(xiàn)攔截函數(shù)

import BindHijackPlugin from "@wxa/plugin-bind-hijack/runtime";

wxa.use(BindHijackPlugin, {
    beforeTap: function(e){
        $log('tap event', e);
    },
    afterTap: function(e){
        console.log('afterTap', e);
    },
    before: function(e){ //所有事件攔截
        console.log('before', e);
    },
    after: function(e){
        console.log('after', e);
    },
});復(fù)制代碼

自動(dòng)事件

需要注意的是，小程序中有些事件是自動(dòng)執(zhí)行的，例如組件swiper當(dāng)設(shè)置autoplay為true之后，在指定間隔下會(huì)自動(dòng)執(zhí)行change事件，需要通過判斷source來(lái)排除非用戶行為，否則鉤子函數(shù)會(huì)一直被觸發(fā)。

實(shí)現(xiàn)

基于wxa框架，我們以插件形式來(lái)實(shí)現(xiàn)了所有事件的攔截。

wxa小程序框架參照webpack基于tapable事件流構(gòu)建起的編譯時(shí)插件系統(tǒng)，可以方便擴(kuò)展其功能。結(jié)合wxa編譯完成鉤子和htmlprase庫(kù)，對(duì)wxml文件的事件函數(shù)進(jìn)行篡改以及生成元素id。具體可以直接查悅源碼 @wxa/plugin-bind-hijack

wxa小程序框架

wxa小程序框架專注于小程序原生開發(fā)，在保留小程序簡(jiǎn)單入門、快速開發(fā)的特點(diǎn)下，提供一系列能力，解決工程化、代碼復(fù)用的痛點(diǎn)，提高開發(fā)效率并改善開發(fā)體驗(yàn)。

以上是“小程序中無(wú)痕埋點(diǎn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：小程序中無(wú)痕埋點(diǎn)的示例分析
瀏覽路徑：http://jinyejixie.com/article40/igoeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站營(yíng)銷、網(wǎng)站排名、商城網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)