Cordova - 啟動后出現白屏，控制台中沒有異常

Question

我已經離開我的 Cordova 應用程序一段時間了，但昨天剛剛做了一個新的克隆，注意到它有“白屏死機”症狀——啟動畫面顯示，程序加載......然后我只是得到一個空白屏幕。 更多細節：

• 命令行界面：Cordova 6.1.1、安卓 5.1.1、ios 4.1.1
• 我沒有使用任何特殊插件來顯示啟動畫面——只是我的 config.xml 文件中的<splash>元素。
• 這發生在 iOS 和 Android 中，無論是在本地構建還是使用 PhoneGap Build（即調試和發布）。
• 無論是在 iOS（使用 Safari 的開發工具）還是 Android（使用 Chrome 的開發工具）中，控制台中都沒有缺少資源的例外。
• 我已經對我最后一個已知的工作構建做了一個差異，實際上沒有任何彈出。 我看到了一個未定義的 Underscore 引用，但我支持該更改並且它沒有解決任何問題——我想無論如何我都會在控制台中看到異常。

Cordova / PhoneGap 最近是否做了一些可能導致這種情況的事情？ 關於如何隔離這個的任何想法？ 我真的很難過。

Answer 1

那是丑陋的。 原來，有被拋出一個例外，它只是被過早地拋出了瀏覽器的開發者工具把它撿起來（Safari瀏覽器，iOS版Chrome和Android，分別）。 當我通過瀏覽器目標（ cordova platform add browser等）運行時確實出現了異常，因此瀏覽器平台對我猜想的東西很有用。 :-)

在我的例子中，cordova-sqlite-storage 插件做了一個破壞性的 API 更改，當我更新所有內容時破壞了代碼。 解決方案是將插件固定到 config.xml 文件中的早期版本。

所以，吸取了教訓：

• 如果您懷疑啟動過程中拋出了異常，您可以使用瀏覽器平台進行跟蹤。
• 使用 config.xml 中的spec參數將您的插件固定到特定版本。 這將在未來為您節省一些心痛。
• [下面來自@jcesarmobile 的另一個選項] 在瀏覽器開發工具中點擊刷新也將排除異常。 不錯！

我將返回到 config.xml 並固定其他項目 - 並按照上面的建議進行一些清理。 再次感謝大家。

Answer 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) 將Splash screen 插件類添加到org.apache.cordova.splashscreen包下的 android 項目結構中或安裝Splash screen Cordova 插件

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

4）最后也是最重要的一步，你的www文件夾中必須有cordova.js

之后我就可以運行你的網絡應用了

我是 android 開發人員，我想你可能需要為 iOS 做一些類似的事情

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

Answer 4

我在使用帶有 ember.js 的cordova 時遇到了類似的問題。 這是關於我的應用程序的 url 更改策略。

看看這個答案，它可能與你的問題有關。

Answer 5

如果要在config.xml中添加 splash，則應為 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" />

Answer 6

嘗試將此首選項添加到您的 config.xml，也許這就是問題所在

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

Answer 7

在我的情況下， head缺少<meta http-equiv="Content-Security-Policy">標簽導致白屏。

Answer 8

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

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

當我將 screendelay 設置為 3000 時，我也有黑屏。所以我更改為 6000。我認為cordova 需要一些時間來加載您的 js、css 和圖像文件。

Answer 9

就我而言，我在第一個屏幕仍然安裝之前放置了一個警報。

Answer 10

就我而言，我不小心在 app.js 中注釋了狀態定義。

Answer 11

我的問題是 ES6，它可以在 iPhone 和 Android 6 上完美運行，但不適用於 Android 4 和 5。

Answer 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});

在所有設備上運行（至少是我的所有設備）

Answer 13

不是真正的答案，但我會將它添加到此處的潛在實驗列表中 - 我從未弄清楚這是如何發生的，但通過刪除整個platforms文件夾和node_modules ，然后重新添加平台解決了這個問題。

Answer 14

1>>如果您懷疑啟動時拋出異常，您可以使用瀏覽器平台進行跟蹤。 2>>使用 config.xml 中的 spec 參數將您的插件固定到特定版本。 這將在未來為您節省一些心痛。