H5の相互作用

WebViewJavascriptBridge（H5はネイティブと相互作用します）



Webviewjavascriptbridge



H5とクライアント（IOS、Android）は何と対話する必要がありますか（手動の頭痛）？答えは「はい」です。必要に応じて、特定のツールを使用する必要があります。私は主にJavascriptBridgeを研究していたので、今日はこの方法を言わなければなりません。そして、私自身に基づいてフロントエンドであるため、一方的にJSの部分のみを述べたため、クライアントは次のことを参照できます。 https://github.com/wangjiaojiao77/WebViewJavascriptBridge(IOS）およびhttps://github.com/wangjiaojiao77/JsBridge（Android）。バッチで言った、最初にIOSについて話しましょう。

1、IOSは最初に次のコードをJSにコピーします（このコードは更新されます。タイムリーな更新に注意してください）。



function setupWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge) } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback) } window.WVJBCallbacks = [callback] var WVJBIframe = document.createElement('iframe') WVJBIframe.style.display = 'none' WVJBIframe.src = 'https://__bridge_loaded__' document.documentElement.appendChild(WVJBIframe) setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0) }

次に、インタラクションを直接記述します（インタラクションは、メソッドを登録することと、すでに登録されているメソッドを呼び出すことの2種類にすぎません）。

setupWebViewJavascriptBridge(function(bridge) { //Register a method (the method name is 'JS Echo'), the client makes the call (the method name is also 'JS Echo'), and responseCallback is the callback function. bridge.registerHandler('JS Echo', function(data, responseCallback) { console.log('JS Echo called with:', data) responseCallback(data) }) / / The client has registered a method called 'ObjC Echo', H5 directly calls (the method name is also 'ObjC Echo') on the line, the call can pass the parameters required by the client bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) { console.log('JS received response:', responseData) }) })

2、Androidso、Androidもとても簡単です。まず、次のコードをJSにコピーします（このコードは更新されます。時間内に更新されるように注意してください）。



function connectWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ) } }

次に、インタラクションを直接問題なく記述します（実際、IOSと同じです）。

connectWebViewJavascriptBridge (function(bridge) { //Register a method (the method name is 'JS Echo'), the client makes the call (the method name is also 'JS Echo'), and responseCallback is the callback function. bridge.registerHandler('JS Echo', function(data, responseCallback) { console.log('JS Echo called with:', data) responseCallback(data) }) / / The client has registered a method called 'ObjC Echo', H5 directly calls (the method name is also 'ObjC Echo') on the line, the call can pass the parameters required by the client bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) { console.log('JS received response:', responseData) }) })

基本はこのように書き終えることです、詳細は私が上で送ったウェブサイトを参照することができます~~~