javascript - híbridas - La aplicación PhoneGap Build iOS tiene una pantalla en blanco en blanco después de la pantalla de inicio
pantalla en blanco con apps híbridas cordova en android (7)
Estoy usando PhoneGap Build 3.0, intentando deshacerme de la pantalla en blanco que aparece después de la pantalla de inicio.
He investigado y todo lo que puedo encontrar son referencias a PhoneGap y Cordova, no a PhoneGap Build. Ninguna de las cosas que he probado ha funcionado, principalmente, deshabilitando la ocultación automática de la pantalla de inicio y ocultándola automáticamente con JavaScript:
En el config.xml:
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
En index.html:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
window.location.href = mysite.com
document.AddEventListener("deviceready", OnDeviceReady, false);
function OnDeviceReady() {
setTimeout(function() {
navigator.splashscreen.hide();
}, 6000);
};
</script>
Pero parece que esto me ignora y oculta automáticamente la pantalla. Supongo que esto se debe a que esta solución no es para PhoneGap Build, pero no estoy seguro de cómo solucionar este problema.
Estos son los pasos
1) Añadir preferencia de pantalla de bienvenida en config.xml
<preference
name="SplashScreen"
value="screen" />
<preference
name="AutoHideSplashScreen"
value="true" />
<preference
name="SplashScreenDelay"
value="5000" />
<feature name="SplashScreen" >
<param
name="android-package"
value="org.apache.cordova.splashscreen.SplashScreen" />
<param
name="onload"
value="true" />
</feature>
2) Declare sus pantallas de inicio en config.xml
<!-- you can use any density that exists in the Android project -->
<splash
density="land-hdpi"
src="res/drawable-land-hdpi/splash.png" />
<splash
density="land-ldpi"
src="res/drawable-land-ldpi/splash.png" />
<splash
density="land-mdpi"
src="res/drawable-land-mdpi/splash.png" />
<splash
density="land-xhdpi"
src="res/drawable-land-xhdpi/splash.png" />
<splash
density="port-hdpi"
src="res/drawable-hdpi/splash.png" />
<splash
density="port-ldpi"
src="res/drawable-ldpi/splash.png" />
<splash
density="port-mdpi"
src="res/drawable-mdpi/splash.png" />
<splash
density="port-xhdpi"
src="res/drawable-xhdpi/splash.png" />
</platform>
3) Finalmente, agregue esta clase en la estructura de su proyecto Android en el paquete org.apache.cordova.splashscreen
o
Instalalo como complemento de Cordova.
Intenta configurar el color de fondo, en las configuraciones y html. Ejemplo azul:
<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashScreenDelay" value="1" />
<preference name="backgroundColor" value="0xff0000ff" />
y en la etiqueta html
<html style="background-color:#0000ff;>
Quiero agregar que tuve un problema similar y en mi caso no fue la pantalla de bienvenida.
En mi caso, al usar PhoneGap build y Git, agregué un archivo javascript a mi aplicación, pero no pude incluir ni enviar el nuevo archivo a mi repositorio de git. Esto hizo que la aplicación funcionara localmente, pero cuando el servidor de compilación sacó el último código, mostró la pantalla blanca en la compilación de PhoneGap.
PhoneGap se inicializó, pero a la interfaz de Kendo no le gustó la clase js de referencia faltante y falló. Fue un error de noob de PhoneGap, pero quiero compartirlo solo en caso de que ayude a alguien que tenga un problema similar y la corrección de la pantalla de inicio no funcione. Podría ser un error de javascript antes de que se cargue el marco de la interfaz de usuario móvil.
Si estaba usando el complemento de la lista blanca para su aplicación, es posible que necesite un cambio en config.xml de la siguiente manera para trabajar con la compilación phonegap.
<gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" />
Esta fue la especificación de cli en mi config.xml.
<preference name="phonegap-version" value="cli-5.2.0" />
Siente totalmente tu dolor en esto. Los documentos para PhoneGap Build necesitan mucho trabajo. Yo mismo he estado peleando con esto los últimos días. Después de mucho ensayo y error, esto es lo que me ha funcionado.
Dentro de config.xml:
<!-- Do not auto hide splash on iOS -->
<preference name="AutoHideSplashScreen" value="false" />
<!-- Do not auto hide splash on Android -->
<preference name="SplashScreenDelay" value="10000"/>
<gap:plugin name="org.apache.cordova.splashscreen" />
Parece que Android no tiene un parámetro AutoHide, por lo que solo le damos un largo retraso. Lo ocultaremos manualmente con JS antes de que se alcancen estos 10 segundos.
Es necesario agregar la referencia del complemento en el archivo config.xml para el código javascript navigator.splashscreen.hide(); trabajar.
También, encontré para mi proyecto (usando Kendo UI Mobile) que no se necesitaba ningún retardo onDeviceReady dentro de onDeviceReady . Supongo que, una vez que obtenga los parámetros correctos dentro de su config.xml, verá lo mismo en su aplicación.
Mi onDeviceReady tiene este aspecto:
document.addEventListener(''deviceready'', function() {
navigator.splashscreen.hide();
});
Probado en iOS 6 y Android 4.1 utilizando PhoneGap Build 3.1.
Solo tuve un problema similar en iOS y, en mi caso, estaba relacionado con la forma en que implementé los estilos en index.html . En mi caso, tuve que proporcionar un estilo para diferentes marcas y dependía de la variable $ scope . Utilicé @import inside body y aparentemente iOS tiene un problema con él. Lo resolví poniendo enlaces CSS de nuevo a la cabeza . Usé $ rootScope y ng-if para activar los estilos correctos según el nombre de la marca. De alguna manera fue con @import que resultó con una pantalla blanca en blanco después de la pantalla de inicio ... Espero que pueda ayudar a cualquiera que tenga el mismo problema.
Tengo el mismo problema "pantalla blanca en blanco después de la pantalla de inicio". Por alguna razón recibí este mensaje en el emulador del registro de depuración de iOS:
deviceready has not fired after 5 seconds
Se resolvió eliminando esta etiqueta meta de mi index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src ''self'' ''unsafe-inline''; script-src ''self'' ''unsafe-inline'' ''unsafe-eval''">
Ahora está funcionando en iOS (No probado en Android). ¡Referencia # 1 aquí!
También esta es la documentación de cordova-plugin-splashscreen. (búsqueda de "iOS Quirk:"). Referencia # 2 aquí!