离子应用程序在Android手机上显示白色屏幕

时间:2016-02-18 18:13:04

标签: android angularjs ionic-framework

我在离子框架上做了登录和注册页面。它在浏览器上完美运行,但当我通过命令ionic build android构建Android应用程序并将其安装在我的手机上它显示白页但在我的笔记本电脑浏览器中它完美地工作我的HTML代码是

<head>
    <meta charset="utf-8">
    <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">
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script> 
    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>

<body>

<ion-nav-bar class="bar-positive">
    <ion-nav-back-button class="button-clear">
        <i class="ion-arrow-left-c"></i> Back
    </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>

<script id="auth.html" type="text/ng-template">
    <ion-view view-title="Xenforo Login" class="sigin-background">  

    <ion-content class="padding">

    <h2 style="text-align: center;">Login</h2><br/>

    <form name="authorizationForm" novalidate="" ng-submit="signIn(authorizationForm)"> 

    <div class="list">

    <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.username.$invalid, 'no-errors' : authorizationForm.username.$valid}">
    <span class="input-label">Username</span>
    <input type="text" name="username" ng-model="authorization.username" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container" ng-show="authorizationForm.username.$error && authorizationForm.$submitted" ng-messages="authorizationForm.username.$error">
    <div ng-messages-include="error-list.html"></div>
    </div>

    <label class="item item-input" ng-class="{ 'has-errors' : authorizationForm.password.$invalid && authorizationForm.$submitted, 'no-errors' : authorizationForm.password.$valid  && authorizationForm.$submitted}">
    <span class="input-label">Password</span>
    <input type="password" name="password" ng-model="authorization.password" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="authorizationForm.password.$error && authorizationForm.$submitted" ng-messages="authorizationForm.password.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>          

    </div>     

    <button class="button button-full button-positive" type="submit">
    Sign In
    </button>
    <a class="button button-full button-positive" href="#/register">Sign Up</a>
    </form>   

    </ion-content>

    </ion-view>
</script>  

   <script id="register.html" type="text/ng-template">
    <ion-view view-title="Xenforo Registration" class="sigin-background">  

    <ion-content class="padding">

    <h2 style="text-align: center;">Registration</h2><br/>

    <form name="registrationForm" novalidate="" ng-submit="signUp(registrationForm)"> 

    <div class="list">

    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.username.$invalid, 'no-errors' : registrationForm.username.$valid}">
    <span class="input-label">Username</span>
    <input type="text" name="username" ng-model="authorization.username" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container" ng-show="registrationForm.username.$error && registrationForm.$submitted" ng-messages="registrationForm.username.$error">
    <div ng-messages-include="error-list.html"></div>
    </div>

    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.email.$invalid && registrationForm.$submitted, 'no-errors' : registrationForm.email.$valid  && registrationForm.$submitted}">
    <span class="input-label">Email</span>
    <input type="password" name="email" ng-model="authorization.email" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="registrationForm.email.$error && registrationForm.$submitted" ng-messages="registrationForm.email.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>
    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.password.$invalid && registrationForm.$submitted, 'no-errors' : registrationForm.password.$valid  && registrationForm.$submitted}">
    <span class="input-label">Password</span>
    <input type="password" name="password" ng-model="authorization.password" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="registrationForm.password.$error && registrationForm.$submitted" ng-messages="registrationForm.password.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>          


    <label class="item item-input" ng-class="{ 'has-errors' : registrationForm.repeatepassword.$invalid && registrationForm.$submitted, 'no-errors' : registrationForm.repeatepassword.$valid  && registrationForm.$submitted}">
    <span class="input-label">Repeat Password</span>
    <input type="password" name="repeatepassword" ng-model="authorization.repeatepassword" ng-minlength="5" ng-maxlength="20" required>
    </label>

    <div class="error-container last-error-container" ng-show="registrationForm.repeatepassword.$error && registrationForm.$submitted" ng-messages="registrationForm.repeatepassword.$error">
    <div ng-messages-include="error-list.html"></div> 
    </div>


    </div>     

    <button class="button button-full button-positive" type="submit">
    Sign Up
    </button>

    </form>   

    </ion-content>

    </ion-view>
</script> 


<script id="home.html" type="text/ng-template">
    <ion-view view-title="Second page">
    <ion-content class="padding">
    <h1>Wellcome</h1>
    </ion-content>
    </ion-view>
</script>   

<script id="error-list.html" type="text/ng-template">  
    <div class="error" ng-message="required">
    <i class="ion-information-circled"></i> 
    This field is required!
    </div>
    <div class="error" ng-message="minlength">
    <i class="ion-information-circled"></i> 
    Minimum length of this field is 5 characters!
    </div>
    <div class="error" ng-message="maxlength">
    <i class="ion-information-circled"></i> 
    Maximum length of this field is 20 characters!
    </div>
</script>   

我的角度代码低于

var nameApp = angular.module('starter', ['ionic', 'ngMessages']);

nameApp.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('auth', {
      url: '/auth',
      templateUrl: 'auth.html',
      controller: 'AuthCtrl'
    })
    .state('register', {
      url: '/register',
      templateUrl: 'register.html',
      controller: 'RegisterCtrl'
    })
    .state('home', {
      url: '/home',
      templateUrl: 'home.html',
      controller: 'HomeCtrl'
    });

  $urlRouterProvider.otherwise("/auth");

});


nameApp.controller('AuthCtrl', function($scope, $state) {

  $scope.authorization = {
    username: '',
    password : ''   
  };  

  $scope.signIn = function(form) {
    if(form.$valid) {
      $state.go('home');
    }
  };  

});



nameApp.controller('RegisterCtrl', function($scope, $state) {

  $scope.authorization = {
    username: '',
    password : '',   
    repeatepassword : ''   
  };  

  $scope.signUp = function(form) {
    if(form.$valid) {
      $state.go('auth');
    }
  };  

});


nameApp.controller('HomeCtrl', function($scope) {

});

我不知道我错在哪里请帮帮我

4 个答案:

答案 0 :(得分:1)

如果它在浏览器中正常运行而不在设备中,您可以使用谷歌浏览器浏览器并输入网址 chrome:// inspect 来检查控制台并找出设备中发生的错误。可能存在一些插件问题。这只能在运行android OS ver的android手机上完成 。 kitkat或更高

答案 1 :(得分:0)

我无法看到您宣布您的应用是Angular应用的位置。尝试将此属性添加到body标记:

<body ng-app="starter">

答案 2 :(得分:0)

您可以使用Android上的Chrome远程调试来检查您的应用。您已经在使用CLI 1.7.14,那么您不需要进行任何配置来检查WebView上的应用程序。关注链接将帮助您设置您的Android设备以检查chrome devtool上的离子应用程序 - https://developer.chrome.com/devtools/docs/remote-debugging 这对我在真实环境中调试应用程序有很大帮助。

答案 3 :(得分:0)

排队

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>

包括http:https: