Cordova - 启动后出现白屏，控制台中没有异常

Posted 2023-05-06

【中文标题】Cordova - 启动后出现白屏，控制台中没有异常

【英文标题】：Cordova - white screen after splash, no exceptions in console

【发布时间】：2016-08-01 22:30:49

【问题描述】：

我已经离开我的 Cordova 应用程序一段时间了，但昨天刚刚做了一个新的克隆，并注意到它出现了“白屏死机”症状 - 启动屏幕显示，程序加载......并且然后我只是得到一个空白屏幕。更多细节：

CLI：Cordova 6.1.1、android 5.1.1、ios 4.1.1 我没有使用任何特殊的插件来显示启动画面 -- 只是 my config.xml file 中的 <splash> 元素。 这在 iOS 和 Android 中都会发生，无论是在本地构建还是使用 PhoneGap Build（即调试和发布）。 无论是在 iOS（使用 Safari 的开发工具）还是在 Android（使用 Chrome 的开发工具）中，控制台中的资源缺失都不例外。 我已经完成了diff with my last known working build，但实际上并没有弹出任何内容。我看到了一个未定义的下划线引用，但我支持该更改并且它没有解决任何问题 - 我想我会在控制台中看到异常，无论如何。

Cordova / PhoneGap 最近是否做过可能导致此问题的事情？关于如何隔离这个的任何想法？我真的很难过。

【问题讨论】：

如果两者都失败了，你的代码可能有问题

您在构建或更新项目时是否遇到任何错误？您是否尝试删除平台并再次添加？当我添加 iOS 平台并在 Cordova 6.1.1 和 iOS 4.1.1 版本中运行时，您的项目对我来说正常运行

@Pyro：谢谢，昨晚我设法找到了问题——SQLite 插件中的一个破坏性 API 更改引发了异常。不幸的是，它没有出现在 Chrome / Safari 开发工具中，但确实出现在浏览器目标中。去图吧。

好的，那太好了，而且，你的代码质量保持了很高的水平，我可以从中学到一些东西

【参考方案1】：

那太丑了。事实证明， 抛出了一个异常，只是被抛出太早，浏览器开发工具（Safari、Chrome for iOS 和 Android）无法识别它。当我通过浏览器目标（cordova platform add browser 等）运行事物时，确实出现了异常，因此该浏览器平台对我猜的某些事情很有用。 :-)

在我的例子中，cordova-sqlite-storage 插件做了一个破坏性的 API 更改，当我更新所有内容时破坏了代码。解决方案是将插件固定到 config.xml 文件中的早期版本。

所以，经验教训：

如果您怀疑在启动过程中抛出了异常，您可以使用浏览器平台进行追踪。 使用 config.xml 中的 spec 参数将插件固定到特定版本。这将为您将来省去一些心痛。 [@jcesarmobile 的另一个选项，下面] 在浏览器开发工具中点击刷新也将退出异常。好的！

我将返回到 config.xml 并固定其他项目——并按照上面的建议进行一些清理。再次感谢大家。

【讨论】：

在这种情况下，Cordova 的“控制台插件”可能很有用，至于 iOS，如果项目从 Xcode 运行，它会在 Xcode 控制台中显示日志，这可能有助于检测此类问题链接：github.com/apache/cordova-plugin-console

Safari 远程网络检查器有一个重新加载按钮，可以捕捉到这种错误

【参考方案2】：

我设法运行您的应用程序，这是我遵循的步骤。

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) 在org.apache.cordova.splashscreen包下添加Splash screen plugin class到你的android项目结构或安装splash screen Cordova插件

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

4) 最后也是最重要的一步，您的 www 文件夹中必须有 cordova.js

之后我就可以运行你的网络应用了

我是安卓开发者，我猜你可能需要为 iOS 做类似的事情

【参考方案3】：

在这里找到了唯一对我有用的修复： 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>

【参考方案4】：

在将 cordova 与 ember.js 一起使用时，我遇到了类似的问题。这是关于我的应用程序的 url 更改策略。

看看this answer，可能和你的问题有关。

【参考方案5】：

尝试将此首选项添加到您的 config.xml 中，也许这就是问题所在

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

【参考方案6】：

如果您在config.xml 中添加启动画面，您应该为iOS 和Android 安装splash-screen 插件才能正常工作。或者如果没有splash-screen 插件，您可以尝试使用 HTML 制作启动画面，将您的正文分为两部分：内容和登录。然后设置内容样式显示：无。当应用程序完成加载后，您只需设置加载屏幕显示：无和内容屏幕显示：块或任何您想要的

而您在config.xml 中缺少以下首选项

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

【讨论】：

不需要安装Splash Screen 插件，否则我们也可以显示启动画面供您参考。

你能告诉我如果没有 Splash-screen 插件我们可以怎么做，这将非常有帮助。 @jaydroider

【参考方案7】：

head 上缺少的<meta http-equiv="Content-Security-Policy"> 标记在我的情况下导致白屏。

【讨论】：

Yuval A. 添加这个可以解决您的问题的原因是什么？

@mediaguru 如果没有它，它可能会阻止一些资源...（我没有给出完整的 Content-Security-Policy 标签的示例）

好的，谢谢。我目前在我的 index.html 中注释掉了该行。也许我会取消注释，看看会发生什么。我的问题略有不同。启动屏幕屏幕变为空白后。如果我旋转设备，会出现视图但没有界面项工作。旋转回来，所有功能都正常工作。

【参考方案8】：

在我的情况下，我在第一个屏幕仍然安装之前放置了一个 ALERT。

【参考方案9】：

我在 config.xml 中添加了这些行

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

当我将screendelay设置为3000时，我也有黑屏。所以我改为6000。我认为cordova需要一些时间来加载你的js，css和图像文件。

【参考方案10】：

就我而言，我不小心在 app.js 中注释了状态定义。

【参考方案11】：

我的问题是 ES6，它可以在 iPhone 和 Android 6 上完美运行，但不适用于 Android 4 和 5。

【参考方案12】：

我有这种情况并解决了。

就我而言，它类似于以下代码：

$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);

在所有设备上运行（至少在我的所有设备上）

【参考方案13】：

不是真正的答案，但我会将其添加到此处的潜在实验列表中 - 我从未弄清楚这是如何发生的，但通过删除整个 platforms 文件夹和 node_modules 解决了它，然后重新- 添加平台。

【参考方案14】：

1>> 如果您怀疑在启动过程中抛出了异常，您可以使用浏览器平台进行跟踪。 2>>使用 config.xml 中的 spec 参数将插件固定到特定版本。这将为您将来省去一些心痛。