WeChat 미니 프로그램 Taro의 자동 추적 지점 이해

관련 학습 추천: 미니 프로그램 개발 튜토리얼

다양한 비즈니스를 하다 보면 필연적으로 비즈니스에 포인트를 묻어야 하는 경우가 많습니다. 이러한 매몰 포인트에는 일반적으로 노출, 클릭 등의 시나리오, 체류 시간, 페이지 떠나기 등. 미니 프로그램에서는 브라우저와 아키텍처가 다르기 때문에 페이지를 모니터링하기가 더 어려워집니다. 일반적으로 Page 메서드를 다시 작성하여 이를 달성합니다. 비즈니스를 묻어두기 위한 미니 프로그램의 기본 수명 주기에 대한 차단 프록시이지만 Taro에서는 모든 것이 달라집니다. 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

현재 상황

멀티엔드 통합 타로에서는 더 이상 명시적인 페이지를 볼 수 없습니다. Taro가 호출된 후에는 패키지 코드에 더 이상 Page 기호가 없으며 미니 프로그램의 기본 Component로 대체됩니다. 패키지된 콘텐츠를 관찰하여 이를 알 수 있으므로 Taro에 WeChat 애플릿이 자동으로 포함되도록 하려면 전략을 변경해야 합니다. 즉, Component를 다시 작성해야 합니다.

기본 재작성

WeChat 애플릿에서는 노출된 컴포넌트와 페이지를 직접 재작성하고 할당됨: rrreee 이렇게 하면 문제를 빠르게 해결할 수 있지만, 다른 작은 프로그램에서 이 작업을 수행하면 이러한 프로세스를 다시 수동으로 수행해야 하므로 필연적으로 문제가 발생할 수 있습니다. 주의해야 할 사업(매장된 점)에만 집중하면 되나요?

해결책

가장 중요한 것은 처음부터 생각하고, 실제 문제를 파악하고, 문제의 본질에 접근하는 것입니다🎜🎜

근본 문제

🎜문제를 해결하기 전에 먼저 문제의 본질을 살펴보겠습니다. 미니 프로그램에서 포인트를 자동으로 매립하려면 실제로 해야 할 일은 미니 프로그램에서 지정한 라이프 사이클에서 일부 고정된 처리를 수행하는 것입니다. 따라서 자동 매립의 문제는 실제로 포인트의 라이프 사이클을 어떻게 탈취하는가입니다. 미니 프로그램을 실행하려면 옵션을 다시 작성하면 됩니다. 🎜

해결 방법

🎜이 문제를 해결하기 전에 해결해야 할 문제를 분리해야 합니다. 🎜

• 다시 작성하는 방법 옵션
• 재작성해야 하는 옵션
• 과 청취 라이프사이클에 자신의 비즈니스를 추가하는 방법.

🎜위의 기본 솔루션에는 옵션을 다시 작성하는 방법에 대한 답이 이미 나와 있습니다. 동시에 원본 애플릿에서 제공하는 메서드 외부에 다른 레이어를 래핑하면 됩니다. , 우리 솔루션이 Taro와 같은 네이티브 미니 프로그램 및 다중 터미널 통합 미니 프로그램 솔루션에 적용될 수 있도록 Component 및 재작성도 지원해야 합니다. >페이지, 그리고 마지막 질문에 대해서는 js의 이벤트 시스템에 대해 생각해 볼 수 있습니다. 마찬가지로 게시 및 구독 로직 세트를 구현할 수도 있으며 사용자 정의만 하면 됩니다. 이벤트(라이프 사이클) 및 리스너를 트리거한 다음 라이프 사이클의 원래 로직을 래핑합니다. 🎜

1단계

🎜먼저 rewriting컴포넌트와 페이지 이전에 저장되어야 원래 메소드가 오염되는 것을 방지할 수 있으며 그 후에는 모든 라이프사이클을 열거할 수 있습니다. 애플릿을 생성하고 기본 이벤트 객체에서 라이프 사이클에 해당하는 리스너를 등록한 후 주소 지정을 통해 이를 찾고 원래 라이프 사이클 메서드를 다시 작성할 수 있음이 보장됩니다. 🎜rrreee

2단계

🎜이 단계에서는 첫 번째 단계에서 선언한 이벤트 개체에 청취 함수를 넣은 다음 다시 작성 프로세스를 실행하기만 하면 됩니다. ：🎜rrreee🎜위의 두 단계 후에는 다시 작성된 Component 또는 페이지를 사용하여 지정된 수명 주기를 하이재킹하고 자체 리스너를 삽입할 수 있습니다. 이러한 리스너를 자동으로 트리거합니다. 🎜

weapp-lifecycle-hook-plugin

🎜WeChat 애플릿 네이티브 환경 및 Taro 일반적인 해결책으로 이 문제를 해결하기 위해 (이기적인 이유로) 플러그인을 구현했습니다 🎜<h4 data-id="heading-8">설치</h4>rrreee<h4 data-id="heading -9"> </h4>rrreee🎜를 사용하면 간단히 <code>설정하여 많은 재작성 로직을 수동으로 작성하는 문제를 해결할 수 있습니다. 왜 안 되나요? 🎜🎜🎜프로그래밍에 대해 더 자세히 알고 싶으면 결제하세요. 🎜php training🎜 칼럼에 주목해주세요! 🎜🎜🎜

위 내용은 WeChat 미니 프로그램 Taro의 자동 추적 지점 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!