it-roy-ru.com

Кордова - белый экран после заставки, в консоли нет исключений

Я немного отошел от своего приложения Cordova, но вчера только что сделал свежий клон и заметил, что у него появились симптомы "белого экрана смерти" - отображается заставка, программа загружается ... и затем я просто получить пустой экран. Еще несколько деталей:

  • CLI: Cordova 6.1.1, Android 5.1.1, ios 4.1.1
  • Я не использую никаких специальных плагинов для отображения заставки - просто элементы <splash> в мой файл config.xml .
  • Это происходит как в iOS, так и в Android, как на локальных сборках, так и с использованием PhoneGap Build (т.е. отладка и выпуск).
  • Нет никаких исключений о пропущенных ресурсах в консоли, как в iOS (с использованием инструментов разработчика Safari), так и в Android (с использованием инструментов разработки Chrome).
  • Я сделал diff с моей последней известной рабочей сборкой , и на самом деле ничего не появляется. Я видел неопределенную ссылку на Underscore, но я поддержал это изменение, и оно ничего не решило - я думаю, что я все равно увижу исключение в консоли.

Cordova/PhoneGap сделал что-то недавно, что может быть причиной этого? Любые идеи о том, как изолировать этот? Я действительно в тупике.

24
eb1

Ну, это было некрасиво. Оказалось, что было было сгенерировано исключение, его просто слишком рано вызывали инструменты разработки для браузера (Safari, Chrome для iOS и Android соответственно). Исключение действительно появлялось, когда я запускал вещи через цель браузера (cordova platform add browser и т.д.), Так что эта платформа браузера полезна для чего-то, что я предполагаю. :-)

В моем случае плагин cordova-sqlite-storage произвел критическое изменение API, которое нарушало код, когда я обновлял все. Решением было прикрепить плагин к более ранней версии в файле config.xml.

Итак, извлеченные уроки:

  • Если вы подозреваете, что во время запуска возникает исключение, вы можете использовать платформу браузера, чтобы отследить его.
  • Прикрепите ваши плагины к определенной версии, используя параметр spec в config.xml. Это избавит вас от сердечной боли в будущем.
  • [еще одна опция из @jcesarmobile, ниже] при нажатии на кнопку «Обновить» в инструментах разработчика браузера также исключает исключение. Ницца! 

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

21
eb1

Мне удалось запустить ваше приложение, вот шаги, которые я выполнил.

1) Сначала вам нужно объявить настройки экрана-заставки вместе с местоположением плагина-заставки в вашем 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, что вы уже сделали.

Я предлагаю вам хранить изображения в папках плотности по умолчанию проекта Android (ldpi, mdpi, hdpi, xhdpi и т.д.) Вместо папки screen/Android, поскольку это упростит структуру вашего проекта.

    <!-- 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) Добавьте класс плагина Splash Screen в структуру вашего проекта Android в org.Apache.cordova.splashscreen пакете или установите плагин Cordova для заставки 

https://cordova.Apache.org/docs/en/3.1.0/cordova/splashscreen/splashscreen.html

4) Последний и самый важный шаг - у вас должен быть файл cordova.js в папке www

 Cordova.js in assets

И после этого я смог запустить ваше веб-приложение

 enter image description here

Я разработчик Android. Думаю, что-то похожее, что вам может понадобиться для iOS

6
Hitesh Sahu

У меня была похожая проблема при использовании cordova с ember.js. Это было о стратегии изменения URL моего приложения. 

Посмотрите на этот ответ , возможно, это связано с вашей проблемой.

2
ykaragol

Вам следует установить плагин splash-screen для iOS и Android, чтобы он работал правильно, если вы добавляете заставку в config.xml. или же без плагина splash-screen, вы можете создать заставку с HTML, разделить ваше тело на 2 части: контент и логин. Затем вы устанавливаете отображение стиля контента: нет. Когда приложение завершит загрузку, вы просто устанавливаете отображение экрана загрузки: нет и отображение содержимого экрана: блокировать или все, что вы хотите

И вы пропустили ниже предпочтения в вашем config.xml

<preference name="SplashScreenDelay" value="3000" />
<preference name="SplashMaintainAspectRatio" value="true|false" />
<preference name="SplashShowOnlyFirstTime" value="true|false" />
2
NGB

Попробуйте добавить это предпочтение в ваш config.xml, возможно, это проблема

<preference name="AutoHideSplashScreen" value="true"/>
2
Del

Единственное исправление, которое сработало для меня, было найдено здесь: http://www.codingandclimbing.co.uk/blog/ionic-2-fix-splash-screen-white-screen-issue-14

в основном отредактируйте ваш файл config.xml. Настройка заставки должна выглядеть следующим образом:

<preference name="ShowSplashScreen" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="30000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
<feature name="SplashScreen">
    <param name="Android-package" value="org.Apache.cordova.splashscreen.SplashScreen"/>
</feature>
1
Gio

Отсутствующий тег <meta http-equiv="Content-Security-Policy"> на head вызвал белый экран в моем случае.

1
Yuval A.

Моя проблема была с ES6, он отлично работает на iPhone и Android 6, но не работает с Android 4 и 5.

0
Fabio Campinho

У меня такая ситуация и решила ее.

В моем случае это было что-то похожее на этот код:

$scope.images.Push({ id: i, src: "http://placehold.it/50x50" , pstb, trno});

Приведенный выше код хорошо работает на Android 7.0, но только белый экран после заставки на Android 4.4.4

Изменено на это:

$scope.images.Push({ id: i, src: "http://placehold.it/50x50", pstb: pstb, trno: trno});

Запустить на всех устройствах (по крайней мере, на всех моих устройствах)

0
Albert

Я добавил эти строки в config.xml

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

У меня также есть черный экран, когда я задаю задержку экрана как 3000. поэтому я изменил на 6000. Я думаю, что Cordova потребуется некоторое время для загрузки файлов js, css и изображений.

0
Vijay

В моем случае я случайно прокомментировал определение состояния в app.js.

0
Priyank

1 >> Если вы подозреваете, что во время запуска выдается исключение, вы можете использовать платформу браузера, чтобы отследить его . 2 >> Закрепите ваши плагины в определенной версии, используя параметр spec в config.xml. Это избавит вас от сердечной боли в будущем.

0
Idrish Multani

В моем случае я поставил ALERT до того, как первый экран все еще установлен.

0
Luiz Leite