jsBridgeの動作メカニズムを1つの記事で学ぶ

関数ネイティブ (funcName, args = {}, callbackFunc, errorCallbackFunc) {
    // パラメータが有効かどうかを確認します if (args && typeof args === 'object' && Object.prototype.toString.call(args).toLowerCase() === '[object object]' && !args.length) {
        args = JSON.stringify(args);
    } それ以外 {
        throw new Error('args は仕様に準拠していません');
    }
    // 携帯電話環境かどうかを判定する if (getIsMobile()) {
        //window.WebViewJavascriptBridgeオブジェクトのcallHandlerメソッドを呼び出す window.WebViewJavascriptBridge.callHandler(
            関数名、
            引数、
            (res) => {
                文字列を JSON に変換します。
                （res.code === 0）の場合{
                    callbackFunc(res) を返します。
                } それ以外 {
                    errorCallbackFunc(res) を返します。
                }
            }
        );
    }
}

// 変数 varmessagingIframe を定義します。
var sendMessageQueue = [];// メッセージを送信するためのキュー var receivedMessageQueue = [];// メッセージを受信するためのキュー var messageHandlers = {};// メッセージ ハンドラー var CUSTOM_PROTOCOL_SCHEME = 'yy';// カスタム プロトコル var QUEUE_HAS_MESSAGE = '__QUEUE_MESSAGE__/';

var responseCallbacks = {}; // レスポンスコールバック var uniqueId = 1;

var WebViewJavascriptBridge = window.WebViewJavascriptBridge = {
    初期化: 初期化、
    送信: 送信、
    レジスタハンドラ: レジスタハンドラ、
    コールハンドラ: コールハンドラ、
    _fetchQueue: _fetchQueue、
    _handleMessageFromNative: _handleMessageFromNative
};

var doc = ドキュメント;
_createQueueReadyIframe(doc);

関数 _createQueueReadyIframe (ドキュメント) {
    メッセージングIframe = doc.createElement('iframe');
    メッセージングIframe.style.display = 'なし';
    doc.documentElement.appendChild(メッセージングIframe);
}

// Events タイプのイベント オブジェクトを作成します (基本イベント モジュール) var readyEvent = doc.createEvent('Events');
// イベント名をWebViewJavascriptBridgeReadyとして定義します
readyEvent.initEvent('WebViewJavascriptBridgeReady');
//documentdoc.dispatchEvent(readyEvent); を通じてイベントをトリガーします。

ドキュメント.addEventListener()
    'WebViewJavascriptBridgeReady'、
    関数 （） {
        コンソールログ(window.WebViewJavascriptBridge)
    },
    間違い
);

関数 init (messageHandler) {
    (WebViewJavascriptBridge._messageHandler) の場合 {
        新しいエラーをスローします('WebViewJavascriptBridge.init が 2 回呼び出されました');
    }
    // init が呼び出されたときにパラメータが渡されないため、messageHandler=undefined
    WebViewJavascriptBridge._messageHandler = messageHandler;
    // 現在、receiveMessageQueue は単なる空の配列です var receivedMessages = receivedMessageQueue;
    受信メッセージキュー = null;
    (var i = 0; i < receivedMessages.length; i++) の場合 {
        _dispatchMessageFromNative(受信したメッセージ[i]);
    }
}

関数 callHandler (ハンドラ名、データ、レスポンスコールバック) {
    _doSend({
        ハンドラー名: ハンドラー名、
        データ: データ
    }, レスポンスコールバック);
}

関数_doSend(メッセージ、レスポンスコールバック){
    // コールバックが提供されている場合 if (responseCallback) {
        // 一意のコールバックIDを生成する
        var callbackId = 'cb_' + (uniqueId++) + '_' + 新しい Date().getTime();
        // コールバックは、ID によって responseCallbacks オブジェクトに保存されます。 responseCallbacks[callbackId] = responseCallback;
        // ネイティブに送信するメッセージにコールバック ID を追加します。message.callbackId = callbackId;
    }
    //メッセージをメッセージキューに追加します sendMessageQueue.push(message);
    メッセージングIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
}

{
    ハンドラー名、
    データ、
    コールバックID
}

関数_fetchQueue(){
    // 送信するメッセージ キューを文字列に変換します。var messageQueueString = JSON.stringify(sendMessageQueue);
    // メッセージキューをクリアします。 sendMessageQueue = [];
    // Android は返されたデータを直接読み取ることができないため、iframe の src を介して Java と通信します。messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://return/_fetchQueue/' + encodeURIComponent(messageQueueString);
}

関数_handleMessageFromNative(messageJSON) {
    // 前の init メソッドのロジックによれば、receiveMessageQueue は null に設定されるため、else ブランチに進みます if (receiveMessageQueue) {
        メッセージキューを受信します。push(messageJSON);
    } それ以外 {
        _dispatchMessageFromNative(メッセージJSON);
    }
}

関数_dispatchMessageFromNative(messageJSON) {
    setTimeout(関数() {
        // 返送された元のメッセージは文字列型で、JSON に変換されます
        var message = JSON.parse(messageJSON);
        var レスポンスコールバック;
        // Java 呼び出しが完了し、返された responseId は、前に送信した callbackId です。
        if (メッセージ.レスポンスID) {
            // responseCallbacks オブジェクトから ID に関連付けられたコールバック メソッドを取得します。 responseCallback = responseCallbacks[message.responseId];
            if (!レスポンスコールバック) {
                戻る;
            }
            // コールバックを実行し、js が Android メソッドを呼び出してメッセージを正常に受信します。 responseCallback(message.responseData);
            responseCallbacks[message.responseId]を削除します。
        } それ以外 {
            // ...
        }
    });
}

関数_dispatchMessageFromNative(messageJSON) {
    setTimeout(関数() {
        if (メッセージ.レスポンスID) {
            // ...
        } それ以外 {
            // ネイティブに送信するメッセージに ID があるように、ネイティブから送信されるメッセージにも ID があり、ネイティブ内部ではこの ID にコールバックを関連付けます if (message.callbackId) {
                var コールバックレスポンスID = message.callbackID;
                //フロントエンドがネイティブデバイスに応答する必要がある場合は、ネイティブデバイスが ID を通じて対応するコールバックを見つけて実行できるように、ネイティブデバイスによって事前に送信された ID を含める必要があります。responseCallback = function (responseData) {
                    _doSend({
                        レスポンスID: コールバックレスポンスID、
                        レスポンスデータ: レスポンスデータ
                    });
                };
            }
            // デフォルトの _messageHandler を設定していないため、未定義です
            var ハンドラー = WebViewJavascriptBridge._messageHandler;
            // ネイティブに送信されるメッセージには処理メソッドの名前が含まれます if (message.handlerName) {
                // メソッド名を使用して、messageHandlers オブジェクト内に対応する処理メソッドがあるかどうかを確認します。handler = messageHandlers[message.handlerName];
            }
            試す {
                //処理メソッドを実行します。handler(message.data, responseCallback);
            } キャッチ（例外）{
                if (typeof コンソール !== 'undefined') {
                    console.log('WebViewJavascriptBridge: 警告: JavaScript ハンドラーが例外をスローしました。', message, exception);
                }
            }
        }
    });
}

window.WebViewJavascriptBridge.registerHandler('onBackPressed', () => {
    // 何かをする...
})

関数registerHandler(ハンドラ名、ハンドラ) {
    messageHandlers[ハンドラー名] = ハンドラー;
}

{
    ハンドラー名: 'onBackPressed'
}

var CUSTOM_PROTOCOL_SCHEME_IOS = 'https';
var QUEUE_HAS_MESSAGE_IOS = '__wvjb_queue_message__';

var BRIDGE_LOADED_IOS = '__bridge_loaded__';
関数 _createQueueReadyIframe (ドキュメント) {
    メッセージングIframe = doc.createElement('iframe');
    メッセージングIframe.style.display = 'なし';
    if (isIphone()) {
        // これは iOS が最初にロードする必要があるブリッジです
        : メッセージングIframe.src = CUSTOM_PROTOCOL_SCHEME_IOS + '://' + BRIDGE_LOADED_IOS;
    }
    doc.documentElement.appendChild(メッセージングIframe);
}

関数_fetchQueue(){
    var messageQueueString = JSON.stringify(sendMessageQueue);
    送信メッセージキュー = [];
    return messageQueueString; // iframeを経由せず直接返す
}