Verstehen Sie die automatischen Tracking-Punkte des WeChat-Miniprogramms Taro

Verwandte Lernempfehlungen: Mini-Programmentwicklungs-Tutorial

Wenn wir verschiedene Geschäfte tätigen, müssen wir zwangsläufig Punkte im Geschäft vergraben, darunter unter anderem Belichtungsszenarien wie Klicks, Verweildauer, Verlassen der Seite usw. Im Miniprogramm wird es aufgrund seiner anderen Architektur als im Browser schwieriger, die Seite zu überwachen. Normalerweise erreichen wir dies durch Umschreiben der Page-Methode. Abfang-Proxy für den nativen Lebenszyklus des Miniprogramms, um das Geschäft zu begraben, aber in Taro wird alles anders. Page 方法来达到对小程序原生生命周期的拦截代理，从而进行业务埋点，但是在 Taro 中这一切变得不同了。

现状

在多端统一的Taro中，我们不再能看到显式的 Page 调用，甚至 Taro 打包之后的代码里也不再存在任何 Page 的迹象，取而代之的则是小程序原生的 Component(这一点大家通过观察打包后的内容可以得知)，所以为了实现微信小程序在Taro中的自动埋点，我们需要换一个策略：重写Component。

基本的重写

在微信小程序中，其暴露的Component 和 Page 能够直接被重写并进行赋值：

const _originalComponent = Component;const wrappedComponent = function (options) {
    ...do something before real Component    return _originalComponent(options);
}复制代码

这样可以很快的解决问题，但是当我们在另一个小程序做这件事情的时候，我们就又需要手动做一次这些处理，难免有些麻烦，为什么不找一个更通用的方案，我们只用关注我们需要关注的业务（埋点）就行了呢？

解决方案

重中之重，从零开始思考，掌握真正问题，接近问题本质

根问题

在解决问题之前，不如让我们先看看这个问题的本质是什么。想在小程序中进行自动的埋点，其实要做的就是在小程序指定的生命周期里做一些固定的处理，所以我们自动埋点的问题实际上是如何劫持小程序的生命周期，而要劫持小程序的生命周期，我们需要做的就是去重写options。

如何解决

在解决这个问题之前，我们要把自己需要解决的问题拆分出来：

• 应该怎么重写 options
• 应该重写哪些 options
• 怎样把自己的业务注入到监听的生命周期中。

我们在上面的基础解决办法对如何重写options就已经有了答案，我们只需要在原小程序提供的方法外再包裹一层即可解决，同时为了保证我们的解决方案能适用于原生小程序和Taro这种多端统一的小程序方案，我们应该同时支持重写Component和Page，而对于最后一个问题，我们可以思考一下js中的事件系统，相似的我们也可以实现一套发布订阅的逻辑，只需要定制触发事件（生命周期）和listeners，再针对生命周期原有逻辑进行包装即可；

step 1

首先我们在重写Component和Page之前应当保存原始的方法，避免原始方法被污染我们无法回退，这之后再去将小程序中的所有生命周期进行枚举生成一个默认的事件对象中，保证我们在注册了对应生命周期的listeners后能通过寻址找到并对原生命周期方法进行重写。

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();
}// 初始化所有生命周期的钩子函数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[]>);
}复制代码

step 2

在这一步我们只需要将监听函数放到我们第一步中声明的事件对象中，然后执行重写流程即可：

public addLifecycleListener(lifeTimeOrLifecycle: string, listener: WeappLifecycleHook): OverrideWechatPage {  // 针对指定周期定义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;
}/**
 * 为对应的生命周期重写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 为生命周期添加的钩子函数
 * @param optionsKey 需要被重写的optionsKey，仅用于 lifetime 模式
 * @param options 需要被重写的配置项
 * @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;
};复制代码

经过如上两步，我们就能对指定的生命周期进行劫持并注入我们自己的listeners，使用被重写过Component或者Page就会自动触发这些 listeners。

weapp-lifecycle-hook-plugin

为了方便直接对微信小程序原生环境和Taro等多端统一方案进行这一套通用的解决方案，我实现了一个插件来解决这个问题（私心安利）

安装

npm install weapp-lifecycle-hook-plugin
或者
yarn add weapp-lifecycle-hook-plugin复制代码

使用

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

// 供 setupLifecycleListeners 使用的 hook 函数，接受一个参数，为当前组件/页面的options
function simpleReportGoPage(options: any): void {
  console.log('goPage', options);
}

// setupListeners
class App extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    // ...
    // 手动创建的实例和使用 setupLifecycleListeners 创建的实例不是同一个，所以需要销毁时需要单独对其进行销毁
    // 直接调用实例方式
    const instance = new OverrideWechatPage(this.config.pages);
    // 直接调用实例上的 addListener 方法在全局增加监听函数，可链式调用
    instance.addLifecycleListener(ProxyLifecycle.SHOW, simpleReportGoPage);
    // setupListeners 的使用
    setupLifecycleListeners(ProxyLifecycle.SHOW, [simpleReportGoPage], this.config.pages);
    // ...
  }

  // ...
}复制代码

只需要通过简单地 setup

Aktuelle Situation

Im Multi-End Unified Taro können wir keine explizite Seite Even mehr sehen Nachdem Taro aufgerufen wurde, gibt es keine Anzeichen von Page mehr im gepackten Code, sondern wird durch die native Komponente des Miniprogramms ersetzt (dies können Sie tun). Um die automatische Einbettung des WeChat-Applets in Taro zu realisieren, müssen wir eine Strategie ändern: Component neu schreiben.

Grundlegendes Umschreiben

Im WeChat-Applet können die bereitgestellten Komponenten und Seiten direkt umgeschrieben werden und zugewiesen: rrreee Dies kann das Problem schnell lösen, aber wenn wir dies in einem anderen kleinen Programm tun, müssen wir diese Prozesse erneut manuell ausführen, was unweigerlich zu Problemen führen wird. Warum nicht eine allgemeinere Lösung finden? Müssen wir uns nur auf die Unternehmen konzentrieren, auf die wir achten müssen (vergrabene Punkte)?

Lösung

Das Wichtigste ist, von Grund auf zu denken, das eigentliche Problem zu erfassen und dem Kern des Problems nahe zu kommen🎜🎜

Grundproblem

🎜Bevor wir das Problem lösen, werfen wir zunächst einen Blick auf den Kern des Problems. Wenn Sie Punkte in einem Miniprogramm automatisch vergraben möchten, müssen Sie tatsächlich eine feste Verarbeitung im vom Miniprogramm angegebenen Lebenszyklus durchführen. Daher besteht unser Problem beim automatischen Vergraben tatsächlich darin, den Lebenszyklus zu kapern Das Miniprogramm, um den Lebenszyklus des Applets zu kapern, ist alles, was wir tun müssen, Optionen neu zu schreiben. 🎜

So lösen Sie

🎜Bevor Sie dieses Problem lösen, müssen wir die Probleme trennen, die wir lösen müssen: 🎜

• So schreiben Sie den Code um
• Welche Optionen
• umgeschrieben werden sollten und wie Sie Ihr eigenes Geschäft in den Hörlebenszyklus einbinden können.

🎜Unsere grundlegende Lösung hat bereits die Antwort darauf, wie man Optionen umschreibt. Wir müssen nur eine weitere Ebene außerhalb der vom ursprünglichen Applet bereitgestellten Methoden einbinden Um sicherzustellen, dass unsere Lösung auf native Miniprogramme und einheitliche Miniprogrammlösungen mit mehreren Terminals wie Taro angewendet werden kann, sollten wir auch das Umschreiben von Component und Seite, und für die letzte Frage können wir über das Ereignissystem in js nachdenken. Ebenso können wir auch eine Reihe von Veröffentlichungs- und Abonnementlogiken implementieren und müssen diese nur anpassen Auslösendes Ereignis (Lebenszyklus) und Listener, und dann die ursprüngliche Logik des Lebenszyklus einschließen 🎜

Schritt 1

🎜Zuerst sind wir dabei UmschreibenKomponente und Seite gespeichert werden, um zu verhindern, dass die ursprüngliche Methode kontaminiert wird und wir nicht zurückgehen können. Danach können wir alle Lebenszyklen auflisten Öffnen Sie das Applet und generieren Sie eines. Im Standardereignisobjekt ist garantiert, dass wir nach der Registrierung des Listeners, der dem Lebenszyklus entspricht, ihn durch Adressierung finden und die ursprüngliche Lebenszyklusmethode neu schreiben können. 🎜rrreee

Schritt 2

🎜In diesem Schritt müssen wir nur die Abhörfunktion in das Ereignisobjekt einfügen, das wir im ersten Schritt deklariert haben, und dann den Umschreibvorgang ausführen. ：🎜rrreee🎜Nach den beiden oben genannten Schritten können wir den angegebenen Lebenszyklus kapern und unsere eigenen Listener einfügen, indem wir die neu geschriebene Komponente oder Seite verwenden löst diese Listener automatisch aus. 🎜

weapp-lifecycle-hook-plugin

🎜Um die direkte Implementierung von einheitlichen Multi-Terminal-Lösungen wie der nativen WeChat-Applet-Umgebung und Taro Als allgemeine Lösung habe ich ein Plug-in implementiert, um dieses Problem zu lösen (aus egoistischen Gründen) 🎜<h4 data-id="heading-8">Installation</h4>rrreee<h4 data-id="heading -9"> Mit </h4>rrreee🎜 können Sie das Problem des manuellen Schreibens vieler Umschreibelogiken durch einfaches <code>setup lösen. Warum nicht? 🎜🎜🎜Möchten Sie mehr über Programmierung erfahren, zahlen Sie bitte Achtung: Kolumne 🎜php-Training🎜! 🎜🎜🎜

Das obige ist der detaillierte Inhalt vonVerstehen Sie die automatischen Tracking-Punkte des WeChat-Miniprogramms Taro. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!