离子应用程序 - Cordova 构建 - 英特尔 XDK - 启动后显示白屏

Question

我在解决 ionic 移动应用程序中的白屏时遇到问题。

我按照以下步骤操作：

1. 离子启动
2. 项目名称：测试
3. 框架：角度
4. 启动模板：会议 |一个厨房水槽应用程序，展示了 Ionic 所提供的所有功能
5. Ionic Serve : 执行成功，应用在浏览器中成功
6. 构建 cordova 应用程序以创建 www 文件夹： 离子科尔多瓦准备android 离子构建科尔多瓦
7. 这将创建 www 文件夹
8. 然后我正在使用 Intel XDK 工具：创建包
9. 然后我使用https://build.phonegap.com/ 创建.apk
10. .apk创建成功
11. 一旦我在 android 手机中安装了应用程序：应用程序正在打开并成功显示启动画面 12：但问题是在启动画面之后，我看到白屏，之后什么都没有发生
12. 我的 config.xml 有以下信息：
13. 如果在 ionic 2 中使用相同的配置文件，它工作正常。 请帮忙。

Config.XML 消息如下：

<?xml version="1.0" encoding="UTF-8" ?>

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android" android-versionCode="1" version="0.0.1" id="com.test.game"  >

<!-- This file was generated by the Intel XDK Cordova Package Build tool. -->

<name>Game</name>

<description>Play game in your mobile phone</description>

<author></author>

<content src="index.html"/>

<preference name="android-build-tool" value="gradle" />

<platform name="android" >

    <access origin="*"/>

</platform>

<preference name="StatusBarBackgroundColor" value="#fa8039" />

<preference name="StatusBarStyle" value="lightcontent" />

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

<preference name="xwalkMultipleApk" value="false" />

<plugin name="cordova-plugin-device" spec="1.1.2"/>

<plugin name="es6-promise-plugin" spec="4.2.2"/>

<plugin name="cordova-admob-sdk" spec="0.20.2"/>

<plugin name="cordova-connectivity-monitor" spec="1.2.2"/>

<plugin name="cordova-google-play-services" spec="25.0.0"/>

<plugin name="cordova-libgoogleadmobads" spec="https://github.com/appfeel/google-iosadmobads#master"/> <!-- If available via Cordova registry; consider changing to an NPM reference. -->

<plugin name="phonegap-admob" spec="4.2.1"/>

<plugin name="cordova-plugin-x-socialsharing" spec="5.0.12"/>

<plugin name="cordova-plugin-inappbrowser" spec="1.4.0"/>

<plugin name="cordova-plugin-market" spec="1.2.0"/>

<plugin name="cordova-plugin-whitelist" spec="1.2.2"/>

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

<preference  name="UIwebviewbounce" value="false"/>

<preference  name="webviewbounce" value="false"/>

<platform name="android" >

    <preference name="android-minSdkVersion" value="16"/>

    <preference name="android-targetSdkVersion" value="29"/>

    <preference name="android-installLocation" value="auto"/>

    <preference name="android-signed" value="true"/>

    <preference name="Orientation" value="default"/>

    <preference name="AndroidLaunchMode" value="singleTop"/>

    <preference name="Fullscreen" value="false"/>

</platform>

<preference name="SplashScreenDelay" value="10000" />

<splash platform="android" src="package-assets/3204261.png" density="ldpi" width="320" height="426" orientation="portrait"/>

<splash platform="android" src="package-assets/3204701.png" density="mdpi" width="320" height="470" orientation="portrait"/>

<splash platform="android" src="package-assets/4806401.png" density="hdpi" width="480" height="640" orientation="portrait"/>

<splash platform="android" src="package-assets/7209601.png" density="xhdpi" width="720" height="960" orientation="portrait"/>

<icon platform="android" src="package-assets/36AS.png" density="ldpi" width="36" height="36"/>

<icon platform="android" src="package-assets/48AS.png" density="mdpi" width="48" height="48"/>

<icon platform="android" src="package-assets/72AS.png" density="hdpi" width="72" height="72"/>

<icon platform="android" src="package-assets/96AS.png" density="xhdpi" width="96" height="96"/>

<config-file platform="android" parent="/manifest/application" mode="merge"> 

    <activity android:launchMode="singleTop" />

</config-file>

</widget>

下面是 chrome->console 错误。我无法解决此警告。 Chrome->Console

以下是运行命令后我现在遇到的错误： 离子科尔多瓦平台添加浏览器 ionic cordova 运行浏览器

chrome->console

Answer 1

第 1 步：在 config.xml 中，验证您现有的信息并仅提供以下信息：

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="FadeSplashScreenDuration" value="1000" />
<preference name="SplashScreenDelay" value="30000" />
<preference name="ShowSplashScreenSpinner" value="true" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="ShowSplashScreen" value="true" />

第 2 步：在 app.component.ts 中，更新以下内容：

initializeApp() {
    this.platform.ready().then(() => {
      setTimeout(() => {
        this.splashScreen.hide();
      }, 1000);

    });
  }

这应该可以解决问题。 Splash 将保持活动状态，并且微调器也将保持活动状态，直到显示主页。启动后不会出现白屏。

Answer 2

您可以从 android studio 底栏 run、logcat、build 等调试它。

另一方面，您可以从谷歌浏览器调试它，只需输入：chrome://inspect 您可以看到以下内容：
（如果您的应用在 android studio 模拟器或连接的手机中运行）

您应该点击检查，然后会看到如下内容：

在控制台选项卡上，您可以检查导致白屏错误的原因。