web-dev-qa-db-ja.com

PhoneGap Build iOSアプリには、スプラッシュ画面の後に空白の白い画面があります

PhoneGap Build 3.0を使用しています。スプラッシュスクリーンの後に表示される空白の白い画面を削除しようとしています。

調査を行った結果、PhoneGap Buildではなく、PhoneGapとCordovaへの参照のみが見つかりました。私が試したものはどれもうまくいきませんでした-主に、自動スプラッシュ画面の非表示を無効にし、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向けではないためだと思いますが、これを修正する方法は他にありません。

javascriptiosphonegap-build
21
Daniel Miller

これにあなたの痛みを完全に感じてください。 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で手動で非表示にします。

JavaScriptコードnavigator.splashscreen.hide();を機能させるには、config.xmlにプラグイン参照を追加する必要があります。

また、私のプロジェクト（Kendo UI Mobileを使用）では、onDeviceReady内でsetTimeout遅延が必要ないことがわかりました。 config.xml内で正しいパラメーターを取得すると、アプリでも同じパラメーターが表示されると思います。

私のonDeviceReadyは次のようになります。

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

IOS 6でテスト済み。Android 4.1 PhoneGap Build 3.1を使用して。

41
Bart

同様の問題があり、私の場合はスプラッシュ画面ではなかったことを付け加えます。

PhoneGapビルドとGitを使用する私の場合、アプリにjavascriptファイルを追加しましたが、新しいファイルをgitリポジトリに含めてプッシュすることに失敗しました。これにより、アプリがローカルで動作するようになりましたが、ビルドサーバーが最新のコードをプルすると、PhoneGapビルドに白い画面が表示されました。

PhoneGapは初期化されましたが、Kendo UIは参照されていないjsクラスが見つからなかったため失敗しました。それはPhoneGapのnoobの間違いでしたが、同様の問題がありスプラッシュ画面の修正が機能しない人を助けるためだけに共有したいと思います。 モバイルUIフレームワークがロードされる前にjavascriptエラーが発生した可能性があります。

8
Jim Harkins

アプリにホワイトリストプラグインを使用していた場合、phonegapビルドを使用するには、config.xmlを次のように変更する必要があります。

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

これは、config.xmlのcli仕様でした。

<preference name="phonegap-version" value="cli-5.2.0" />
1
KrIsHnA

Configsとhtmlで背景色を設定してみてください。例青：

<preference name="SplashMaintainAspectRatio" value="false" />
<preference name="SplashScreenDelay" value="1" />
<preference name="backgroundColor" value="0xff0000ff" />

およびhtmlタグ

<html style="background-color:#0000ff;>
1
Miguel

私はiOSでのみ同様の問題を抱えていましたが、私の場合はindex.htmlでスタイルを実装した方法に関連していました。私の場合、さまざまなブランドにスタイリングを提供する必要があり、それは$ scope変数に依存していました。 @ import inside bodyを使用しましたが、明らかにiOSに問題があります。 CSSリンクをheadに戻すことで解決しました。 $ rootScopeおよびng-ifを使用して、ブランド名に基づいて正しいスタイルをトリガーしました。どういうわけか@ importが原因で、スプラッシュ画面の後に空白の白い画面が表示されました...同じ問題を抱えている人の助けになることを願っています。

0
CodeGems

「スプラッシュスクリーンの後に空白の白い画面」という同じ問題があります。何らかの理由で、エミュレータ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ではテストされていません）。 ここで参照＃1！

また、これはcordova-plugin-splashscreenのドキュメントです。 （「iOS Quirk：」を検索してください）。 ここで参照＃2！

0
Jzapata

これが手順です

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）最後に this class をAndroidプロジェクト構造org.Apache.cordova.splashscreenパッケージの下に追加します

または

cordovaプラグインとしてインストールします。

0
Hitesh Sahu