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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

php中世界最好的语言

Mar 06, 2018 am 11:23 AM

javascript 交流詳しい説明

今回は、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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7476

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Win11での管理者権限の取得について詳しく解説 Mar 08, 2024 pm 03:06 PM

Windows オペレーティングシステムは世界で最も人気のあるオペレーティングシステムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカルコンピュータに対する完全な管理権限を持っています

Oracle SQLの除算演算の詳細説明 Mar 10, 2024 am 09:51 AM

OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算

PHPモジュロ演算子の役割と使い方を詳しく解説 Mar 19, 2024 pm 04:33 PM

PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。

Linuxシステムコールsystem()関数の詳細説明 Feb 22, 2024 pm 08:21 PM

Linux システムコール system() 関数の詳細説明システムコールは、Linux オペレーティングシステムの非常に重要な部分であり、システムカーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システムコールの基本概念システムコールは、ユーザープログラムがオペレーティングシステムカーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。

Linuxのcurlコマンドの詳しい説明 Feb 21, 2024 pm 10:33 PM

Linuxのcurlコマンドの詳細な説明要約：curlは、サーバーとのデータ通信に使用される強力なコマンドラインツールです。この記事では、curl コマンドの基本的な使用法を紹介し、読者がコマンドをよりよく理解して適用できるように実際のコード例を示します。 1.カールとは何ですか? curl は、さまざまなネットワーク要求を送受信するために使用されるコマンドラインツールです。 HTTP、FTP、TELNETなどの複数のプロトコルをサポートし、ファイルアップロード、ファイルダウンロード、データ送信、プロキシなどの豊富な機能を提供します。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

C言語学習ルートを詳細に分析 Feb 18, 2024 am 10:38 AM

ソフトウェア開発の分野で広く使用されているプログラミング言語として、C 言語は多くの初心者プログラマーにとって最初の選択肢です。 C言語を学ぶと、プログラミングの基礎知識を定着させるだけでなく、問題解決能力や思考力も向上します。この記事では、初心者が学習プロセスをより適切に計画できるようにするための C 言語学習ロードマップを詳しく紹介します。 1. 基本的な文法を学ぶ C 言語の学習を始める前に、まず C 言語の基本的な文法規則を理解する必要があります。これには、変数とデータ型、演算子、制御ステートメント (if ステートメント、

Promise.resolve() について詳しく見る Feb 18, 2024 pm 07:13 PM

Promise.resolve() の詳細な説明には、特定のコード例が必要です。Promise は、非同期操作を処理するための JavaScript のメカニズムです。実際の開発では、順番に実行する必要があるいくつかの非同期タスクを処理する必要があることがよくあり、満たされた Promise オブジェクトを返すために Promise.resolve() メソッドが使用されます。 Promise.resolve() は Promise クラスの静的メソッドであり、

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック