Question

该应用程序在浏览器上运行良好，但在Android设备或模拟器上部署时显示空白屏幕。

在iOS模拟器上进行部署会显示银行背景，但也会在设备上显示空白。

我怀疑这是一个路由问题，因为当我将其直接放在index.html的主体上时会显示导航栏

这是index.html的片段

＆＃13;

angular.module('ilearn.routes', [])

//Configure view routes
.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider

      .state('app', {
          url: '/app',
          abstract: true,
          templateUrl: 'templates/Common/Menu.html',
          controller: 'AppCtrl'
      })


        .state('app.activity', {
            url: '/activity',
            views: {
                'menuContent': {
                    templateUrl: 'templates/network/Activity.html'
                }
            }
        })
        $urlRouterProvider.otherwise('/app/dashboard');
});

＆＃13;

<script>...scripts</script>
</head>

<body ng-app="app">
    <ion-nav-view></ion-nav-view>
</body>

＆＃13;

menu.html文件就像这样

＆＃13;

<ion-side-menus >
  <ion-side-menu-content>
    <ion-nav-bar class="bar bar-header bar-balanced">
      <ion-nav-back-button>
      </ion-nav-back-button>

        <ion-nav-buttons side="right" ng-show="isUserLoggedIn">
            <a class="button button-icon button-clear ion-person pull-right" href="#/app/profile">
            </a>
            <a class="button button-icon button-clear ion-log-out"">
            </a>
        </ion-nav-buttons>

      <ion-nav-buttons side="left">
        <a class="button button-icon button-clear ion-navicon" href="#/app/dashboard">
        </a>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

    <!--
  <ion-side-menu side="left">
        <ion-header-bar class="dark-bg expanded">
            <span class="avatar hero" style="background: url('img/iLearn-logo.png'); background-size: cover;"></span>
            <h2>iLearn</h2>
        </ion-header-bar>
    <ion-content class="stable-bg has-expanded-header">
      <ion-list>
        <ion-item menu-close ng-click="login()">
          Login
        </ion-item>
        <ion-item menu-close href="#/app/login">
          Login 1
        </ion-item>
        <ion-item menu-close href="#/app/dashboard">
          Dashboard
        </ion-item>
        <ion-item menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item menu-close href="#/app/profile">
          Profile
        </ion-item>
        <ion-item menu-close href="#/app/courses">
          Courses
        </ion-item>
        <ion-item menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
  -->
</ion-side-menus>

＆＃13;

Answer 1

使用Genymotion在您的电脑上安装您的应用程序，然后检查控制台是否有错误，您可以在youtube上找到许多教程来安装genymotion

Answer 2

我使用以下代码来检测手机和仿真器上的白屏错误。（在android studio模拟器上工作正常，仅在Ionic1上进行了检查，如果在其他版本上工作，请告诉我）。复制代码并将其粘贴到您的index.html中，如下所示。之后运行“ ionic cordova run android”错误将被警告。

将此代码写入index.html“仅在代码下方”

<script type="text/javascript">
    window.onerror = function(err, fn, ln) {
        alert("ERROR:" + err + ", " + fn + ":" + ln);
    };
    var errorVar = objectDoesntExists.properyDoesntExist;
</script>  `

离子在Android设备和模拟器上显示白屏 - 怀疑路由问题？

2 个答案: