Question

我一直在尝试为我的ionic2 sidemenu项目添加自定义启动画面。但是当我运行命令＆＃34; ionic serve -l＆＃34;在命令提示符下，我在本地主机中看到了我的应用程序的主页，而不是启动画面。我遵循的程序类似于此处描述的程序：https://www.youtube.com/watch?v=x04rztL2eIs

首先，我删除了资源文件夹中的默认离子图标和splash.png图像以及android和ios文件夹中的splash文件夹。
然后我将我选择的具有指定尺寸的.png图片添加到资源文件夹。
然后我运行命令＆＃34;离子资源android --splash＆＃34;和＆＃34;离子资源ios --splash＆＃34;它分别使用图像自动在ios和android文件夹中创建了splash文件夹。
我已经设置了功能＆＃34; Splashscreen.show（）;＆＃34;在app.component.ts中我甚至在config.xml文件中将默认值设置为3000。

完成所有这些后，我运行了命令＆＃34; ionic serve -l＆＃34;在我的命令提示符下。但它仍然显示我的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="hi@ionicframework" 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>

我在网上看到我们需要一个Android模拟器和ios模拟器来查看启动画面。这真的需要它吗？

请帮助我了解如何显示自定义闪屏。

Answer 1

我在网上看到我们需要一个Android模拟器和ios 用于查看启动画面的模拟器。它真的需要吗？

是。您需要在启动画面的模拟器或实际设备中运行。

因为它实际上是通过Ionic Native导入的cordova插件。链接here。 Cordova插件通常在ionic serve中被禁用，因为它们专门用于使用移动设备的功能。你似乎已经遵循了所有步骤。在模拟器中运行并检查。

根据Github的this link，如果设置放在 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();
    });
  }

ionic2 splashscreen不可见

1 个答案: