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

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

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

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];
Copier après la connexion

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>
Copier après la connexion

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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Explication détaillée de l'obtention des droits d'administrateur dans Win11 Explication détaillée de l'obtention des droits d'administrateur dans Win11 Mar 08, 2024 pm 03:06 PM

Le système d'exploitation Windows est l'un des systèmes d'exploitation les plus populaires au monde et sa nouvelle version Win11 a beaucoup attiré l'attention. Dans le système Win11, l'obtention des droits d'administrateur est une opération importante. Les droits d'administrateur permettent aux utilisateurs d'effectuer davantage d'opérations et de paramètres sur le système. Cet article présentera en détail comment obtenir les autorisations d'administrateur dans le système Win11 et comment gérer efficacement les autorisations. Dans le système Win11, les droits d'administrateur sont divisés en deux types : administrateur local et administrateur de domaine. Un administrateur local dispose de tous les droits d'administration sur l'ordinateur local

Explication détaillée du fonctionnement de la division dans Oracle SQL Explication détaillée du fonctionnement de la division dans Oracle SQL Mar 10, 2024 am 09:51 AM

Explication détaillée de l'opération de division dans OracleSQL Dans OracleSQL, l'opération de division est une opération mathématique courante et importante, utilisée pour calculer le résultat de la division de deux nombres. La division est souvent utilisée dans les requêtes de bases de données. Comprendre le fonctionnement de la division et son utilisation dans OracleSQL est donc l'une des compétences essentielles des développeurs de bases de données. Cet article discutera en détail des connaissances pertinentes sur les opérations de division dans OracleSQL et fournira des exemples de code spécifiques pour référence aux lecteurs. 1. Opération de division dans OracleSQL

Explication détaillée du rôle et de l'utilisation de l'opérateur modulo PHP Explication détaillée du rôle et de l'utilisation de l'opérateur modulo PHP Mar 19, 2024 pm 04:33 PM

L'opérateur modulo (%) en PHP est utilisé pour obtenir le reste de la division de deux nombres. Dans cet article, nous discuterons en détail du rôle et de l'utilisation de l'opérateur modulo et fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre. 1. Le rôle de l'opérateur modulo En mathématiques, lorsqu'on divise un entier par un autre entier, on obtient un quotient et un reste. Par exemple, lorsque l’on divise 10 par 3, le quotient est 3 et le reste est 1. L'opérateur modulo est utilisé pour obtenir ce reste. 2. Utilisation de l'opérateur modulo En PHP, utilisez le symbole % pour représenter le module

Explication détaillée de la fonction d'appel système Linux system() Explication détaillée de la fonction d'appel système Linux system() Feb 22, 2024 pm 08:21 PM

Explication détaillée de la fonction d'appel système Linux system() L'appel système est une partie très importante du système d'exploitation Linux. Il fournit un moyen d'interagir avec le noyau système. Parmi elles, la fonction system() est l’une des fonctions d’appel système couramment utilisées. Cet article présentera en détail l’utilisation de la fonction system() et fournira des exemples de code correspondants. Concepts de base des appels système Les appels système sont un moyen permettant aux programmes utilisateur d'interagir avec le noyau du système d'exploitation. Les programmes utilisateur demandent au système d'exploitation en appelant des fonctions d'appel système

Explication détaillée de la commande Linux curl Explication détaillée de la commande Linux curl Feb 21, 2024 pm 10:33 PM

Explication détaillée de la commande curl de Linux Résumé : curl est un puissant outil de ligne de commande utilisé pour la communication de données avec le serveur. Cet article présentera l'utilisation de base de la commande curl et fournira des exemples de code réels pour aider les lecteurs à mieux comprendre et appliquer la commande. 1. Qu’est-ce que la boucle ? curl est un outil de ligne de commande utilisé pour envoyer et recevoir diverses requêtes réseau. Il prend en charge plusieurs protocoles, tels que HTTP, FTP, TELNET, etc., et fournit des fonctions riches, telles que le téléchargement de fichiers, le téléchargement de fichiers, la transmission de données, le proxy.

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Analyse détaillée du parcours d'apprentissage du langage C Analyse détaillée du parcours d'apprentissage du langage C Feb 18, 2024 am 10:38 AM

En tant que langage de programmation largement utilisé dans le domaine du développement de logiciels, le langage C est le premier choix de nombreux programmeurs débutants. L'apprentissage du langage C peut non seulement nous aider à acquérir des connaissances de base en programmation, mais également à améliorer nos capacités de résolution de problèmes et de réflexion. Cet article présentera en détail une feuille de route d'apprentissage du langage C pour aider les débutants à mieux planifier leur processus d'apprentissage. 1. Apprendre la grammaire de base Avant de commencer à apprendre le langage C, nous devons d'abord comprendre les règles de grammaire de base du langage C. Cela inclut les variables et les types de données, les opérateurs, les instructions de contrôle (telles que les instructions if,

En savoir plus sur Promise.resolve() En savoir plus sur Promise.resolve() Feb 18, 2024 pm 07:13 PM

Une explication détaillée de Promise.resolve() nécessite des exemples de code spécifiques. Promise est un mécanisme en JavaScript pour gérer les opérations asynchrones. Dans le développement réel, il est souvent nécessaire de traiter certaines tâches asynchrones qui doivent être exécutées dans l'ordre, et la méthode Promise.resolve() est utilisée pour renvoyer un objet Promise qui a été rempli. Promise.resolve() est une méthode statique de la classe Promise, qui accepte un

See all articles