Question

我想创建一个显示徽标的起始页面，并在显示应用程序的内容之前显示2秒，有人可以告诉我正确的方法吗？谢谢！

Answer 1

使用原生离子闪屏组件：

https://ionicframework.com/docs/native/splash-screen/

Answer 2

您所要做的就是创建一个新页面，该页面将在应用程序启动时显示，在该页面内，您将执行应用程序开始运行所需的相关代码。

由于我不知道您是否正在使用延迟加载的页面，我会将页面创建保留在您可以完全使用该页面的位置。

因此，在CLI中创建一个包含ionic g page yourPage

的新页面

在app.components.ts中，您首先会指向该创建的页面

<强> app.components.ts：

export class MyApp {
    rootPage: any = 'YourPage'; // YOUR PAGE WILL BE THE ROOT PAGE FOR NOW

    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
            statusBar.styleDefault();
            splashScreen.hide();
        });
    }
}

在您创建的页面中，您将执行以下操作：

<强> yourPage.ts：

constructor(public navCtrl: NavController){}
// USING A LIFECYCLE HOOK TO EXECUTE CODE AFTER THE PAGE IS FULLY LOADED
ionViewDidLoad(){
  setTimeout(()=> {
    // YOU'LL SET THE ROOT WITH THE HOME PAGE YOU NEED TO SHOW AFTER YOU START. DON'T PUSH THE PAGE SINCE YOU DON'T NEED THE USER TO NAVIGATE BACK TO IT.
    // You can also do other relevant code here, like check if the user is logged or not before seting the root to the right page.
    this.navCtrl.setRoot('YourMainHomePage'); 
  }, 2000)
}

在你的网页html代码中，你只有图像：

<强> yourPage.html

<!-- REMOVE HEADER -->
<ion-content padding>
  <img src="path/to/image" alt="my company" />
</ion-content>

希望这有帮助

离子2/3：创建应用程序的起始页面

2 个答案: