最小化稳定版本

config.xml

@@ -83,7 +83,7 @@
     <plugin name="cordova-plugin-ionic-webview" spec="^3.0.0" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
     <plugin name="cordova-plugin-local-notification" spec="0.9.0-beta.2" />
-    <plugin name="cordova-plugin-background-mode" spec="0.7.2" />
+    <plugin name="cordova-plugin-appminimize" spec="1.0.1" />
     <engine name="android" spec="7.1.4" />
     <engine name="ios" spec="4.5.5" />
 </widget>

package.json

@@ -21,7 +21,7 @@
     "@angular/platform-browser": "^7.2.2",
     "@angular/platform-browser-dynamic": "^7.2.2",
     "@angular/router": "^7.2.2",
-    "@ionic-native/background-mode": "^5.3.0",
+    "@ionic-native/app-minimize": "^5.0.0",
     "@ionic-native/core": "^5.0.0",
     "@ionic-native/local-notifications": "^5.3.0",
     "@ionic-native/splash-screen": "^5.0.0",
@@ -29,7 +29,7 @@
     "@ionic/angular": "^4.1.0",
     "cordova-android": "7.1.4",
     "cordova-ios": "4.5.5",
-    "cordova-plugin-background-mode": "0.7.2",
+    "cordova-plugin-appminimize": "1.0.1",
     "cordova-plugin-badge": "^0.8.8",
     "cordova-plugin-device": "^2.0.2",
     "cordova-plugin-ionic-keyboard": "^2.1.3",
@@ -81,7 +81,7 @@
       },
       "cordova-plugin-ionic-keyboard": {},
       "cordova-plugin-local-notification": {},
-      "cordova-plugin-background-mode": {}
+      "cordova-plugin-appminimize": {}
     },
     "platforms": [
       "android",

src/app/app.component.ts

 import { Component } from '@angular/core';
-import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
-import { BackgroundMode } from '@ionic-native/background-mode/ngx';
+import { AppMinimize } from '@ionic-native/app-minimize/ngx';
+import { Router, NavigationEnd } from '@angular/router';
+import { Platform } from '@ionic/angular';
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
-  styles: []
+  styles: [],
+  providers: [AppMinimize]
 })
 export class AppComponent {
+
+  backBtnPressed = false; // 用于判断返回键是否触发
+  url;
+  dom;
+
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
     private statusBar: StatusBar,
-    private backgroundMode: BackgroundMode
+    private appMinimize: AppMinimize,
+    private router: Router
   ) {
     this.initializeApp();
     this.initEvent();
+    this.initRouterListen();
   }
 
   initializeApp() {
     this.platform.ready().then(() => {
       this.statusBar.styleDefault();
       this.splashScreen.hide();
+      this.registerBackButtonAction(); // 注册返回按键事件
+      this.platform.resume.subscribe(); // 弹出框
     });
   }
 
@@ -39,4 +50,32 @@ export class AppComponent {
       }
     });
   }
+
+  initRouterListen() {
+    this.router.events.subscribe(event => { // 需要放到最后一个执行
+      if (event instanceof NavigationEnd) {
+        this.url = window.location.pathname;
+      }
+    });
+  }
+
+  registerBackButtonAction() {
+    this.platform.backButton.subscribe((event) => {
+      if (this.url === '/main/index' || this.url === '/extra') {
+        if (this.backBtnPressed) {
+          this.appMinimize.minimize();
+          this.backBtnPressed = false;
+          return;
+        } else {
+          this.backBtnPressed = true;
+          setTimeout(() => this.backBtnPressed = false, 2000);
+          return;
+        }
+      } else {
+        this.backBtnPressed = true;
+        setTimeout(() => this.backBtnPressed = false, 2000);
+        return;
+      }
+    });
+  }
 }

src/app/app.module.ts

@@ -9,7 +9,7 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
-import { BackgroundMode } from '@ionic-native/background-mode/ngx';
+import { AppMinimize } from '@ionic-native/app-minimize/ngx';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -37,7 +37,7 @@ import { AuthInterceptor } from './service/token.service';
     AuthService,
     TransferService,
     LocalNotifications,
-    BackgroundMode
+    AppMinimize
   ],
   bootstrap: [AppComponent]
 })

src/app/home/home.page.scss

@@ -4,6 +4,7 @@
   text-align: center;
   border-top: 1px solid #ccc;
   color: cornflowerblue;
+  z-index: 999;
 }
 
 .padLeft {
@@ -19,3 +20,7 @@
   width: 100%;
   height: 100%;
 }
+
+#slideComponent {
+  z-index: 10;
+}

src/app/home/home.page.ts

@@ -21,9 +21,7 @@ export class HomePage implements OnInit {
   index;
   active = [true, false, false, false];
   startX;
-  startY;
   X;
-  Y;
   toLeft = 'backLeft';
   toRight = 'backRight';
 
@@ -32,13 +30,10 @@ export class HomePage implements OnInit {
   ngOnInit() {
     document.getElementById('slideComponent').addEventListener('touchstart', <TouchEvent>(e) => {
       this.startX = e.touches[0].pageX;
-      this.startY = e.touches[0].pageY;
     });
     document.getElementById('slideComponent').addEventListener('touchmove', <TouchEvent>(e) => {
       const moveEndX = e.touches[0].pageX;
-      const moveEndY = e.touches[0].pageY;
       this.X = moveEndX - this.startX;
-      this.Y = moveEndY - this.startY;
     });
     document.getElementById('slideComponent').addEventListener('touchend', <TouchEvent>(e) => {
       if ( this.X > 100 ) {
@@ -46,6 +41,7 @@ export class HomePage implements OnInit {
       } else if ( this.X < -100 ) {
         this.slideNext();
       }
+      this.X = 0;
     });
   }
 

src/app/main/page-four/page-four.component.ts

@@ -9,7 +9,7 @@ import { ApiService } from '../../service/api.service';
 export class PageFourComponent implements OnInit {
 
   req: any = {};
-  resp: any = {};
+  resp: any = '';
   constructor(private api: ApiService) { }
 
   ngOnInit() {}

src/app/service/transfer.service.ts

@@ -11,12 +11,16 @@ export class TransferService {
         // 我没有找到相关的api以及解决办法,如果后面的人找到了的话麻烦将这个麻烦的方法给解决掉
         if (document.getElementsByTagName(req.to).length > 0) {
             const y = <HTMLBodyElement>document.getElementsByTagName(req.to)[0];
-            y.style.opacity = '1';
+            y.style.visibility = 'visible';
         }
         this.router.navigate([req.url], {queryParams: req.query, fragment: req.hash});
         if (document.getElementsByTagName(req.from).length > 0) {
             const x = <HTMLBodyElement>document.getElementsByTagName(req.from)[0];
-            x.style.opacity = '0';
+            x.style.visibility = 'hidden';
+            setTimeout(() => {
+                // 此处是防止移动端自己的back button跳转导致页面空白
+                x.style.visibility = 'visible';
+            }, 2000);
         }
     }
 }