ホームページ > 記事 > ウェブフロントエンド > iOSとJSのやりとりを詳しく解説
iOSとJSのやりとりを詳しく解説
- php中世界最好的语言オリジナル
- 2018-03-06 11:23:281864ブラウズ
今回は、iOS と JS をやり取りする際に注意すべき 3 つのポイントについて説明します。iOS と JS の間でやり取りする際の 注意事項 は何ですか? ここでは、3 つの典型的なケースを紹介します。
1 CocoaPods を使用して WebViewJavascriptBridge をインポートします
ここでは最新バージョンpod 'WebViewJavascriptBridge', '~> 5.0.5' を使用します@property (nonatomic, strong) UIWebView * webView;@property WebViewJavascriptBridge* bridge; 初始化WebView和WebViewJavascriptBridge self.webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:self.webView]; /**开启日志*/ [WebViewJavascriptBridge enableLogging]; /**初始化-WebViewJavascriptBridge*/ self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView]; [self.bridge setWebViewDelegate:self];3. JS は OC コードを呼び出します 注意:ここで呼び出しコードを記述する前に、フロントエンド js 関数の関数名を知っておく必要があります。これはとても重要です。
ここでは、フロントエンドに callViewLoad という名前の関数があり、OC コードを呼び出してリスト内の返されたデータを処理すると仮定します。
}
}];
ここでパラメーターの説明について話しましょう
データはフロントエンド js 関数によって与えられますバックエンドへ エンドから送信されるデータ: たとえば、ログインする場合、アカウント情報とユーザー パスワードをバックエンドで処理するためにバックエンドに渡す必要があります。ここのデータには 2 つのデータが格納されています。
responseCallback は、フロントエンドの js 関数に返したいデータの内容です。インターフェイスを呼び出した後、フロントエンドはユーザー名とパスワードを返します。結果をフロントエンドに渡して使用します。ただし、辞書形式で返されます。
この時点で、JS が OC を呼び出し、OC 側のコードが完成しました。
フロントエンドJSコードの書き方
HTMLコードの書き方
<html>
<head>
<title>OC和JS互动Web</title>
<script>
/*这段代码是固定的，必须要放到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 = 'wvjbscheme://BRIDGE_LOADED'; document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
/**与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
setupWebViewJavascriptBridge(function(bridge) { /**OC调用JS代码不含参数*/
bridge.registerHandler('UserLogin', function() {
alert('UserLogin')
}) /**OC调用JS代码含参数*/
bridge.registerHandler('UserLoginInfo', function(data, responseCallback) {
responseCallback({'userId': '123456', 'Names': 'ZHOUZHOUGEDEBOKE'})
})
// **********************************JS调用OC
bridge.callHandler('callViewLoad', {'blogURL': 'http://www.henishuo.com'}, function(responseCallback){
alert(responseCallback.UName)
})
}) </script>
</head>
<body>
<button style = "background: yellow; height: 50px; width: 100px;">JS/OC互动</button>
</body>
</html>ここでは主にHTMLコードのcallViewLoad関数について見ていきます。これは彼が oc 関数を呼び出した証拠です。ここで callHandler のパラメーターを確認できます
最初のパラメーター callViewLoad: 関数名
{'blogURL': 'http://www.henishuo.com'}: OC コードに渡されるデータを表します
関数( responseCallback): 正常に返された JS 関数を受け入れます。ここでは、バックエンドが正常に戻った後にそれを監視できます。 OCのブロックに似ています。
この機能の説明: JS は ObjC に公開 API を提供します。登録することで、JS 側でこの API を呼び出したときに、ObjC 側がコールバックを取得できます。このように、ObjC 側は処理が完了した後に JS にフィードバックすることができ、ページの読み込みが完了したときに最初に呼び出されます。
注意: ここでは、OC コードを呼び出す JS のステートメントについてのみ説明します。ある方法の使用法を簡単に紹介します。しかし、フロントエンド JS 関数を作成する場合、記述しなければならないコードが大量にあることもわかりました。そうしないと、共同効果が生じません。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連記事:
ES6 モジュール構文の読み込みインポートエクスポートイメージタグとビュータグ間のギャップの解決策ウォーターフォールフローを実現するためにサブコンポーネントでスロットが使用される理由 2つのレイアウト方法以上がiOSとJSのやりとりを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。