Related learning recommendations: Small Program Development Tutorial

When doing various businesses, we cannot To avoid the need to bury points in the business, these burying points usually include but are not limited to exposure, clicks, dwell time, leaving the page and other scenarios. In the mini program, due to its different architecture from the browser, the monitoring page has changed. It is more difficult. Usually we will rewrite the Page method to intercept the proxy for the native life cycle of the mini program, so as to bury the business, but in Taro everything becomes different. .

Current situation

In multi-end unified Taro, we can no longer see explicit Page calls, or even Taro There is no longer any sign of Page in the packaged code, instead it is the native Component of the mini program (you can know this by observing the packaged content ), so in order to realize the automatic embedding of WeChat applet in Taro, we need to change a strategy: rewrite Component.

Basic rewriting

In the WeChat applet, the exposed Component and Page can be directly rewritten and assigned:

const?_originalComponent?=?Component;const?wrappedComponent?=?function?(options)?{
????...do?something?before?real?Component????return?_originalComponent(options);
}復(fù)制代碼

This can solve the problem quickly, but when we do this in another small program, we need to do these processes manually again, which is inevitably a bit troublesome. Why not find a more general one? Plan, we only need to focus on the business we need to pay attention to (buried points)?

Solution

The most important thing is to think from scratch, grasp the real problem, and get close to the essence of the problem

Root problem

Before solving the problem, let us first take a look at the essence of the problem. If you want to automatically bury points in a mini program, what you actually need to do is to do some fixed processing in the life cycle specified by the mini program. Therefore, our problem of automatic burying is actually how to hijack the life cycle of the mini program. To hijack the life cycle of the applet, all we need to do is to rewrite options.

How to solve

Before solving this problem, we have to separate the problems we need to solve:

• How to rewriteoptions
• Which options should be rewritten
• How to inject your own business into the listening life cycle.

Our basic solution above already has the answer to how to rewrite options. We only need to wrap another layer outside the method provided by the original applet to solve the problem. , and in order to ensure that our solution can be applied to native mini programs and multi-terminal unified mini program solutions such as Taro, we should also support rewriting Component and Page, and for the last question, we can think about the event system in js. Similarly, we can also implement a set of publish and subscribe logic. We only need to customize the trigger event (life cycle) and listeners, and then wrap the original logic of the life cycle;

step 1

First we are rewriting Component and Page The original method should be saved before to avoid the original method being contaminated and we cannot roll back. After that, we can enumerate all the life cycles in the applet and generate a default event object to ensure that we have registered the corresponding life cycle. The listeners can be found through addressing and the original life cycle method can be rewritten.

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ù)制代碼

step 2

In this step we only need to put the listening function into the event object we declared in the first step, and then execute the rewriting process:

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)的生命周期重寫(xiě)options
?*?@param?proxyLifecycleOrTime?需要攔截的生命周期
?*?@param?optionsKey?需要重寫(xiě)的?optionsKey，此處用于?lifetime?模式
?*?@param?options?需要被重寫(xiě)的?options
?*?@returns?{IOverrideWechatPageInitOptions}?被重寫(xiě)的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;
};/**
?*?重寫(xiě)options
?*?@param?lifecycle?需要被重寫(xiě)的生命周期
?*?@param?hooks?為生命周期添加的鉤子函數(shù)
?*?@param?optionsKey?需要被重寫(xiě)的optionsKey，僅用于?lifetime?模式
?*?@param?options?需要被重寫(xiě)的配置項(xiàng)
?*?@returns?{IOverrideWechatPageInitOptions}?被重寫(xiě)的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ù)制代碼

After the above two steps, we can hijack the specified life cycle and inject our own listeners, using the rewritten Component or Page These listeners will be triggered automatically.

weapp-lifecycle-hook-plugin

In order to facilitate the direct implementation of this universal solution for the WeChat applet native environment and multi-terminal unified solutions such as Taro, I Implemented a plug-in to solve this problem (selfish Amway)

Installation

npm?install?weapp-lifecycle-hook-plugin
或者
yarn?add?weapp-lifecycle-hook-plugin復(fù)制代碼

Using

import?OverrideWechatPage,?{?setupLifecycleListeners,?ProxyLifecycle?}?from?'weapp-lifecycle-hook-plugin';

//?供?setupLifecycleListeners?使用的?hook?函數(shù)，接受一個(gè)參數(shù)，為當(dāng)前組件/頁(yè)面的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è)，所以需要銷(xiāo)毀時(shí)需要單獨(dú)對(duì)其進(jìn)行銷(xiāo)毀
????//?直接調(diào)用實(shí)例方式
????const?instance?=?new?OverrideWechatPage(this.config.pages);
????//?直接調(diào)用實(shí)例上的?addListener?方法在全局增加監(jiān)聽(tīng)函數(shù)，可鏈?zhǔn)秸{(diào)用
????instance.addLifecycleListener(ProxyLifecycle.SHOW,?simpleReportGoPage);
????//?setupListeners?的使用
????setupLifecycleListeners(ProxyLifecycle.SHOW,?[simpleReportGoPage],?this.config.pages);
????//?...
??}

??//?...
}復(fù)制代碼

can solve the previous problem by simply setup You need to manually write a lot of rewriting logic, why not do it

If you want to learn more about programming, please pay attention to the php training column!

The above is the detailed content of Understand the automatic tracking points of WeChat mini program Taro. For more information, please follow other related articles on the PHP Chinese website!