recherche

Maison  >  Article  >  interface Web  >  Explication détaillée de l'interaction entre iOS et JS

Explication détaillée de l'interaction entre iOS et JS

php中世界最好的语言
php中世界最好的语言original
2018-03-06 11:23:281933parcourir

Cette fois, je vous apporte trois points auxquels il faut prêter attention lors de l'interaction entre iOS et JS Quelles sont les précautions concernant l'interaction entre iOS et JS. Voici trois cas classiques. regardez-les. Levez-vous et jetez un œil.

1 Utilisez CocoaPods pour importer WebViewJavascriptBridge

Ici, nous utilisons la dernière version

pod 'WebViewJavascriptBridge', '~> '

Je n'entrerai pas dans les détails de la commande shell pour importer le projet ici.

2. Écrivez le code OC (vous pouvez d'abord écrire du code OC ou Js)

Introduisez le fichier d'en-tête #import "WebViewJavascriptBridge.h"

Créez deux Attributs 

@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 appelle le code OC

AVIS : Avant d'écrire le code appelant ici, nous devons savoir que le nom de la fonction doit être connu dans le front-end. fonction js. C'est très important.
Ici, nous supposons qu'il existe une fonction nommée callViewLoad dans le front-end, qui appelle le code OC pour traiter les données renvoyées dans une liste.

Regardez comment le code OC gère les requêtes de Js

[self.bridge registerHandler:@"callViewLoad" handler:^(id data, WVJBResponseCallback réponseCallback) { NSLog (@"front-end Data sent%@", data); if (responseCallback) { // données qui répondent au front-end
réponseCallback (@{@"UName": @"blog technique de Zhouzhouge",@"URLS":@ "http ://www.jianshu.com/users/1338683b18e0/latest_articles"});
}
}];

Parlons de la description du paramètre ici
handler Le rappel a deux paramètres : data et réponseCallback

Les données sont les données transmises par la fonction front-end js au back-end : par exemple, lors de la connexion, les informations du compte et le mot de passe de l'utilisateur doivent être transmis dans le back-end. Pour le traitement back-end. Les données ici sont

qui stocke deux données. réponseCallback est le contenu des données que nous voulons renvoyer à la fonction js du front-end. Le front-end nous transmet le nom d'utilisateur et le mot de passe. nous renvoyons le résultat de la connexion au front-end. Utilisez-le. Mais il est renvoyé sous forme de dictionnaire.

À ce stade, notre JS appelle OC, et le code côté OC est terminé.

Comment écrire le code JS front-end

Comment écrire le code 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>

Ici, nous examinons principalement la fonction callViewLoad dans le code html. C'est la preuve qu'il a appelé la fonction oc. Vous pouvez voir les paramètres dans le callHandler ici.

Le premier paramètre callViewLoad : nom de la fonction

{'blogURL' : 'http://www.henishuo.com'} : signifie The. données transmises par le code OC

fonction (responseCallback) : accepte la fonction JS qui renvoie avec succès Ici, nous pouvons la surveiller après le retour réussi du backend. Semblable au bloc OC.

Description de cette fonction : JS fournit une API publique à ObjC En s'inscrivant, le côté ObjC peut obtenir un rappel lors de l'appel de cette API côté JS. Le côté ObjC peut renvoyer à JS une fois le traitement terminé. De cette façon, il sera appelé en premier lorsque le chargement de la page est terminé.

AVIS : Nous parlons ici uniquement de la déclaration selon laquelle JS appelle le code OC. Je présente brièvement l'utilisation d'une méthode. Mais nous avons également vu que lors de l’écriture de fonctions JS frontales, il y a beaucoup de code à écrire. Sinon, il n’y aura pas d’effet commun.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Chargement de la syntaxe du module ES6, import et export.

Solution à l'écart entre les balises d'image et de vue

Pourquoi les emplacements sont utilisés dans les sous-composants

Deux méthodes pour implémenter la disposition du flux en cascade

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Problèmes et solutions lors de l'utilisation de la requête http axios dans vue2Article suivant：Problèmes et solutions lors de l'utilisation de la requête http axios dans vue2

Articles Liés

Voir plus