PhoneGap Build iOS 应用程序在启动画面后出现空白屏幕答案

【问题标题】：PhoneGap Build iOS app has blank white screen after splash screenPhoneGap Build iOS 应用程序在启动画面后出现空白屏幕
【发布时间】：2013-12-18 19:56:48
【问题描述】：

我正在使用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 Build，但我不确定如何解决此问题。

【问题讨论】：

标签： javascript ios phonegap-build

【解决方案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 参数，所以我们只是给它一个很长的延迟。我们会在这 10 秒之前用 JS 手动隐藏它。

需要在 config.xml 中添加插件引用才能使 javascript 代码 navigator.splashscreen.hide(); 工作。

另外，我发现我的项目（使用 Kendo UI Mobile）在 onDeviceReady 内不需要 setTimeout 延迟。我猜，一旦您在 config.xml 中获得正确的参数，您将在您的应用中看到相同的参数。

我的onDeviceReady 看起来像这样：

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

使用 PhoneGap Build 3.1 在 iOS 6 和 Android 4.1 上测试。

【讨论】：

这就是答案。我错过了 config.xml 中的
我也没有意识到这一点。我不得不把我的头撞到墙上几十次才露出来。
@Bart 我无法在我的项目中使用它。在 config.xml 上已经有相同的设置，我什至尝试强制显示启动画面（在 deviceready 事件上的 navigator.splashscreen.show()），但它仍然显示愚蠢的白屏:(
@Bart btw 我注意到这只发生在 iPhone 3.5" 上，它在 4" 上运行良好.. dafuq
作为旁注，刚刚在 android 4.4 设备上尝试并测试了这个，如果你只是为 android 开发你不需要插件链接或代码，没有自动隐藏功能，因为 @ 987654326@自动隐藏启动画面。

【解决方案2】：

我想补充一点，我遇到了类似的问题，在我的情况下不是启动画面。

在我使用 PhoneGap 构建和 Git 的情况下，我向我的应用程序添加了一个 javascript 文件，但未能包含新文件并将其推送到我的 git 存储库。这导致我的应用程序在本地运行，但是当构建服务器提取最新代码时，它在 PhoneGap 构建中显示白屏。

PhoneGap 已初始化，但 Kendo UI 不喜欢缺少的引用的 js 类并失败。这是一个PhoneGap noob 错误，但我想分享一下，以防它帮助遇到类似问题的人，并且启动屏幕修复不起作用。 这可能是在您的移动 ui 框架加载之前发生的 javascript 错误。

【讨论】：

谢谢！此评论帮助我了解我的错误可能在 javascript 中，而不是在 xml 或 ios 代码中！非常感谢！
这也帮助我调试它。我的问题是我使用 Ratchet 库作为 UI 的基础，它会自动设置 body 和 .content css 样式，并且 bg 颜色恰好是白色。当我将其更改为黑色时，问题就消失了。

【解决方案3】：

如果您为您的应用使用白名单插件，您可能需要在 config.xml 中进行如下更改才能使用 phonegap 构建。

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

这是我的 config.xml 中的 cli 规范。

<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) 在 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) 最后在 org.apache.cordova.splashscreen 包

下将this class 添加到你的android项目结构中

或

将其安装为 Cordova 插件。

【讨论】：

【解决方案6】：

我只在 iOS 上遇到过类似的问题，就我而言，这与我在 index.html 上实现样式的方式有关。就我而言，我必须为不同品牌提供样式，这取决于 $scope 变量。我在 body 中使用了 @import，显然 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 中测试）。 Reference #1 here!

这也是cordova-plugin-splashscreen 的文档。（搜索“iOS 怪癖：”）。 Reference #2 here!

【讨论】：