WeChatミニプログラムTaroの自動追跡ポイントを理解する

関連する学習の推奨事項: 小規模プログラム開発チュートリアル

さまざまなビジネスを行う場合、ビジネスにおける埋め込みポイント、これらの埋め込みポイントには通常、露出、クリック、滞在時間、ページからの離脱、その他のシナリオが含まれますが、これらに限定されません。ミニ プログラムでは、ブラウザーとは異なるアーキテクチャのため、監視ページが変更されています。通常、Page メソッドを書き換えて、ミニ プログラムのネイティブ ライフ サイクルのプロキシをインターセプトしてビジネスを埋め込みますが、Taro ではすべてが次のようになります。違う。 。

現在の状況

マルチエンド統合 Taro では、明示的な Page 呼び出し、さらには Taro パッケージ化されたコードには Page の兆候はなくなり、代わりにミニ プログラムのネイティブ Component になります (パッケージ化されたコンテンツを観察することでこれを知ることができます)。 Taro への WeChat アプレットの自動埋め込みを実現するには、戦略を変更する必要があります。Component を書き換えます。

基本的な書き換え

WeChat アプレットでは、公開された Component と Page を直接書き換えて割り当てることができます。

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

これで問題はすぐに解決できますが、別の小さなプログラムでこれを行う場合、これらの処理を再度手動で実行する必要があり、必然的に少し面倒になります。注意すべき業務（埋もれている点）は？

解決策

一番大切なのはゼロから考え、本当の問題を捉え、問題の本質に近づくことです

根本問題

問題を解決する前に、まず問題の本質を見てみましょう。ミニプログラムにポイントを自動的に埋め込みたい場合、実際にやるべきことは、ミニプログラムで指定されたライフサイクルの中で一定の処理を行うことなので、自動埋め込みの問題は、実際には、どのようにライフサイクルを乗っ取るかということになります。アプレットのライフサイクルをハイジャックするには、options を書き換えるだけです。

解決方法

この問題を解決する前に、解決する必要がある問題を分離する必要があります:

• オプションの書き換え方法
• どの オプションを書き換えるべきか
• 自分のビジネスをリスニングのライフサイクルに組み込む方法。

上記の基本的な解決策には、options を書き換える方法に対する答えがすでに含まれています。問題を解決するには、元のアプレットによって提供されるメソッドの外側に別のレイヤーをラップするだけで済みます。そして、私たちのソリューションがネイティブ ミニ プログラムや Taro などの複数端末の統合ミニ プログラム ソリューションに確実に適用できるようにするには、Component と Page の書き換えもサポートする必要があります。 そして最後の質問については、js のイベント システムについて考えることができます。同様に、パブリッシュおよびサブスクライブ ロジックのセットを実装することもできます。トリガー イベント (ライフサイクル) と listeners を作成し、ライフ サイクルの元のロジックをラップします。

ステップ 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[]>);
}复制代码

ステップ 2

このステップでは、最初のステップで宣言したイベント オブジェクトに listen 関数を配置し、書き換えプロセスを実行するだけです:

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

上記の 2 つの手順の後、指定されたライフサイクルをハイジャックし、書き換えられた

Component または Page を使用して独自の listeners を挿入できます。 ## は自動的にトリガーされます。 weapp-lifecycle-hook-plugin

WeChat アプレット ネイティブ環境および

Taro## などの複数端末の統合ソリューション向けのこのユニバーサル ソリューションの直接実装を容易にするため。 #、この問題を解決するプラグインを実装しました（勝手なアムウェイ）

インストール<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">npm install weapp-lifecycle-hook-plugin 或者 yarn add weapp-lifecycle-hook-plugin复制代码</pre><div class="contentsignin">ログイン後にコピー</div></div>使用

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#で前の問題を解決できます## 多くのロジックを手動で書き換える必要があるので、そうしないのはなぜですか

プログラミングについてさらに詳しく知りたい場合は、php training 列に注目してください。

以上がWeChatミニプログラムTaroの自動追跡ポイントを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。