2017-03-05 71 views
0

我一直在試圖給我的ionic2 sidemenu項目添加一個自定義初始屏幕。但是,當我在命令提示符下運行命令「ionic serve -l」時,我看到了我的應用程序的主頁本地主機而不是閃屏。 程序I,接着類似於這裏所描述的一個:https://www.youtube.com/watch?v=x04rztL2eIsionic2 splashscreen不可見

  1. 首先我刪除在資源文件夾的默認離子圖標和splash.png圖像與所述機器人和IOS文件夾內的文件夾濺沿。
  2. 然後我已將指定尺寸的.png圖像添加到資源文件夾。
  3. 然後,我運行了命令「離子資源android - splash」和「離子資源ios - splash」,它們分別與圖像自動創建ios和android文件夾中的splash文件夾。
  4. 我已經設置了函數「Splashscreen.show();」在app.component.ts 我甚至在config.xml文件中將默認值設置爲3000。

在做完所有這些之後,我在命令提示符下運行了命令「ionic serve -l」,但它仍然顯示了我的sidemenu應用程序的主頁而不是啓動畫面。

app.component.ts file 
    import { Component, ViewChild } from '@angular/core'; 
import { Nav, Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 

import { Page1 } from '../pages/page1/page1'; 
import { Page2 } from '../pages/page2/page2'; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    @ViewChild(Nav) nav: Nav; 

    rootPage: any = Page1; 

    pages: Array<{title: string, component: any}>; 

    constructor(public platform: Platform) { 
    this.initializeApp(); 

    // used for an example of ngFor and navigation 
    this.pages = [ 
     { title: 'Page One', component: Page1 }, 
     { title: 'Page Two', component: Page2 } 
    ]; 

    } 

    initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.show(); 
    }); 
    } 

    openPage(page) { 
    // Reset the content nav to have just this page 
    // we wouldn't want the back button to show in this scenario 
    this.nav.setRoot(page.component); 
    } 
} 

config.xml file 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 
    <name>V2 Test</name> 
    <description>An awesome Ionic/Cordova app.</description> 
    <author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author> 
    <content src="index.html"/> 
    <access origin="*"/> 
    <allow-navigation href="http://ionic.local/*"/> 
    <allow-intent href="http://*/*"/> 
    <allow-intent href="https://*/*"/> 
    <allow-intent href="tel:*"/> 
    <allow-intent href="sms:*"/> 
    <allow-intent href="mailto:*"/> 
    <allow-intent href="geo:*"/> 
    <platform name="android"> 
    <allow-intent href="market:*"/> 
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/> 
    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/> 
    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/> 
    </platform> 
    <platform name="ios"> 
    <allow-intent href="itms:*"/> 
    <allow-intent href="itms-apps:*"/> 
    <splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/> 
    </platform> 
    <preference name="webviewbounce" value="false"/> 
    <preference name="UIWebViewBounce" value="false"/> 
    <preference name="DisallowOverscroll" value="true"/> 
    <preference name="android-minSdkVersion" value="16"/> 
    <preference name="BackupWebStorage" value="none"/> 
    <preference name="SplashMaintainAspectRatio" value="true"/> 
    <preference name="FadeSplashScreenDuration" value="3000"/> 
    <preference name="SplashShowOnlyFirstTime" value="false"/> 
    <preference name="SplashScreen" value="screen"/> 
    <preference name="SplashScreenDelay" value="3000"/> 
    <feature name="StatusBar"> 
    <param name="ios-package" onload="true" value="CDVStatusBar"/> 
    </feature> 
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/> 
    <plugin name="cordova-plugin-whitelist" spec="1.3.1"/> 
    <plugin name="cordova-plugin-console" spec="1.0.5"/> 
    <plugin name="cordova-plugin-statusbar" spec="2.2.1"/> 
    <plugin name="cordova-plugin-device" spec="1.1.4"/> 
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/> 
</widget> 

我讀過,我們需要觀察它真正需要的閃screen.Is Android仿真器和iOS模擬器在互聯網上?

請幫助我如何顯示自定義的splashscreen。

回答

1

我在網上看過我們需要一個android模擬器和ios 模擬器來查看啓動畫面。它真的需要嗎?

是的。您需要在模擬器或實際設備中運行splashscreen。

因爲它實際上是一個通過Ionic Native導入的cordova插件。 鏈接here。 科爾多瓦插件通常在ionic serve中被禁用,因爲它們專門用於使用移動設備的功能。 您似乎已經遵循了所有步驟。在模擬器中運行並檢查。

根據this link在Github上, 濺射屏幕設置是否放置在你的config.xml 自動顯示。您必須致電Splashscreen.hide()。所以

initializeApp() { 
    this.platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 
+0

感謝much.It的工作,但我有一個新的問題now.The啓動畫面出現所需的時間,但後來主屏幕出現只是一秒鐘,它再次回來到具有「加載啓動畫面圈「,它永遠不會回到主屏幕。 –

+0

更新回答.. –

+0

這是工作。謝謝很多。 :) –