Phonegap 3启动画面后出现白屏问题

Question

Phonegap 3启动画面后出现白屏问题

7

我知道这个问题已经被问过（并且回答）多次 (Phonegap在启动画面后显示白屏 - IOS, Phonegap 2.0 - 应用启动前会闪烁白屏, 如何消除Phonegap iOS应用程序启动时的白色闪烁启动画面？)，但是这些解决方案似乎都不能解决我的问题。也许是因为我使用的是Phonegap 3版本？

我只加载了Phonegap和jQuery 2.0.0（其他解决方案涉及我没有使用的jQuery Mobile），我只针对iOS进行部署。我已经加载了一个启动图片，然后应用程序显示一个白屏（持续时间不定 - 我猜它正在加载应用程序？），然后我的index.html加载我的第一个屏幕。这是我的当前头部：

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

    <link type="text/css" rel="stylesheet" href="css/main.css" />

    <title>My App</title>

    <script type="text/javascript" src="phonegap.js"></script>
    <script src="js/lib/jquery-2.0.0.min.js"></script>
    <script src="js/main.js"></script>      
</head>

我尝试将以下内容添加到我的config.xml文件中（与index.html在同一级别的文件夹中）：

<preference name="backgroundColor" value="0x000000" />

但我仍然看到白屏闪烁。我还尝试了手动隐藏/显示启动画面：

function onDeviceReady() {
    navigator.splashscreen.show();
}

但似乎这并没有任何影响。有人有什么建议吗？

- Brian Flanagan

1

+1 我也遇到了同样的问题。你有取得任何进展吗？ - zk_mars

1

@FlyingLemon：我通过试错调试成功解决了这个问题。我的步骤如下所示。 - Brian Flanagan

5个回答

4

我在插件或PhoneGap方面遇到了问题，因此...

function onDeviceReady() {
    navigator.splashscreen.show();
}

对我不起作用。

我通过将webview的alpha设置为0直到加载完成来修复它：

3个步骤：

在文件"CDVViewController.m"中的方法"-(void)createGapView"中，我添加了：
self.webView.alpha=0;
在文件"MainViewController.m"中的方法"-(void)WebViewDidFinishLoad:(UIWebView*)theWebView"中，我添加了：theVebView.alpha=1;
在文件"MainController.xib"中，我将背景改为黑色（可以设置为任何您喜欢的颜色）。

现在，我不再看到白屏闪烁，而是黑屏闪烁，直到内容完全加载完成。虽然不完美，但已经足够好了。

希望这有所帮助。

- NBApps

1

尝试在config.xml中的SplashScreen功能中添加<param name="onload" value="true" />

- Hammer

0

在与闪屏插件发生冲突后，我找到了以下解决方案：

在MainViewController.xib中添加一个UIImageView（imgView）。
将您的闪屏图像放入其中，并设置比例为填充。
在MainViewController.m中，覆盖-（void）webViewDidFinishLoad：（UIWebView *）theWebView
在[super webViewDidFinishLoad：theWebView];之后添加以下代码：

[self.view sendSubviewToBack：imgView];

imgView.hidden = YES;

- BillChan

0

这对我在使用build.phonegap.com时有效。

步骤1：将Splashcreen插件添加到您的config.xml中。

<gap:plugin name="org.apache.cordova.splashscreen" version="0.2.7" />

步骤2：将此首选项更新到您的config.xml中。

<preference name="auto-hide-splash-screen" value="false" />

步骤三：将插件函数调用添加到“deviceready”事件中

<script>
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
   navigator.splashscreen.hide()
  }
</script>

- Nick Treadway

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Flanagan · Accepted Answer

我终于成功消除了闪屏，但必须使用Cordova来实现。以下是我采取的步骤：

在终端中执行以下命令：

cordova create ~/path/to/project “com.appname.app” “appName”
cd ~/path/to/project
cordova platform add ios
cordova build
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
cordova build

使用 Finder 导航到 ~/path/to/project/platforms/ios/，双击 projectname.xcodeproj 以在 Xcode 中打开项目。

接下来，我编辑了图像。您可以用任何方法完成，以下是我的做法：在 Xcode 中，导航到 Resources/splash/，右键单击要更改的图像，选择 Show in Finder 并使用任何工具来更改图像。

完成后返回 Xcode 并打开根级别的 config.xml （仍然不确定为什么有两个 config.xml 文件，但您需要位于文件夹结构最外层的那一个）。更新 AutoHideSplashScreen 属性为

<preference name="AutoHideSplashScreen" value="false" />。

从 Xcode 主菜单中，选择 Product > Clean，然后选择 Product > Build。

重复地对我有效，之后我就能够使用应用程序中的 navigator.splashscreen.show() 和 navigator.splashscreen.hide() 方法（没有通过所有这些步骤似乎不能响应）。

希望这能帮助到您！