微信ウィジェット「埋め込み点なし」パッケージレポート

どんなビジネスでも、cエンド製品のデータ統計、埋め込みレポートは重要であり、製品担当者がユーザーの行動をよりよく理解し、反復に迅速に応答するのに役立ちます.
「埋め込み点なし」式とは、業務コードに報告コードを挿入せず、業務コードと報告コードを分離し、プロジェクトのメンテナンス性と可読性を高めることを指す.
ユーザーがクリックするなどの行為を除いて、データの報告で最もよく見られるのはページがuv、pvにジャンプした可能性がある.ウィジェットのページジャンプには2つの方式が実現されている:1、api、例えばwx.navigateToなどの2、navigatorコンポーネントは、実装案と現在の結論をそれぞれ述べるために低下している.
パッケージapi式エスカレーション
使用するメソッド:Object.definePropertyこのメソッドは、オブジェクトに直接新しいプロパティを定義したり、既存のプロパティを変更したりして、オブジェクトを返します.
実はjsのmvvm双方向バインドはこの方法に依存して実現され,興味のある学生はVue原理&双方向バインドMVVMを実現するという文章をステップアップして分析することができる.
この方法では、グローバルオブジェクトwxの下の属性(方法)を変更して、wxのメソッドを呼び出すだけで、必要な目的を統一的に処理することができます.以下は、/utils/hack.jsのインスタンスコードです.

const utils = require("./util");
const event = require("./event");

module.exports = () => {
	//       ，                 
    const originNavigateTo = wx.navigateTo;
    const originRedirectTo = wx.redirectTo;
    const originSwitchTab = wx.switchTab;
    const originNavigateToMiniProgram = wx.navigateToMiniProgram;

    Object.defineProperty(wx, "navigateTo", {
        configurable: true, //       
        enumerable: true, //      
        writable: true, //      
        value: function() {
            const config = arguments[0] || {}; //   
            const url = config.url;
            event.navToPage(url); //      url,          ，         
            return originNavigateTo.apply(this, arguments); //          this
        }
    });

    Object.defineProperty(wx, "redirect", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {};
            const url = config.url;
            event.navToPage(url);
            return originRedirectTo.apply(this, arguments);
        }
    });

    Object.defineProperty(wx, "switchTab", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {};
            const url = config.url;
            event.navToPage(url);
            return originSwitchTab.apply(this, arguments);
        }
    });
    Object.defineProperty(wx, "navigateToMiniProgram", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: function() {
            const config = arguments[0] || {};
            const originSuccess = config.success || function(){};
            const originFail = config.fail || function(){};
            config.success = function() {
                Object.assign(config, {
                    result: "success"
                });
                event.navToMp(config);
                originSuccess.apply(this, arguments);
            };
            config.fail = function(res) {
                Object.assign(config, {
                    result: "fail",
                    // errMsg:res.errMsg
                });
                event.navToMp(config);
                originFail.apply(this, arguments);
            };
            return originNavigateToMiniProgram.apply(this, arguments);
        }
    });
};

app.jsで実行を導入します.

require("./utils/hack.js")()

これにより,apiを用いてページやウィジェットをジャンプする際に,埋め込み点なしでデータを報告する目的を実現できる.
navigator
プロジェクトの半分をしてから無埋点を統一して報告したいので、navigatorコンポーネントを通じてジャンプする入り口がたくさんあります.最初は作業量を減らすためにnavigatorをさらにカプセル化してカスタムコンポーネントにしたいと思っていました.
パッケージは簡単で、navigatorでサポートされている属性たちをカスタムコンポーネントに一度書いただけで、カスタムclassを加えてそのまま与え、コンポーネント内のnavigatorにbindtapを追加してデータを報告します.
しかし、半分にしてやっと大きな穴に出会ったことに気づきました.パッケージされたカスタムコンポーネントはnavigator対の異なるstyleのスタイルの展示とは違いますが、私は一人一人に適したくありません(カスタムコンポーネントの層が多くて、実際には適していません).
したがって、最終的には、既存のすべてのnavigatorをviewに置き換え、api呼び出しによってジャンプを実現し、navigator をapiに置き換えることにした.
更新2019年05月15日10:55:29小明フィードバック:使用方法が不明で、補足説明:1、上記のevent.navToPage(url);は自分でカプセル化した1つの報告要求の方法で、原理はやはりwx.requestを使ってバックエンドインタフェースを呼び出す2、使用方法は使用方法がないので、wxのapiを縛って、特定のapiを呼び出す時に報告します.別の方法で報告する必要はありません