Configurer votre application générée à l'aide de Visual Studio Tools for Apache Cordova

Article
06/10/2015

Cet article fait référence à Visual Studio Tools pour Apache Cordova, qui correspond à la version préliminaire du logiciel. Les fonctionnalités décrites sont dans l'aperçu et sont sujettes à modification. Vous pouvez télécharger l'aperçu à partir du Centre de téléchargement Microsoft.

Un fichier config.xml inclus dans chaque projet fournit la majeure partie de la configuration de votre application, comme le nom d'affichage et la page de démarrage de l'application. Dans l'Explorateur de solutions, vous pouvez double-cliquer sur ce fichier pour l'ouvrir dans le concepteur de configuration, qui est une interface Visual Studio pour le fichier. Vous pouvez aussi sélectionner Afficher le code dans le menu contextuel pour modifier directement le fichier. Pour plus d'informations sur ce fichier, consultez Fichier config.xml dans la documentation Apache Cordova. Pour plus d'informations sur la configuration de ce fichier dans Visual Studio, consultez les rubriques suivantes :

Configuration de votre version cible de Windows (dans cette rubrique)
Gérer les plug-ins pour les applications générées à l'aide de Visual Studio Tools for Apache Cordova
Créer un package pour votre application générée à l'aide de Visual Studio Tools for Apache Cordova

Avertissement

Si vous modifiez directement le fichier config.xml, assurez-vous que vos éléments et attributs XML sont valides.Un contenu non valide dans le fichier XML provoquera des erreurs lors de la génération de l'application.

Visual Studio fournit également d'autres moyens de configurer votre application pour prendre en charge du contenu spécifique à une plateforme :

Ressources visuelles spécifiques à une plateforme (dans cette rubrique)
Contenu spécifique à une plateforme (dans cette rubrique)
Fichiers de configuration spécifiques à une plateforme (dans cette rubrique)

Configuration de votre version cible de Windows

Par défaut, quand vous générez une application Cordova pour Windows à l'aide de Visual Studio Tools for Apache Cordova, vous générez l'application pour Windows 8.0. Vous pouvez modifier la version ciblée en spécifiant 8.1 dans le concepteur de configuration, sous l'onglet Windows (Version cible de Windows).

Configuration de Windows dans le concepteur de configuration

Quand vous modifiez la version cible de Windows, la ligne suivante est modifiée dans votre fichier config.xml :

<preference name="windows-target-version" value="8.1" />

Ressources visuelles spécifiques à une plateforme

Vous pouvez utiliser le dossier res de votre projet pour spécifier des ressources visuelles, comme des icônes et des écrans de démarrage, en fonction de la résolution et de la plateforme d'un appareil. Si vous ne voyez pas ce dossier dans votre projet, vous pouvez le recréer manuellement dans l'Explorateur de solutions.

res\icons\plateforme contient les icônes de l'application pour chaque plateforme.
res\screens\plateforme contient les écrans de démarrage pour chaque plateforme.

Le nom de fichier de chaque ressource fournit des informations sur la ressource. Par exemple, le fichier screen-ldpi-portrait.png du dossier res\icons\screens\android représente un écran de démarrage pour une faible résolution d'écran (ldpi ou 426 x 320) pour un appareil Android en orientation portrait.

Le tableau suivant contient la liste complète des écrans de démarrage et des icônes qui sont requis si vous devez prendre en charge des appareils et des résolutions d'écran spécifiques. Pour plus d'informations sur ces ressources, consultez Icônes et écrans de démarrage dans la documentation Apache Cordova.

Icônes et écrans de démarrage pour Android	Solution
res/icons/android/icon-36-ldpi.png	36 x 36
res/icons/android/icon-48-mdpi.png	48 x 48
res/icons/android/icon-72-hdpi.png	72 x 72
res/icons/android/icon-96-xhdpi.png	96 x 96
res/screens/android/screen-xhdpi-landscape.png	720 x 960
res/screens/android/screen-xhdpi-portrait.png	960 x 720
res/screens/android/screen-hdpi-landscape.png	480 x 640
res/screens/android/screen-hdpi-portrait.png	640 x 480
res/screens/android/screen-mdpi-landscape.png	320 x 470
res/screens/android/screen-mdpi-portrait.png	470 x 320
res/screens/android/screen-ldpi-landscape.png	320 x 426
res/screens/android/screen-ldpi-portrait.png	426 x 320
Icônes et écrans de démarrage pour iOS	Solution
res/icons/ios/icon-57-2x.png	114 x 114 (affichage Retina)
res/icons/ios/icon-57.png	57 x 57
res/icons/ios/icon-72-2x.png	144 x 144 (affichage Retina)
res/icons/ios/icon-72.png	72 x 72
res/icons/ios/icon-40.png	40 x 40
res/icons/ios/icon-40-2x.png	80 x 80 (affichage Retina)
res/icons/ios/icon-50.png	50 x 50
res/icons/ios/icon-50-2x.png	100 x 100 (affichage Retina)
res/icons/ios/icon-60@3x.png	180 x 180 (affichage Retina)
res/icons/ios/icon-76.png	76 x 76
res/icons/ios/icon-76-2x.png	152 x 152 (affichage Retina)
res/icons/ios/icon-small.png	29 x 29
res/icons/ios/icon-small-2x.png	58 x 58 (affichage Retina)
res/screens/ios/screen-ipad-landscape.png	1024 x 768
res/screens/ios/screen-ipad-landscape-2x.png	2048 x 1536
res/screens/ios/screen-ipad-portrait.png	768 x 1024
res/screens/ios/screen-ipad-portrait-2x.png	1536 x 2048
res/screens/ios/screen-iphone-landscape-736h.png	2208 x 1242
res/screens/ios/screen-iphone-portrait-2x.png	640 x 960
res/screens/ios/screen-iphone-portrait.png	320 x 480
res/screens/ios/screen-iphone-portrait-667h.png	750 x 1334
res/screens/ios/screen-iphone-portrait-736h.png	1242 x 2208
res/screens/ios/screen-iphone-568h-2x.png	640 x 1136
Icônes et écrans de démarrage pour Windows Phone 8	Solution
res/icons/wp8/ApplicationIcon.png	62 x 62
res/icons/wp8/Background.png	173 x 173
res/screens/wp8/SplashScreenImage.png	480 x 800
Icônes et écrans de démarrage pour Windows Phone 8.1	Solution
res/icons/windows/Square150x150Logo.scale-240.png	360x360
res/icons/windows/Square44x44Logo.scale-240.png	106x106
res/icons/windows/Square71x71Logo.scale-240.png	170x170
res/icons/windows/StoreLogo.scale-240.png	120x120
res/icons/windows/Wide310x150Logo.scale-240.png	744x360
res/screens/windows/SplashScreen.scale-240.png	1152x1920
Icônes et écrans de démarrage pour Windows	Solution
res/icons/windows/logo.png	150 x 150
res/icons/windows/smalllogo.png	30 x 30
res/icons/windows/storelogo.png	50 x 50
res/screens/windows/splashscreen.png	620 x 300

Android prend en charge un type d'image évolutif appelé NinePatch qui peut être utilisé comme écran de démarrage.

Pour utiliser une image d'écran de démarrage NinePatch sur Android

Remplacez la ligne suivante dans config.xml :

<preference name="SplashScreen" value="screen" />

par celle-ci :

<preference name="SplashScreen" value="splash" />

Placez l'image NinePatch à l'emplacement suivant : res\native\android\res\drawable-nodpi\splash.9.png

Au moment de la génération, l'image est copiée dans le dossier de sortie requis.

Contenu spécifique à une plateforme

Vous pouvez inclure des fichiers HTML, CSS et JavaScript spécifiques à une plateforme dans le dossier merges de votre projet. Les fichiers que vous ajoutez à ce dossier ajoutent du contenu à une build de votre application spécifique à une plateforme ou remplacent du contenu non spécifique à une plateforme qui utilise le même nom de fichier. Pour plus d'informations sur l'utilisation du dossier merges, consultez la section « Utilisation de merges pour personnaliser chaque plateforme » dans la documentation Apache Cordova.

Si vous ne voyez pas le dossier merges pour votre projet dans l'Explorateur de solutions, ouvrez le menu contextuel du projet dans l'Explorateur de solutions, cliquez sur Ajouter, puis cliquez sur Ajouter du code spécifique à une plateforme pour ajouter le dossier.

Fichiers de configuration spécifiques à une plateforme

Vous pouvez utiliser le dossier res/native de votre projet pour injecter du contenu dans le projet natif généré par Cordova quand vous générez votre application. Ceci peut être utile quand vous avez besoin de configurer votre application pour prendre en charge quelque chose que Cordova lui-même n'expose pas. (Les plug-ins que vous ajoutez à votre projet modifieront également automatiquement la version personnalisée de ces fichiers de configuration.)

Avertissement

Nous vous conseillons d'éviter d'ajouter des fichiers de configuration spécifiques à une plateforme lorsque cela est possible.

Le tableau ci-dessous fournit des informations spécifiques pour chaque plateforme.

Plateforme	Remarques
Android	Placez le fichier personnalisé AndroidManifest.xml dans le dossier res/native/android pour configurer des paramètres tels que les objectifs personnalisés. Utilisez la version générée du fichier dans le dossier bld/Debug/platforms/android après avoir généré une configuration Debug du projet pour Android.
iOS	Placez un fichier personnalisé Info.plist dans le dossier res/native/ios/nom d'affichage de config.xml pour remplacer des paramètres tels que les écrans de démarrage et les icônes. Le nom de fichier Info.plist doit être renommé comme suit : nom d'affichage de config.xml-Info.plist. Vous pouvez trouver des exemples de versions de ces fichiers dans le référentiel GitHub cordova-ios, ou vous pouvez utiliser la version générée pour votre application à partir du dossier de build sur votre Mac (quand vous utilisez l'agent distant) dans le dossier numéro de build/cordovaApp.
Windows	Placez le fichier personnalisé package.windows80.appxmanifest (Windows 8.0), package.windows.appxmanifest (Windows 8.1) ou package.phone.appxmanifestfile (Windows Phone 8.1) dans le dossier res/native/windows pour remplacer divers paramètres de configuration. Utilisez la version générée du fichier dans le dossier bld/Debug/platforms/windows après avoir généré une configuration Debug du projet pour Windows ou Windows Phone (universel).
Windows Phone 8	Placez le fichier personnalisé WMAppManifest.xml dans le dossier res/native/wp8/Properties. Utilisez la version générée du fichier dans le dossier bld/Debug/platforms/wp8/Properties après avoir généré une configuration Debug du projet pour Windows Phone 8.