Maison interface Web Tutoriel H5 Exemple de code pour le développement du projet H5 de la fonction de plug-in iOS

Exemple de code pour le développement du projet H5 de la fonction de plug-in iOS

May 10, 2017 pm 02:23 PM

HBuilder est utilisé pour écrire des projets H5 et Xcode est utilisé pour écrire des plug-ins natifs iOS. Ce que je dois réaliser, c'est cliquer sur Imprimer sur la page H5 et exécuter le plug-in natif iOS pour me connecter à l'imprimante Bluetooth. et imprimez le contenu obtenu.

Allez d'abord à la documentation HBuilder, téléchargez le SDK de la version iOS du packaging hors ligne HBuilder, exécutez HBuilder-Hello et démarrez le développement de plug-in natif basé sur le projet HBuilder-Hello.

L'extension de base HTML5+ adopte une structure à trois couches, une couche JS, une couche PluginBridge et une couche native. Les trois couches de fonctions sont :
Couche JS : Appelée sur la page Webview pour déclencher le code de la couche Native et obtenir les résultats d'exécution. Couche PluginBridge : traitez la demande de couche JS et déclenchez le code du plug-in d'extension de couche native.
Couche native : le code natif de la plate-forme de l'extension du plug-in est responsable de l'exécution de la logique métier et du renvoi des résultats d'exécution à la page demandée.

Enregistrez d'abord la relation correspondante
Modifiez le fichier feature.plist dans PandoraAPI.bundle et ajoutez la relation correspondante entre l'alias du plug-in JS et la classe du plug-in natif. La base du SDK trouvera et. générer la relation correspondante en fonction de la relation correspondante et exécuter la méthode correspondante.

plugintest est le nom de la classe de plug-in que vous souhaitez étendre. Créez la classe plugintest dans iOS et héritez-en de PGPlugin.h dans .h, PGMethod.h

 #include "PGPlugin.h"
  #include "PGMethod.h"
Copier après la connexion
Si vous avez besoin d'une bibliothèque statique, faites simplement glisser les fichiers .a et .h dans le projet. Les méthodes en natif sont divisées en méthodes synchrones et asynchrones. Je ne présente ici que les méthodes asynchrones

<. 🎜> dans js Fonctions dans
- (void)PluginTestFunctionArrayArgu:(PGMethod *)msg
{
    NSArray *pArray = [NSArray array];    if (msg)
    {        //CallBackid 异步方法的回调id,H5+ 会根据回调ID通知JS层运行结果成功或者失败
        NSString *cdId = [msg.arguments objectAtIndex:0];        //用户的参数会在第二个参数传回,可以按照Array方式传入
        pArray = [msg.arguments objectAtIndex:1];
        NSLog(@&quot;cdId: %@    pArray: %@&quot;,cdId,pArray);        // 如果使用Array方式传递参数
        NSString *pResultString = [NSString stringWithFormat:@&quot;%@ %@ %@ %@ %@ %@ %@&quot;,[pArray objectAtIndex:0],[pArray objectAtIndex:1], [pArray objectAtIndex:2],[pArray objectAtIndex:3],[pArray objectAtIndex:4], [pArray objectAtIndex:5],[pArray objectAtIndex:6]];
        NSLog(@&quot;pResultString: %@&quot;,pResultString);        //可以直接调用所导入的静态库里面的方法
        NSString *UUID = [ZQDeviceSDK Prn_GetPortList:1];
        NSString *port = [UUID stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]];
        [self startPrintText:pArray andUUID:port];        // 运行Native代码结果和预期相同,调用回调通知JS层运行成功并返回结果
         PDRPluginResult *result = [PDRPluginResult resultWithStatus:PDRCommandStatusOK messageAsString:pResultString];        // 如果Native代码运行结果和预期不同,需要通过回调通知JS层出现错误,并返回错误提示//        PDRPluginResult *resultError = [PDRPluginResult resultWithStatus:PDRCommandStatusError messageAsString:@&quot;出错了!&quot;];
        //通知JS层Native层运行结果,JS Pluginbridge会根据cbid找到对应的回调方法并触发
       [self toCallback:cdId withReslut:[result toJSONString]];
    }
}
Copier après la connexion

Code appelé en H5
document.addEventListener( &quot;plusready&quot;,  function(){  // 声明的JS“扩展插件别名”
     var _BARCODE = &#39;plugintest&#39;,B = window.plus.bridge;     var plugintest ={         // 声明异步返回方法
         // 通知Native层plugintest扩展插件运行”PluginTestFunction”方法
        //参数为所需传入原生的参数
         PluginTestFunctionArrayArgu : function (Argus, successCallback, errorCallback ){             var success = typeof successCallback !== &#39;function&#39; ? null : function(args) 
              {
                  successCallback(args);
              },
              fail = typeof errorCallback !== &#39;function&#39; ? null : function(code) 
              {
                  errorCallback(code);
              };
              callbackID = B.callbackId(success, fail);              //这里写上原生中的异步方法名
              return B.exec(_BARCODE, &quot;PluginTestFunctionArrayArgu&quot;, [callbackID, Argus]);
         }   
      window.plus.plugintest = plugintest;
 }, true );
Copier après la connexion

Le processus général de développement est comme ça. En fait, le vrai problème n'est pas le code mais les différents aspects. du débogage de l'IDE..
plus.plugintest.PluginTestFunctionArrayArgu( printData, function( result ) {
                 mui.alert( result );
                },function(result){
                 mui.alert(result)
                 });
Copier après la connexion
Ce qui suit consiste à importer le projet H5 dans Xcode pour implémenter le packaging hors ligne dans le manifest.json du projet, modifiez l'appid afin qu'il soit cohérent avec l'appid dans la version et la build. correspondent au nom et au code sous version


Supprimez tous les commentaires chinois dans manifest.json, puis importez le projet H5 dans le répertoire www sous Pandora N'oubliez pas d'importer tous les fichiers du projet dans www, pas le projet. directement. Accédez à www. Si vous l'exécutez comme ceci, vous ne pourrez pas ouvrir l'application.

Changez le nom du dossier au niveau supérieur de www par le nom cohérent avec l'Appid, vous pouvez mettre l'icône dans HBuilder pour générer une icône de la taille correspondante. convivial.. Avant iOS Pour le développement, je m'adresse toujours à l'artiste. Ensuite, je change le nom du projet, etc. Je n'entrerai pas dans les détails un par un.

[Recommandations associées]

1.

Tutoriel vidéo en ligne h5 gratuit

2.

Manuel de la version complète HTML5

. 3.

Tutoriel vidéo html5 original php.cn

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

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

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)

Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Mar 13, 2025 pm 08:00 PM

Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles?

Comment ajouter de l'audio à mon site Web HTML5? Comment ajouter de l'audio à mon site Web HTML5? Mar 10, 2025 pm 03:01 PM

Comment ajouter de l'audio à mon site Web HTML5?

Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Mar 18, 2025 pm 02:16 PM

Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation?

Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Mar 13, 2025 pm 07:51 PM

Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible?

Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Mar 10, 2025 pm 02:59 PM

Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur?

Comment utiliser l'API HTML5 Notifications pour afficher les notifications de bureau? Comment utiliser l'API HTML5 Notifications pour afficher les notifications de bureau? Mar 13, 2025 pm 07:57 PM

Comment utiliser l'API HTML5 Notifications pour afficher les notifications de bureau?

Comment créer des jeux interactifs avec HTML5 et JavaScript? Comment créer des jeux interactifs avec HTML5 et JavaScript? Mar 10, 2025 pm 06:34 PM

Comment créer des jeux interactifs avec HTML5 et JavaScript?

Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur? Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur? Mar 12, 2025 pm 03:20 PM

Comment utiliser l'API HTML5 WebSockets pour la communication bidirectionnelle entre le client et le serveur?

See all articles