透明状态栏

src/main.js

@@ -58,20 +58,70 @@ if (query.code) {
 if (query.invitor) {
     store.commit('setInvitor', query.invitor);
 }
-if (window.cordova) {
+const style = document.documentElement.style;
+style.setProperty('--safe-top', 'env(safe-area-inset-top)');
+style.setProperty('--safe-bottom', 'env(safe-area-inset-bottom)');
+style.setProperty('--safe-left', 'env(safe-area-inset-left)');
+style.setProperty('--safe-right', 'env(safe-area-inset-right)');
+if (navigator.userAgent.includes('#cordova#')) {
     document.addEventListener(
         'deviceready',
         function () {
-            StatusBar.hide();
-            app.mount('#app');
-            setTimeout(() => {
-                navigator.splashscreen.hide();
-                if (window.cordova) {
-                    StatusBar.show();
-                    StatusBar.backgroundColorByHexString('#F5F7FA');
-                    StatusBar.styleDefault();
-                }
-            }, 2000);
+            window.$vm = app.mount('#app');
+            StatusBar.overlaysWebView(true);
+            if (/iphone|ipad|ipod/i.test(navigator.userAgent)) {
+                style.setProperty('--safe-top', 'env(safe-area-inset-top)');
+                style.setProperty('--safe-bottom', 'env(safe-area-inset-bottom)');
+                style.setProperty('--safe-left', 'env(safe-area-inset-left)');
+                style.setProperty('--safe-right', 'env(safe-area-inset-right)');
+            } else {
+                window.AndroidNotch.getInsetTop(
+                    px => {
+                        style.setProperty('--safe-top', px + 'px');
+                    },
+                    err => console.error('Failed to get insets top:', err)
+                );
+
+                window.AndroidNotch.getInsetRight(
+                    px => {
+                        style.setProperty('--safe-right', px + 'px');
+                    },
+                    err => console.error('Failed to get insets right:', err)
+                );
+
+                window.AndroidNotch.getInsetBottom(
+                    px => {
+                        style.setProperty('--safe-bottom', px + 'px');
+                    },
+                    err => console.error('Failed to get insets bottom:', err)
+                );
+
+                window.AndroidNotch.getInsetLeft(
+                    px => {
+                        style.setProperty('--safe-left', px + 'px');
+                    },
+                    err => console.error('Failed to get insets left:', err)
+                );
+            }
+
+            let t = 0;
+            document.addEventListener(
+                'backbutton',
+                e => {
+                    if (window.$vm.$route.matched.find(i => i.name === 'index')) {
+                        e.preventDefault();
+                        let t1 = new Date().getTime();
+                        console.log(t1 - t);
+                        if (t1 - t < 1000) {
+                            navigator.app.exitApp();
+                        } else {
+                            t = t1;
+                            window.$vm.$toast('再按一次退出');
+                        }
+                    }
+                },
+                false
+            );
             window.codePush.sync(
                 function (syncStatus) {
                     switch (syncStatus) {
@@ -124,5 +174,5 @@ if (window.cordova) {
         false
     );
 } else {
-    app.mount('#app');
+    window.$vm = app.mount('#app');
 }

src/router/index.js

@@ -59,6 +59,7 @@ const routes = [
     },
     {
         path: '/',
+        name: 'index',
         component: () => import('../views/Index.vue'),
         children: [
             {