Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Interaktion zwischen iOS und JS

Detaillierte Erläuterung der Interaktion zwischen iOS und JS

php中世界最好的语言Original: 2018-03-06 11:23:281902Durchsuche

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];

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>

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!

Stellungnahme：

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

Vorheriger Artikel：Probleme und Lösungen bei der Verwendung von axios http request in vue2Nächster Artikel：Probleme und Lösungen bei der Verwendung von axios http request in vue2

In Verbindung stehende Artikel

Mehr sehen