Question

这是我在离子框架移动应用程序中的第一次体验app.my问题是在android设备中测试我的应用程序的白色空白页面显示。但它在浏览器中工作正常。我的应用程序的工作流程首先登录，然后重定向to homepage.homepage包含我的服务的一些图标。在点击每个服务后，它会重定向到详细页面。当重定向到详细页面不显示我的内容时，只显示白色空白页面。有时这个错误没有显示。另一个问题是在注册它再次重定向到主页同样的问题发生。我无法理解这是如何发生的。浏览器控制台没有显示任何错误.MY index.html和app.js如下所示。

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
  $ionicConfigProvider.backButton.text('').previousTitleText('');
  $stateProvider
 .state('app', {
   url: "/app",
   abstract: true,
   templateUrl: "templates/menu.html",
   controller: 'AppCtrl'
 })
 .state('app.detail', {
     url: "/detail",
     views: {
      'menuContent': {
        templateUrl: "templates/detail.html",
        controller: 'DetailCtrl'
      }
    }
  })
   .state('app.contact', {
    url: "/contact",
    views: {
      'menuContent': {
        templateUrl: "templates/contact.html"
      }
    }
  })
   .state('app.payment', {
    url: "/payment",
    views: {
      'menuContent': {
        templateUrl: "templates/payment.html"
      }
    }
  })
  .state('app.cart_detail', {
    url: "/cart_detail",
    views: {
      'menuContent': {
        templateUrl: "templates/cart_detail.html"
      }
    }
  })
   .state('app.about', {
    url: "/about",
    views: {
      'menuContent': {
        templateUrl: "templates/about.html"
      }
    }
  })
  .state('slide', {
    url: "/slide",
    templateUrl: "templates/slide.html"
  })
   .state('login', {
      url: '/login',
      templateUrl: 'templates/login.html',
      controller: 'LoginCtrl'

    })
 .state('register', {
      url: '/register',
      templateUrl: 'templates/register.html',
      controller: 'RegisterCtrl'
    })

//start r@khi

 .state('app.paymentnotification', {
    url: "/paymentnotification",
    views: {
      'menuContent': {
        templateUrl: "templates/paymentnotification.html",
             controller: 'PaymentCtrl'  
            }
    }
  })

  .state('verification', {
    url: "/verification",
 views: {
      '': {
    templateUrl: "templates/verification.html",
        controller: 'RegisterCtrl'
}
}
  })

 .state('paymentsecurity', {
    url: "/paymentsecurity",
    templateUrl: "templates/paymentsecurity.html",
        controller: 'OrderpaymentCtrl'


  })


    .state('app.home', {
      url: "/home",
      views: {
        'menuContent': {
          templateUrl: "templates/home.html",
          controller: 'HomeCtrl'
        }
      }
    })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');
});

我的index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!--<link href="css/animate.css" rel="stylesheet">-->
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->


    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script src="js/angular-animate.js"></script>
    <!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
    <script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
    <link href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="plugins/org.apache.cordova.file/www/File.js"></script>
    <script type="text/javascript" charset="utf-8" src="plugins/org.apache.cordova.file-transfer/www/FileTransfer.js"></script>
    <!-- your app's js -->
    <script src="js/config.js"></script>
    <script src="js/app.js"></script>

    <!--<script src="https://maps-api-ssl.google.com/maps/api/js?libraries=places"></script> -->
    <script src="js/controllers.js"></script>
    <script src="js/loginCtrl.js"></script>
    <script src="js/registerCtrl.js"></script>
    <script src="js/slideCtrl.js"></script>
    <script src="js/detailCtrl.js"></script>
    <script src="js/homeCtrl.js"></script>
    <script src="js/verificationCtrl.js"></script>
    <script src="js/paymentCtrl.js"></script>
    <script src="js/orderpaymentCtrl.js"></script>



</head>

<body ng-app="testapp">
    <ion-nav-view></ion-nav-view>
</body>

</html>

Answer 1

使用离子运行android --livereload --consolelogs 它将显示详细的控制台输出或导致白屏的问题。无论如何，离子博客上有一篇文章描述了有关应用调试的更多信息 http://blog.ionic.io/angularjs-console/

在基于离子框架的移动应用程序导航期间显示的空白页面

1 个答案: