Maison >interface Web >js tutoriel >Tutoriel de base pour démarrer avec Cordova
Cet article vous présente principalement le didacticiel d'introduction de base de Cordova et certains problèmes rencontrés lors de son utilisation. L'article le présente étape par étape en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. Amis, veuillez suivre l'éditeur pour apprendre ensemble. J'espère que cela aide tout le monde.
Avant-propos
Afin d'économiser de l'argent et de réussir les projets en cours, s'adapter au cordova multiplateforme n'est pas un bon choix. Personnellement, je pense que cela pourrait être une tendance dans le futur ! De nombreuses applications connues comme Alipay et Taobao ont intégré un grand nombre de pages HTML5 ! Par exemple, la plupart des applications actuelles de notre entreprise sont des pages h5, et il semble qu'il n'y ait pas grand-chose à faire dans les applications natives. On peut imaginer l’importance d’apprendre Cordova !
Introduction
Cordova fournit un ensemble d'API liées aux appareils Grâce à cet ensemble d'API, les applications mobiles peuvent accéder aux fonctions natives de l'appareil, telles que les caméras, les microphones, etc., via JavaScript. Cordova fournit également un ensemble unifié de bibliothèques JavaScript, ainsi que des backends de code natif spécifiques aux appareils pour ces bibliothèques. Cordova prend en charge les systèmes d'exploitation mobiles suivants : iOS, Android, Ubuntu Phone OS, Blackberry, Windows Phone, Palm WebOS, Bada et Symbian.
La première étape pour commencer : télécharger la bibliothèque de ressources et l'intégrer au projet
Pour télécharger le code source de la bibliothèque cordova, vous pouvez le télécharger depuis github ou depuis le site officiel . En fait, le code sur le site officiel est également publié sur github !
Site officiel : http://cordova.apache.org/
Adresse de téléchargement des ressources github : https://github.com/apache/cordova-ios
Utiliser Pour la gestion CocoaPods des bibliothèques tierces, j'ai déjà utilisé cordova3.8.0 et je l'ai mis à jour vers 4.0.1 il y a quelques jours. 4.0.1 ne prend en charge que la version 8.0 et supérieure. Si vous utilisez CocoaPods pour mettre à jour ci-dessous, une erreur s'affichera ! Faites juste attention !
plateforme :ios, '8.0'
pod 'Cordova', '~> 4.0.1'
Étape 2 de la mise en route : Comment intégrer correctement dans le bibliothèque du projet cordova4.0.1
1. Configuration Config.xml est très important
Config.xml est un fichier de configuration global qui contrôle de nombreux aspects du comportement d'une application Cordova. est organisé sur la base de la spécification Packaged Web Apps (Widgets) du W3C et étendu pour spécifier les fonctionnalités de base de l'API Cordova, les plugins et les paramètres spécifiques à la plate-forme. Pour les projets créés avec la CLI Cordova (décrits dans L'interface de ligne de commande), cela. Le fichier peut être trouvé dans le répertoire de niveau supérieur :
La signification générale est la suivante : config.xml est un fichier de configuration global qui contrôle de nombreux aspects du comportement d'une application Cordova. Ce fichier XML indépendant de la plate-forme est basé sur la spécification des paramètres d'application Web (widgets) du W3C et s'étend pour spécifier les fonctionnalités de base de l'API Cordova, les plug-ins et les paramètres spécifiques à la plate-forme. Projet créé avec Cordova CLI (décrit dans l'interface de ligne de commande)
http://cordova.apache.org/docs/en/6.x/config_ref/index.html Explication détaillée officielle
2. L'affichage de la page html5 nécessite un conteneur. Ici, la classe CDVViewController est utilisée pour afficher et contrôler html5. Bien entendu, vous pouvez également personnaliser un conteneur pour hériter de la classe CDVViewController afin d'effectuer certaines fonctions personnalisées.
Comment l'utiliser est le suivant :
self.cordovaManageVC= [[CordovaManageVCalloc]init]; self.cordovaManageVC.startPage=@"http://www.baidu.com"; [self.navigationControllerpushViewController:self.cordovaManageVCanimated:YES];
3. Définir l'agent utilisateur
- (instancetype)init { self= [superinit]; if(self!=nil) { //设置用户代理 如不设置无法调用与H5定制的JavaScript方法进行交互 NSString* original = [CDVUserAgentUtiloriginalUserAgent]; NSString* userAgent = [originalstringByAppendingString:@"delegateUserName"]; self.baseUserAgent= userAgent; } returnself; }
4. Les plug-ins personnalisés doivent utiliser la classe CDVPlugin de Cordova. intégrer avec les sous-classes CDVPlugin
/** *返回控件 * *@param command */ - (void)back:(CDVInvokedUrlCommand*)command;
Après la personnalisation, vous devez le configurer dans confing.xml
Ce qui précède est l'utilisation la plus basique de cordova ;
Quelques problèmes rencontrés lors de l'utilisation de Cordova
Problème 1
Problème
[Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclde path to valid SDK directory.] ERROR building one of the platforms: Error: cmd: Command failed with exit code
Solution
ANDROID_HOME=D:\apps\Android\sdk PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
Problème 2
Problème
Error: Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio
Solution
Téléchargez le dernier package Gradle depuis https://services.gradle.org/distributions/ et installez-le.
ANDROID_HOME=/home/kongxx/Android/Sdk GRADLE_HOME=/apps/gradle-3.2.1 PATH=$PATH:$ANDROID_HOME/tools/:$ANDROID_HOME/platform-tools:$GRADLE_HOME/bin
Problème 3
Problème
Lors de l'utilisation de "cordova build android" pour empaqueter, une erreur est signalée : Erreur : Impossible de trouver le wrapper gradle dans le SDK Android.
$ cordova build android CHCP plugin after prepare hook: config-file set to http://www.tjdr.info/EWT/chcp.json ANDROID_HOME=/home/kongxx/Android/Sdk JAVA_HOME=/opt/jdk8 Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK. Looked here: /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper
Solution
Vérifiez le répertoire /home/kongxx/Android/Sdk/tools/templates/gradle/wrapper Le répertoire n'existe pas, j'ai donc vérifié l'environnement android-studio. et j'ai découvert qu'il peut inclure le contenu ci-dessus dans le répertoire plugins/android/lib/templates, alors copiez-le de manière décisive.
$ cp -rf android-studio/plugins/android/lib/templates /home/kongxx/Android/Sdk/tools/
Problème 4
Problème
Lors de l'utilisation de l'emballage Cordova, une erreur se produit : Erreur : spawn EACCES
$ cordova build android CHCP plugin after prepare hook: config-file set to http://www.tjdr.info/EWT/chcp.json ANDROID_HOME=/home/kongxx/Android/Sdk JAVA_HOME=/opt/jdk8 Subproject Path: CordovaLib Error: spawn EACCES
Solution
sudo chmod -Rf 755 ~/Android
Question 5
Question
Lors de l'utilisation du test du navigateur à Cordova, le navigateur Google-Chrome est démarré par défaut, tel que :
cordova run browser
Solution
Vous pouvez utiliser –target pour spécifier le navigateur que vous souhaitez utiliser.
cordova run browser --target=opera cordova run browser --target=firefox
Recommandations associées :
Comment Cordova emballe les projets Vue
Commandes de base pour Cordova
Explication détaillée de la façon d'emballer Cordova dans une application Web
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!