Приложение PhoneGap Build iOS имеет пустой белый экран после заставки

Я использую PhoneGap Build 3.0, пытаясь избавиться от пустого белого экрана, который появляется после заставки.

Я провел исследование, и все, что я могу найти, это ссылки на PhoneGap и Cordova, а не на PhoneGap Build. Ни одна из вещей, которые я пробовал, не сработала - в основном, отключив скрытие экрана автоматического заставки и сокрыв ее автоматически с помощью JavaScript:

В файле config.xml:

<feature name="SplashScreen">
    <param name="ios-package" value="CDVSplashScreen" />
    <param name="onload" value="true" />
</feature>

В 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>

Но это, кажется, игнорирует меня и автоматически скрывает экран независимо. Я предполагаю, что это связано с тем, что это решение не для сборки PhoneGap, но я не уверен, как еще можно это исправить.

Ответы

Ответ 1

Полностью чувствуйте свою боль от этого. Документам для PhoneGap Build нужна большая работа. Я боролся с этим последние пару дней сам. После долгих проб и ошибок, это то, что сработало для меня.

Внутри 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" />

Android, похоже, не имеет параметра AutoHide, поэтому мы просто даем ему долгую задержку. Мы скроем его вручную с помощью JS до достижения этого 10 секунд.

Добавление ссылки плагина в файле config.xml необходимо для работы javascript-кода navigator.splashscreen.hide();.

Кроме того, я нашел для своего проекта (с использованием Kendo UI Mobile), что в течение onDeviceReady не требовалась задержка setTimeout. Я предполагаю, что как только вы получите правильные параметры в вашем файле config.xml, вы увидите то же самое в своем приложении.

Мой onDeviceReady выглядит следующим образом:

document.addEventListener('deviceready', function() {
  navigator.splashscreen.hide();
});

Протестировано на iOS 6 и Android 4.1 с помощью PhoneGap Build 3.1.

Ответ 2

Я хочу добавить, что у меня была аналогичная проблема, и в моем случае это был не экран заставки.

В моем случае с использованием сборки PhoneGap и Git я добавил файл javascript в свое приложение, но не смог включить и переместить новый файл в мой репозиторий git. Это заставило мое приложение работать локально, но когда сервер сборки вытащил последний код, он показал белый экран в сборке PhoneGap.

PhoneGap инициализирован, но пользовательский интерфейс Kendo не понравился отсутствующий ссылочный класс js и не удалось. Это была ошибка PhoneGap noob, но я хочу поделиться тем, что она помогает кому-то, у кого есть аналогичная проблема, и проблема с заставкой не работает. Это может быть ошибка javascript, возникающая до загрузки вашей мобильной платформы ui.

Ответ 3

Если вы используете плагин whitelist для своего приложения, вам может потребоваться изменить файл config.xml следующим образом, чтобы работать с сборкой phonegap.

<gap:plugin name="cordova-plugin-whitelist" source="npm" version="~1" />

Это была спецификация cli в моем config.xml.

<preference name="phonegap-version" value="cli-5.2.0" />

Ответ 4

Попробуйте установить цвет фона в конфигурациях и html. Пример синий:

<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashScreenDelay" value="1" />
<preference name="backgroundColor" value="0xff0000ff" />

и в теге html

<html style="background-color:#0000ff;>

Ответ 5

Это шаги

1) Добавьте предпочтение экрана Splash в 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) Объявите свои заставки в 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) Наконец добавьте этот класс в вашу структуру проекта Android в пакете org.apache.cordova.splashscreen

или

установите его как плагин Кордовы.

Ответ 6

У меня была аналогичная проблема только на iOS, и в моем случае это было связано с тем, как я реализовал стили на index.html. В моем случае я должен был предоставить стиль для разных брендов, и он зависел от переменной $scope. Я использовал @import внутри body, и, похоже, у iOS есть проблема с ним. Я решил это, вернув ссылки CSS в head. Я использовал $rootScope и ng-if для запуска правильных стилей на основе фирменного наименования. Как-то это было с @import, результатом чего стал пустой белый экран после заставки... Надеюсь, это может помочь любому, у кого есть такая же проблема.

Ответ 7

У меня такая же проблема: "пустой белый экран после заставки". По какой-то причине я получил это сообщение в журнале отладки эмулятора iOS:

deviceready has not fired after 5 seconds

Было решено удалить этот метатег из моего index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Теперь он работает в iOS (не тестировался в android). Ссылка # 1 здесь!

Кроме того, это документация плагина-плагина-splashscreen. (поиск "iOS Quirk:" ). Ссылка # 2 здесь!