Comprendre les points de suivi automatique du mini programme WeChat Taro

Recommandations d'apprentissage connexes : Tutoriel de développement de mini-programmes

Lorsque nous exerçons diverses activités, nous ne pouvons pas éviter d'avoir à points d'enfouissement dans l'entreprise, ces points d'enfouissement incluent généralement, mais sans s'y limiter, l'exposition, les clics, le temps d'arrêt, la sortie de la page et d'autres scénarios. Dans le mini-programme, en raison de son architecture différente de celle du navigateur, la page de surveillance a changé. C'est plus difficile. Habituellement, nous réécrirons la méthode Page pour intercepter le proxy du cycle de vie natif du mini programme, afin d'enterrer l'entreprise, mais dans Taro tout devient différent.

Situation actuelle

Dans le multi-terminal unifié Taro, on ne voit plus les appels Page explicites, et même le Taro code packagé ne contient plus de Page les signes sont remplacés par le Component natif du mini programme (vous pouvez le savoir en observant le contenu emballé), donc afin de réaliser l'intégration automatique du mini programme WeChat dans Taro, nous avons besoin d'une autre stratégie : réécrire Component .

Réécriture de base

Dans l'applet WeChat, les Component et Page exposés peuvent être directement réécrits et attribués :

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

De cette façon, résolvez le problème rapidement, mais lorsque nous faisons cela dans un autre petit programme, nous devons refaire ces processus manuellement, ce qui est inévitablement un peu gênant. Pourquoi ne pas trouver une solution plus générale, nous devons uniquement nous concentrer sur ce dont nous avons besoin. Est-il suffisant de se concentrer uniquement sur ce dont nous avons besoin. activité sur laquelle vous vous concentrez ?

Solution

La priorité absolue est de penser à partir de zéro, de maîtriser le vrai problème et de se rapprocher de l'essence du problème

Problème racine

Avant de résoudre le problème, regardons d'abord la nature du problème. Si vous souhaitez enterrer automatiquement des points dans un mini-programme, ce que vous devez faire est d'effectuer un traitement fixe dans le cycle de vie spécifié par le mini-programme. Par conséquent, notre problème d'enfouissement automatique est en fait de savoir comment détourner le cycle de vie de. le mini programme. Pour détourner le cycle de vie de l'applet, il suffit de réécrire options.

Comment résoudre

Avant de résoudre ce problème, nous devons séparer les problèmes que nous devons résoudre :

• Comment réécrireoptions
• Ce qui devrait être réécritoptions
• Comment injecter votre propre entreprise dans le cycle de vie de la surveillance.

Notre solution de base ci-dessus a déjà la réponse sur la façon de réécrire options Il nous suffit d'envelopper une autre couche en dehors de la méthode fournie par l'applet d'origine pour résoudre le problème. afin de garantir que notre solution puisse être appliquée aux mini-programmes natifs et aux solutions de mini-programmes unifiés multi-terminaux tels que Taro, nous devrions prendre en charge la réécriture de Component et Page. js Dans le système d'événements, nous pouvons également implémenter un ensemble de logiques de publication et d'abonnement. Il nous suffit de personnaliser l'événement déclencheur (cycle de vie) et listeners, puis d'emballer la logique originale du cycle de vie ; >

étape 1

Tout d'abord, nous devons sauvegarder la méthode d'origine avant de réécrire

et Component pour éviter que la méthode d'origine ne soit contaminée et ne puisse pas revenir en arrière. procéder à tous les cycles de vie dans le mini programme. L'énumération génère un objet événement par défaut, garantissant que nous pouvons le trouver en adressant et en réécrivant la méthode du cycle de vie d'origine après avoir enregistré le Page correspondant au cycle de vie. 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[]>);
}复制代码

étape 2

Dans cette étape, il nous suffit de mettre la fonction d'écoute dans l'objet événement que nous avons déclaré dans la première étape, puis d'exécuter le processus de réécriture :

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;
};复制代码

Après les deux étapes ci-dessus, nous pouvons détourner le cycle de vie spécifié et injecter notre propre

. L'utilisation du listeners ou du Component remplacé les déclenchera automatiquement Page. listeners

weapp-lifecycle-hook-plugin

Afin de faciliter la mise en œuvre directe de cette solution universelle pour l'environnement natif de l'applet WeChat et les solutions unifiées multi-terminaux telles que

, j'ai implémenté un plug-in Pour résoudre ce problème (pour des raisons égoïstes) Taro

Installez

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

Utilisez

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);
    // ...
  }

  // ...
}复制代码

simplement en

vous pouvez résoudre le problème de l'écriture manuelle d'un beaucoup de tâches lourdes avant. Écrivez de la logique, pourquoi ne pas le faire setup

Si vous souhaitez en savoir plus sur la programmation, faites attention à la colonne

formation php !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!