【移動(dòng)應(yīng)用開發(fā)技術(shù)】微信小程序Taro的自動(dòng)埋點(diǎn)是什么

這篇文章主要介紹了微信小程序Taro的自動(dòng)埋點(diǎn)是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下?，F(xiàn)狀在多端統(tǒng)一的Taro中，我們不再能看到顯式的Page調(diào)用，甚至Taro打包之后的代碼里也不再存在任何Page的跡象，取而代之的則是小程序原生的Component(這一點(diǎn)大家通過觀察打包后的內(nèi)容可以得知)，所以為了實(shí)現(xiàn)微信小程序在Taro中的自動(dòng)埋點(diǎn)，我們需要換一個(gè)策略：重寫Component?；镜闹貙懺谖⑿判〕绦蛑?，其暴露的Component和Page能夠直接被重寫并進(jìn)行賦值：const

_originalComponent

=

Component;const

wrappedComponent

=

function

(options)

{

...do

something

before

real

Component

return

_originalComponent(options);

}復(fù)制代碼這樣可以很快的解決問題，但是當(dāng)我們在另一個(gè)小程序做這件事情的時(shí)候，我們就又需要手動(dòng)做一次這些處理，難免有些麻煩，為什么不找一個(gè)更通用的方案，我們只用關(guān)注我們需要關(guān)注的業(yè)務(wù)（埋點(diǎn)）就行了呢？解決方案重中之重，從零開始思考，掌握真正問題，接近問題本質(zhì)重中之重，從零開始思考，掌握真正問題，接近問題本質(zhì)根問題在解決問題之前，不如讓我們先看看這個(gè)問題的本質(zhì)是什么。想在小程序中進(jìn)行自動(dòng)的埋點(diǎn)，其實(shí)要做的就是在小程序指定的生命周期里做一些固定的處理，所以我們自動(dòng)埋點(diǎn)的問題實(shí)際上是如何劫持小程序的生命周期，而要劫持小程序的生命周期，我們需要做的就是去重寫options。如何解決在解決這個(gè)問題之前，我們要把自己需要解決的問題拆分出來：應(yīng)該怎么重寫options應(yīng)該重寫哪些options怎樣把自己的業(yè)務(wù)注入到監(jiān)聽的生命周期中。我們在上面的基礎(chǔ)解決辦法對(duì)如何重寫options就已經(jīng)有了答案，我們只需要在原小程序提供的方法外再包裹一層即可解決，同時(shí)為了保證我們的解決方案能適用于原生小程序和Taro這種多端統(tǒng)一的小程序方案，我們應(yīng)該同時(shí)支持重寫Component和Page，而對(duì)于最后一個(gè)問題，我們可以思考一下js中的事件系統(tǒng)，相似的我們也可以實(shí)現(xiàn)一套發(fā)布訂閱的邏輯，只需要定制觸發(fā)事件（生命周期）和listeners，再針對(duì)生命周期原有邏輯進(jìn)行包裝即可；首先我們在重寫Component和Page之前應(yīng)當(dāng)保存原始的方法，避免原始方法被污染我們無法回退，這之后再去將小程序中的所有生命周期進(jìn)行枚舉生成一個(gè)默認(rèn)的事件對(duì)象中，保證我們在注冊了對(duì)應(yīng)生命周期的listeners后能通過尋址找到并對(duì)原生命周期方法進(jìn)行重寫。export

const

ProxyLifecycle

=

{

ON_READY:

'onReady',

ON_SHOW:

'onShow',

ON_HIDE:

'onHide',

ON_LOAD:

'onLoad',

ON_UNLOAD:

'onUnload',

CREATED:

'created',

ATTACHED:

'attached',

READY:

'ready',

MOVED:

'moved',

DETACHED:

'detached',

SHOW:

'show',

HIDE:

'hide',

RESIZE:

'resize',

};public

constructor()

{

this.initLifecycleHooks();

this.wechatOriginalPage

=

getWxPage();

this.wechatOriginalComponent

=

getWxComponent();

}//

初始化所有生命周期的鉤子函數(shù)private

initLifecycleHooks():

void

{

this.lifecycleHooks

=

Object.keys(ProxyLifecycle).reduce((res,

cur:

keyof

typeof

ProxyLifecycle)

=>

{

res[ProxyLifecycle[cur]]

=

[]

as

WeappLifecycleHook[];

return

res;

},

{}

as

Record<string,

WeappLifecycleHook[]>);

}復(fù)制代碼在這一步我們只需要將監(jiān)聽函數(shù)放到我們第一步中聲明的事件對(duì)象中，然后執(zhí)行重寫流程即可：public

addLifecycleListener(lifeTimeOrLifecycle:

string,

listener:

WeappLifecycleHook):

OverrideWechatPage

{

//

針對(duì)指定周期定義Hooks

this.lifecycleHooks[lifeTimeOrLifecycle].push(listener);

const

_Page

=

this.wechatOriginalPage;

const

_Component

=

this.wechatOriginalComponent;

const

self

=

this;

const

wrapMode

=

this.checkMode(lifeTimeOrLifecycle);

const

componentNeedWrap

=

['component',

'pageLifetimes'].includes(wrapMode);

const

wrapper

=

function

wrapFunc(options:

IOverrideWechatPageInitOptions):

string

|

void

{

const

optionsKey

=

wrapMode

===

'pageLifetimes'

?

'pageLifetimes'

:

'';

options

=

self.findHooksAndWrap(lifeTimeOrLifecycle,

optionsKey,

options);

const

res

=

componentNeedWrap

?

_Component(options)

:

_Page(options);

options.__router__

=

(wrapper

as

any).__route__

=

res;

return

res;

};

(wrapper

as

any).__route__

=

'';

if

(componentNeedWrap)

{

overrideWxComponent(wrapper);

}

else

{

overrideWxPage(wrapper);

}

return

this;

}/**

*

為對(duì)應(yīng)的生命周期重寫options

*

@param

proxyLifecycleOrTime

需要攔截的生命周期

*

@param

optionsKey

需要重寫的

optionsKey，此處用于

lifetime

模式

*

@param

options

需要被重寫的

options

*

@returns

{IOverrideWechatPageInitOptions}

被重寫的options

*/private

findHooksAndWrap

=

(

proxyLifecycleOrTime:

string,

optionsKey

=

'',

options:

IOverrideWechatPageInitOptions,

):

IOverrideWechatPageInitOptions

=>

{

let

processedOptions

=

{

...options

};

const

hooks

=

this.lifecycleHooks[proxyLifecycleOrTime];

processedOptions

=

OverrideWechatPage.wrapLifecycleOptions(proxyLifecycleOrTime,

hooks,

optionsKey,

options);

return

processedOptions;

};/**

*

重寫options

*

@param

lifecycle

需要被重寫的生命周期

*

@param

hooks

為生命周期添加的鉤子函數(shù)

*

@param

optionsKey

需要被重寫的optionsKey，僅用于

lifetime

模式

*

@param

options

需要被重寫的配置項(xiàng)

*

@returns

{IOverrideWechatPageInitOptions}

被重寫的options

*/private

static

wrapLifecycleOptions

=

(

lifecycle:

string,

hooks:

WeappLifecycleHook[],

optionsKey

=

'',

options:

IOverrideWechatPageInitOptions,

):

IOverrideWechatPageInitOptions

=>

{

let

currentOptions

=

{

...options

};

const

originalMethod

=

optionsKey

?

(currentOptions[optionsKey]

||

{})[lifecycle]

:

currentOptions[lifecycle];

const

runLifecycleHooks

=

():

void

=>

{

hooks.forEach((hook)

=>

{

if

(currentOptions.__isPage__)

{

hook(currentOptions);

}

});

};

const

warpMethod

=

runFunctionWithAop([runLifecycleHooks],

originalMethod);

currentOptions

=

optionsKey

?

{

...currentOptions,

[optionsKey]:

{

...options[optionsKey],

...(currentOptions[optionsKey]

||

{}),

[lifecycle]:

warpMethod,

},

}

:

{

...currentOptions,

[lifecycle]:

warpMethod,

};

return

currentOptions;

};復(fù)制代碼經(jīng)過如上兩步，我們就能對(duì)指定的生命周期進(jìn)行劫持并注入我們自己的listeners，使用被重寫過Component或者Page就會(huì)自動(dòng)觸發(fā)這些listeners。weapp-lifecycle-hook-plugin為了方便直接對(duì)微信小程序原生環(huán)境和Taro等多端統(tǒng)一方案進(jìn)行這一套通用的解決方案，我實(shí)現(xiàn)了一個(gè)插件來解決這個(gè)問題（私心安利）npm

install

weapp-lifecycle-hook-plugin

或者

yarn

add

weapp-lifecycle-hook-plugin復(fù)制代碼import

OverrideWechatPage,

{

setupLifecycleListeners,

ProxyLifecycle

}

from

'weapp-lifecycle-hook-plugin';

//

供

setupLifecycleListeners

使用的

hook

函數(shù)，接受一個(gè)參數(shù)，為當(dāng)前組件/頁面的options

function

simpleReportGoPage(options:

any):

void

{

console.log('goPage',

options);

}

//

setupListeners

class

App

extends

Component

{

constructor(props)

{

super(props);

}

componentWillMount()

{

//

...

//

手動(dòng)創(chuàng)建的實(shí)例和使用

setupLifecycleListeners

創(chuàng)建的實(shí)例不是同一個(gè)，所以需要銷毀時(shí)需要單獨(dú)對(duì)其進(jìn)行銷毀

//

直接調(diào)用實(shí)例方式

const

instance

=

new

OverrideWechatPage(th