ホームページ > 記事 > WeChat アプレット > 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
を作成し、ライフ サイクルの元のロジックをラップします。
最初に、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
インストール<pre class="brush:php;toolbar:false">npm install weapp-lifecycle-hook-plugin
或者
yarn add weapp-lifecycle-hook-plugin复制代码</pre>
使用
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); // ... } // ... }复制代码
プログラミングについてさらに詳しく知りたい場合は、php training
列に注目してください。
以上がWeChatミニプログラムTaroの自動追跡ポイントを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。