ミニプログラム実践：簡易ミニプログラム監視機能の実装

この記事では、小さなプログラムの実践的な応用例を紹介し、簡単な小さなプログラムの監視機能を実装する方法を説明します。

これまでは、ミニ プログラムがエラーを報告すると、すべてユーザーのスクリーンショットのフィードバックに依存しており、開発者はそれを少しずつ再現していました。

後で考えてください。ユーザーの行動を記録できるものはありますか? ミニ プログラムがエラーを報告すると、ユーザーの操作記録がサーバーに自動的にアップロードされ、開発者に対処するように通知されますか?

後からこれをフロントエンド監視と呼ぶことを知りました。

もちろん、この記事では比較的単純なものについて説明します。私はその方法を知りませんし、まだ実際のプロジェクトの開発に参加したことがないからです。 。

この小さなプログラム監視の機能は何ですか?

1) ユーザーがページに出入りした時刻を記録します。
2) すべてのクリック イベントを監視します。
3) ユーザーのおおよその操作軌跡を記録します。
4) クラウド関数呼び出しの失敗は自動的にデータベースに報告され、開発者に対処するよう促します。

ユーザーのページへの出入りの記録を実現する

ミニ プログラムにはいくつかのライフサイクル関数があることは誰もが知っていますが、その中で、onShow の 3 つのライフサイクルを選択しました。 on非表示にしてアンロードし、定期的に記録します。

もっと愚かな方法は、各ページのライフサイクル関数でページが表示および非表示/アンロードされた時間を直接記録することですが、これは繰り返しが多すぎるため、次のように指定できます。次に、各ライフサイクル関数に別のレイヤーを追加します (これは、JavaScript デザイン パターンではデコレーター パターンと呼ばれます)

また新しい質問が来ます。すべてのイベントに別のレイヤーを追加するにはどうすればよいでしょうか?

最初にページのindex.jsファイルを見てみましょう

オブジェクトをPageメソッドに渡すことで、 このオブジェクトには、すべてのイベント (クリック、スライド、CSS3 アニメーションなど) とライフサイクルが含まれます。

したがって、Page メソッドを置き換えるメソッドをカスタマイズできます。 このメソッドでは、渡されたオブジェクトを取得して変更します。 最後に、元の Page(Obj) を再度実行することを忘れないでください。 コード構造を見てください

#コードは実際には非常に単純です。関数が呼び出されると、キャッシュが読み取られます。データが存在する場合は、現在のページの情報が読み込まれます。配列要素に追加されます。 配列の長さが 10 より大きい場合は、最初の要素を削除し、配列の長さを 11 のままにします。

タイマーを使用する理由は、テスト中にタイマーを追加しないと最新のデータが読み込めない場合があるためです。 古いデータを取得し、変更して割り当て、最後にキャッシュをリセットします (onshow 関数が実行されるときに、前のページの onhide 関数が完了していない可能性があり、この関数はキャッシュを変更するため、onshow 関数はget は最新のキャッシュではないため、情報が失われます。)

#キャッシュの結果を確認します:

すべてのクリック イベントの監視を実装する

1) 最も簡単な方法はパブリッシュ アンド サブスクライブ モデルを使用することですが、非常に面倒です。

2) ページ内のすべてのイベントに別のレイヤーを追加します。イベントがトリガーされると、パラメーター e が存在します。e.type を判断するだけです。

#コードを見てください

##最後に、元の関数への呼び出しを返します。 、 次に、 replaceOld 関数を見てみましょう。この関数が実装するのは、元のイベント (デコレータ モード) をラップすることです。

このように、ページ内の関数ペアごとに replace を実行します。

機能は何ですか?

この関数が元のメソッドをラップしていることがわかります。パッケージ化の具体的な方法は、渡された置換関数によって異なります。

この関数は最終的に戻ります。本来の関数の実行なので、パッケージの内容は関数本体のクリックイベントかどうかの判断になります。 「はい」の場合は、データを保存してください。

キャッシュされた結果を参照:

クラウド関数呼び出しの失敗は自動的にデータベースに報告され、開発者に対処するよう促します。

Object.defineProperty() を使用してクラウド関数呼び出しをハイジャックし、もう 1 つのレイヤーをラップして、クラウド関数呼び出しを返します。

ただし、ここで注意すべき点があります。クラウド関数呼び出しです。

1) コールバック関数が渡され、結果はコールバック関数で取得されます。

2) コールバック関数が渡されない場合、await を使用して呼び出し結果を待機します。また、クラウド関数呼び出しのエラーをキャプチャする必要があります。

したがって、次の結果を取得します。ハイジャック中に結果を直接取得し、1 つの Promise を返します。

#開発者に自動的に通知して処理する WeChat が提供するテンプレート メッセージをクラウド関数で呼び出すのは、実際には非常に簡単です。

キャッシュされた結果を見てください

構造は少し乱雑かもしれません。結局のところ、これを書くのは初めてであり、まだ作成されていません。まだ実際には適用されていません。

[関連学習の推奨事項: 小さなプログラム開発チュートリアル]

以上がミニプログラム実践：簡易ミニプログラム監視機能の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。