Heim Web-Frontend js-Tutorial Detaillierte Erläuterung der Interaktion zwischen iOS und JS

Detaillierte Erläuterung der Interaktion zwischen iOS und JS

Mar 06, 2018 am 11:23 AM
javascript 交互 详解

Dieses Mal bringe ich Ihnen drei Punkte, die bei der Interaktion zwischen iOS und JS beachtet werden müssen. Was sind die Vorsichtsmaßnahmen bei der Interaktion zwischen iOS und JS? Schauen Sie sie sich an. Stehen Sie auf und werfen Sie einen Blick darauf.

1 Verwenden Sie CocoaPods zum Importieren von WebViewJavascriptBridge

Hier verwenden wir die neueste Version

Pod 'WebViewJavascriptBridge', '~> '

Ich werde hier nicht näher auf den Shell-Befehl zum Importieren des Projekts eingehen.

2. OC-Code schreiben (Sie können zuerst OC-Code oder Js-Code schreiben)

Führen Sie die Header-Datei #import „WebViewJavascriptBridge.h“ ein

Erstellen Sie zwei Attribute

@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];
Nach dem Login kopieren

3. JS ruft OC-Code auf

HINWEIS: Bevor wir den aufrufenden Code hier schreiben, müssen wir wissen, dass der Funktionsname im Frontend bekannt sein muss js-Funktion. Das ist sehr wichtig.
Hier gehen wir davon aus, dass es im Frontend eine Funktion namens callViewLoad gibt, die den OC-Code aufruft, um die zurückgegebenen Daten in einer Liste zu verarbeiten.

Sehen Sie sich an, wie der OC-Code Anfragen von Js verarbeitet

[self.bridge registerHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback ResponseCallback) { NSLog(@"front-end Data sent%@", data); if (responseCallback) { // Daten, die an das Frontend antworten
ResponseCallback(@{@"UName": @"zhouzhouge's Technology Blog",@"URLS":@ "http: //www.jianshu.com/users/1338683b18e0/latest_articles"});
}
}];

Lassen Sie uns hier über die Parameterbeschreibung sprechen
handler Der Rückruf hat zwei Parameter: Daten und AntwortCallback

Die Daten sind die Daten, die von der Front-End-JS-Funktion an das Back-End übertragen werden: Beispielsweise müssen beim Anmelden die Kontoinformationen und das Benutzerkennwort an den Back-End übergeben werden -Ende. Für die Backend-Verarbeitung. Die Daten hier sind

, die den Dateninhalt speichern, den wir an die Front-End-JS-Funktion zurückgeben möchten. Nach dem Aufruf der Schnittstelle übergibt uns das Front-End. Wir geben das Anmeldeergebnis an das Frontend zurück. Verwenden Sie ihn. Es wird jedoch in Wörterbuchform zurückgegeben.

An diesem Punkt ruft unser JS OC auf und der Code auf der OC-Seite ist fertig.

So schreiben Sie den Front-End-JS-Code

So schreiben Sie den HTML-Code

<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>
Nach dem Login kopieren

Hier betrachten wir hauptsächlich die Funktion callViewLoad im HTML-Code. Dies ist der Beweis dafür, dass er die oc-Funktion aufgerufen hat. Sie können die Parameter im callHandler hier sehen

Der erste Parameter callViewLoad: Funktionsname

{'blogURL': 'http://www.henishuo.com'}: bedeutet zu Die Daten übergeben durch den OC-Code

function(responseCallback): akzeptiert die JS-Funktion, die erfolgreich zurückkehrt. Hier können wir sie überwachen, nachdem das Backend erfolgreich zurückgegeben wurde. Ähnlich wie OCs Block.

Beschreibung dieser Funktion: JS stellt eine öffentliche API für ObjC bereit. Durch die Registrierung kann die ObjC-Seite einen Rückruf erhalten, wenn sie diese API auf der JS-Seite aufruft. Die ObjC-Seite kann nach Abschluss der Verarbeitung eine Rückmeldung an JS senden. Auf diese Weise wird sie zuerst aufgerufen, wenn das Laden der Seite abgeschlossen ist.

HINWEIS: Hier sprechen wir nur über die Aussage, dass JS OC-Code aufruft. Ich stelle kurz die Verwendung einer Methode vor. Aber wir haben auch gesehen, dass beim Schreiben von Front-End-JS-Funktionen viel Code geschrieben werden muss. Andernfalls entsteht keine gemeinsame Wirkung.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

ES6-Modulsyntax laden, importieren, exportieren.

Lösung für die Lücke zwischen Bild- und Ansichts-Tags

Warum Slots in Unterkomponenten verwendet werden

Zwei Methoden zur Implementierung des Wasserfall-Flusslayouts

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Interaktion zwischen iOS und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Mar 19, 2024 pm 04:33 PM

Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen

Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Detaillierte Erläuterung der Funktion system() des Linux-Systemaufrufs Feb 22, 2024 pm 08:21 PM

Detaillierte Erläuterung der Funktion system() des Linux-Systems Der Systemaufruf ist ein sehr wichtiger Teil des Linux-Betriebssystems. Er bietet eine Möglichkeit, mit dem Systemkernel zu interagieren. Unter diesen ist die Funktion system() eine der am häufigsten verwendeten Systemaufruffunktionen. In diesem Artikel wird die Verwendung der Funktion system() ausführlich vorgestellt und entsprechende Codebeispiele bereitgestellt. Grundlegende Konzepte von Systemaufrufen Systemaufrufe sind eine Möglichkeit für Benutzerprogramme, mit dem Betriebssystemkernel zu interagieren. Benutzerprogramme fordern das Betriebssystem an, indem sie Systemaufruffunktionen aufrufen

Detaillierte Erläuterung des Linux-Befehls „curl'. Detaillierte Erläuterung des Linux-Befehls „curl'. Feb 21, 2024 pm 10:33 PM

Detaillierte Erläuterung des Linux-Befehls „curl“ Zusammenfassung: Curl ist ein leistungsstarkes Befehlszeilentool für die Datenkommunikation mit dem Server. In diesem Artikel wird die grundlegende Verwendung des Curl-Befehls vorgestellt und tatsächliche Codebeispiele bereitgestellt, um den Lesern zu helfen, den Befehl besser zu verstehen und anzuwenden. 1. Was ist Locken? Curl ist ein Befehlszeilentool zum Senden und Empfangen verschiedener Netzwerkanfragen. Es unterstützt mehrere Protokolle wie HTTP, FTP, TELNET usw. und bietet umfangreiche Funktionen wie Datei-Upload, Datei-Download, Datenübertragung und Proxy

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Detaillierte Analyse der C-Sprachlernroute Detaillierte Analyse der C-Sprachlernroute Feb 18, 2024 am 10:38 AM

Als weit verbreitete Programmiersprache im Bereich der Softwareentwicklung ist die Sprache C für viele Programmieranfänger die erste Wahl. Das Erlernen der C-Sprache kann uns nicht nur dabei helfen, grundlegende Programmierkenntnisse zu erwerben, sondern auch unsere Problemlösungs- und Denkfähigkeiten verbessern. In diesem Artikel wird eine Roadmap zum Erlernen der C-Sprache im Detail vorgestellt, um Anfängern dabei zu helfen, ihren Lernprozess besser zu planen. 1. Grundlegende Grammatik lernen Bevor wir mit dem Erlernen der C-Sprache beginnen, müssen wir zunächst die grundlegenden Grammatikregeln der C-Sprache verstehen. Dazu gehören Variablen und Datentypen, Operatoren, Steueranweisungen (z. B. if-Anweisungen,

Erfahren Sie mehr über Promise.resolve() Erfahren Sie mehr über Promise.resolve() Feb 18, 2024 pm 07:13 PM

Eine detaillierte Erklärung von Promise.resolve() erfordert spezifische Codebeispiele. Promise ist ein Mechanismus in JavaScript zur Verarbeitung asynchroner Vorgänge. In der tatsächlichen Entwicklung ist es häufig erforderlich, einige asynchrone Aufgaben zu verarbeiten, die nacheinander ausgeführt werden müssen, und die Methode Promise.resolve () wird verwendet, um ein erfülltes Promise-Objekt zurückzugeben. Promise.resolve() ist eine statische Methode der Promise-Klasse, die a akzeptiert

See all articles