Configurar seu aplicativo compilado com o Visual Studio Tools for Apache Cordova

Artigo
06/10/2015

Este artigo se refere ao Visual Studio Tools for Apache Cordova, que é um software de pré-lançamento. Os recursos descritos estão em pré-lançamento e sujeitos a alterações. Você pode baixar a visualização do Microsoft Download Center.

Um arquivo config.xml incluído em cada projeto fornece a maioria da configuração do aplicativo, como seu nome de exibição e página inicial. No Solution Explorer, clique duas vezes esse arquivo para abri-lo no designer de configuração, uma interface do Visual Studio para o arquivo. Como alternativa, você pode selecionar Exibir código no menu de contexto para editar o arquivo diretamente. Para obter mais informações sobre esse arquivo, consulte arquivo config.xml na documentação do Apache Cordova. Para obter informações sobre como configurar esse arquivo no Visual Studio, consulte estes tópicos:

Configurando sua versão de destino do Windows (neste tópico)
Gerenciar plug-ins para aplicativos compilados com o Visual Studio Tools for Apache Cordova
Empacotar seu aplicativo compilado com o Visual Studio Tools for Apache Cordova

Aviso

Se você editar o arquivo config.xml diretamente, certifique-se de que seus elementos XML e atributos são válidos.Conteúdo inválido no arquivo XML resultará em erros ao criar o aplicativo.

O Visual Studio também fornece outras maneiras de configurar seu aplicativo para oferecer suporte a conteúdo específico de plataforma:

Ativos visuais específicos à plataforma (neste tópico)
Conteúdo específico de plataforma (neste tópico)
Arquivos de configuração específicos de plataforma (neste tópico)

Configurando sua versão de destino do Windows

Por padrão, quando você cria um aplicativo de Cordova para Windows usando o Visual Studio Tools para o Apache Cordova você criar o aplicativo para Windows 8.0. Você pode alterar a versão de destino para 8.1 no designer de configuração, na guia Windows (versão de destino do Windows).

Configurando o Windows no Designer de configuração

Quando você alterar a versão de destino do Windows, a seguinte linha é modificada no arquivo config. XML:

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

Ativos visuais específicos da plataforma

Você pode usar a pasta res no projeto para especificar ativos visuais como ícones e telas de abertura com base na resolução do dispositivo e na plataforma. Se você não vir essa pasta no projeto, poderá recriá-lo manualmente no Gerenciador de Soluções.

res\icons\plataforma contém os ícones de aplicativo para cada plataforma.
res\screens\plataforma contém telas de abertura para cada plataforma.

O nome do arquivo de cada recurso fornece algumas informações sobre o ativo. Por exemplo, o arquivo screen-ldpi-portrait.png na pasta res\icons\screens\android representa um tela inicial para uma baixa resolução de tela (ldpi ou 426 x 320) para um dispositivo Android na orientação retrato.

A tabela a seguir fornece uma lista completa das telas de abertura e ícones que são necessários se você precisar oferecer suporte a dispositivos e resoluções de tela específicos. Para obter informações adicionais sobre esses ativos, consulte Ícones e telas de abertura na documentação do Apache Cordova.

Ícones e telas de abertura para Android	Resolução
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
Ícones e telas de abertura para iOS	Resolução
res/icons/ios/icon-57-2x.png	114 x 114 (Tela Retina)
res/icons/ios/icon-57.png	57 x 57
res/icons/ios/icon-72-2x.png	144 x 144 (Tela 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 (Tela Retina)
res/icons/ios/icon-50.png	50 x 50
res/icons/ios/icon-50-2x.png	100 x 100 (Tela Retina)
res/ícones/ios/icon-60@3x.png	180 x 180 (exibição de Retina)
res/icons/ios/icon-76.png	76 x 76
res/icons/ios/icon-76-2x.png	152 x 152 (Tela Retina)
res/icons/ios/icon-small.png	29 x 29
res/icons/ios/icon-small-2x.png	58 x 58 (Tela 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 horas 1334
res/Screens/IOS/Screen-iPhone-Portrait-736h.PNG	1242 x 2208
res/screens/ios/screen-iphone-568h-2x.png	640 x 1136
Ícones e telas iniciais para Windows Phone 8	Resolução
res/icons/wp8/ApplicationIcon.PNG	62 x 62
res/icons/wp8/background.PNG	173 x 173
res/Screens/wp8/SplashScreenImage.PNG	480 x 800
Ícones e telas iniciais para Windows Phone 8.1	Resolução
res/icons/windows/Square150x150Logo.scale-240.png	360 x 360
res/icons/windows/Square44x44Logo.scale-240.png	106 x 106
res/icons/windows/Square71x71Logo.scale-240.png	170 x 170
res/icons/windows/StoreLogo.scale-240.png	120 x 120
res/icons/windows/Wide310x150Logo.scale-240.png	744 x 360
res/screens/windows/SplashScreen.scale-240.png	1920 x 1152
Ícones e telas de abertura para Windows	Resolução
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 oferece suporte a um tipo escalonável de imagem chamada um NinePatch que pode ser usado como a tela inicial.

Para usar uma imagem de tela inicial NinePatch no Android

Altere a seguinte linha no arquivo config. XML:

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

para

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

Coloque a imagem NinePatch no seguinte local: res\native\android\res\drawable-nodpi\splash.9.png

Quando você compila, a imagem será copiada para a pasta de saída necessárias.

Conteúdo específico de plataforma

Você pode incluir arquivos HTML, CSS e JavaScript específicos de plataforma na pasta merges do projeto. Os arquivos que você adicionar a essa pasta adicionam conteúdo a uma compilação específica da plataforma do seu aplicativo ou substituem conteúdo não específico da plataforma que usa o mesmo nome de arquivo. Para obter mais informações sobre como usar a pasta merges, consulte a seção "Usando a merges para personalizar cada plataforma" na documentação do Apache Cordova.

Se você não vir a pasta merges do seu projeto no Gerenciador de Soluções, abra o menu de atalho para o projeto no Gerenciador de Soluções, escolha Adicionar e, em seguida, escolha Adicionar código específico de plataforma para adicionar a pasta.

Arquivos de configuração específicos de plataforma

Você pode usar a pasta res/nativo em seu projeto para inserir conteúdo no projeto nativo gerado pelo Cordova quando você compila seu aplicativo. Isso pode ser útil quando você precisa configurar seu aplicativo para dar suporte a algo Cordova em si não expõe. (Plug-ins que você adicionar ao seu projeto automaticamente modificará a versão personalizada desses arquivos de configuração.)

Aviso

É recomendável evitar a adição de arquivos de configuração específicos de plataforma quando possível.

A tabela a seguir fornece informações específicas para cada plataforma.

Plataforma	Notas
Android	Coloque personalizado Androidmanifest arquivo na pasta res/nativo/android para definir configurações como tentativas personalizadas. Use a versão gerada do arquivo na pasta bld/depuração/plataformas/android depois de criar uma configuração de depuração do projeto para o Android.
iOS	Coloque um personalizado Info.plist arquivo res/nativo/ios/nome de exibição do arquivo config. XML pasta para substituir as configurações como splashscreens ou ícones. O nome do arquivo Info.plist deve ser renomeado como segue: nome de exibição do arquivo config. XML-Info.plist. Você pode encontrar versões de exemplo desses arquivos no cordova ios repositório GitHub, ou você pode usar a versão gerada para seu aplicativo da pasta de compilação em seu Mac (ao usar o agente remoto) no número de compilação/cordovaApp pasta.
Windows	Coloque o package.windows80.appxmanifest personalizado (Windows 8.0), package.windows.appxmanifest (Windows 8.1) ou package.phone.appxmanifestfile (Windows Phone 8.1) na pasta res/nativo/windows para substituir várias configurações. Use a versão gerada do arquivo na pasta bld/depuração/plataformas/windows depois de criar uma configuração de depuração do projeto para Windows ou Windows Phone (Universal).
Windows Phone 8	Coloque o arquivo WMAppManifest XML personalizado na pasta res/nativo/wp8/propriedades. Use a versão gerada do arquivo na pasta bld/depuração/plataformas/wp8/propriedades depois de criar uma configuração de depuração do projeto do Windows Phone 8.