【ionic2/3】开机图和监听右键返回

最新推荐文章于 2020-12-28 15:50:10 发布

王娜娜的博客

最新推荐文章于 2020-12-28 15:50:10 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/summer_na/article/details/80095950

本文介绍了在Ionic2/3中如何配置config.xml以控制开机图的显示，并在app.component.ts中实现对安卓设备返回键的监听处理。通过设置AutoHideSplashScreen为false，可以自定义开机图的隐藏时机。同时，文中提供了监听返回键的逻辑，当用户在底栈页面点击返回键时，会弹出退出提示，连续两次点击则退出应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

config.xml文件：

preference：

<preference name="AutoHideSplashScreen" value="false" /> 设置splash的隐藏方式，false表示不会自动隐藏，需要在app.component.ts中自己设置隐藏点，true表示会自动隐藏；

<preference name="SplashScreenDelay" value="3000" /> 设置splash加载loading的时间，只有AutoHideSplashScreen的值为true，并且app.component.ts中没有设置隐藏时间点，才会以这里设置的时间为主，如果app.component.ts中设置了时间点，就跟config.xml这里与aplash有关的设置无关，都以app.component.ts为主。

FadeSplashScreen 布尔值，默认为true。设置为false，禁止启动画面淡入或淡出效果。

FadeSplashScreenDuration 浮点数，默认为2（秒）。启动画面淡入淡出时间。

ShowSplashScreenSpinner 布尔值，默认为true。设置为false，则隐藏splash-screen spinner。

返回键：

在app.component.ts中：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, ToastController, App } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

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

  rootPage: any = HomePage;

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

  registerBackButton: boolean = false;

  checkPage: boolean = false;

  constructor(
    public platform: Platform, 
    public statusBar: StatusBar, 
    public splashScreen: SplashScreen, 
    public toastCtrl: ToastController,
    public app: App
  ) {
    this.initializeApp();

    //一般只有在路由的底栈，点击返回键提示退出app
    this.platform.registerBackButtonAction(()=>{
      this.goBackLogic();   //判断当前页面
      if(this.checkPage) {  //点击安卓的返回键提示是否退出app
        this.exitApp();
      }else {
        this.app.goBack();  //点击安卓的返回键返回上一页
      }
    })


    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];

  }

  //是否退出app
  exitApp() {
    if(this.registerBackButton) {
      this.platform.exitApp();
    }else {
      this.registerBackButton = true;
      this.toastCtrl.create({
        message: '再按一次推出应用',
        duration: 2000
      }).present();
      setTimeout(() => {
        this.registerBackButton = false;
      }, 2000)
    }
  }

  // 判断当前页面, 如果当前页面是HomePage或者ListPage, 那么点击安卓的返回键是提示是否退出app，如果是其它页面，则返回上一页
  goBackLogic() {
    var currentCmp = this.app.getActiveNav().getActive().component  //获得当前页面的component
    var isPage1= currentCmp === HomePage
    var isPage2= currentCmp === ListPage
    
    if (isPage1 || isPage2 ) {
      this.checkPage = true
    } else {
      this.checkPage = false
    }
  }

  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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  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);
  }
}

这里的逻辑是：当点击安卓的返回按钮，先判断当前页面是否是路由栈的底栈，如果不是，点击返回，应该返回到应用的上一页，如果是底栈，点击返回，弹出提示“再点击一次退出应用”，如果在两秒内点击两次返回键，则退出app。

不清楚可以查看此文章