iOSとJSのやりとりを詳しく解説-jsチュートリアル-php.cn

iOSとJSのやりとりを詳しく解説

php中世界最好的语言

リリース： 2018-03-06 11:23:28

オリジナル

1934 人が閲覧しました

今回は、iOS と JS をやり取りする際に注意すべき 3 つのポイントについて説明します。iOS と JS の間でやり取りする際の注意事項は何ですか? ここでは、3 つの典型的なケースを紹介します。

1 CocoaPods を使用して WebView

JavascriptBridge をインポートします

ここでは最新バージョン

pod 'WebViewJavascriptBridge', '~> 5.0.5' を使用します

インポートするシェルコマンドについては多くを言いません。ここのプロジェクト。

2. OC コードを記述します (最初に OC コードまたは JS コードを記述できます)

ヘッダーファイル #import "WebViewJavascriptBridge.h" を導入します

2 つの

属性を作成します

@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 コードを呼び出してリスト内の返されたデータを処理すると仮定します。

OC のコードが Js からのリクエストをどのように処理するかを見てみましょう

[self.bridge registerHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"フロントエンドによって送信されたデータ%@", data ; /users/1338683b18e0/latest_articles"});

}
}];

ここでパラメーターの説明について話しましょう

ハンドラーのコールバックには、data と responseCallback という 2 つのパラメーターがあります

データはフロントエンド 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(&#39;iframe&#39;);
                WVJBIframe.style.display = &#39;none&#39;;
                WVJBIframe.src = &#39;wvjbscheme://BRIDGE_LOADED&#39;;                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }        
        /**与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
        setupWebViewJavascriptBridge(function(bridge) {             /**OC调用JS代码不含参数*/
             bridge.registerHandler(&#39;UserLogin&#39;, function() {
                                    alert(&#39;UserLogin&#39;)
             })             /**OC调用JS代码含参数*/
             bridge.registerHandler(&#39;UserLoginInfo&#39;, function(data, responseCallback) {
                    responseCallback({&#39;userId&#39;: &#39;123456&#39;, &#39;Names&#39;: &#39;ZHOUZHOUGEDEBOKE&#39;})
            })                                     
             // **********************************JS调用OC
             bridge.callHandler(&#39;callViewLoad&#39;, {&#39;blogURL&#39;: &#39;http://www.henishuo.com&#39;}, 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 サイトの他の関連記事を参照してください。