離子應用程序在android手機上顯示白屏
[英]ionic app showing white screen on android mobile
問題描述
我在ionic框架上做了登錄和注冊頁面。 它在瀏覽器上可以正常工作，但是當我通過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 個解決方案
解決方案1
1 2016-02-19 10:01:29
如果它在瀏覽器中正常運行，而不是在設備中正常運行，則可以使用google chrome瀏覽器並輸入url chrome：// inspect來檢查控制台並找出在設備中發生的錯誤。 可能存在一些插件問題。 這只能在運行android OS ver的android mobile中完成。 kitkat或更高
解決方案2
0 2016-02-18 19:35:06
我看不到您在哪里聲明您的應用程序是Angular應用程序。 嘗試將此屬性添加到您的body標簽：
<body ng-app="starter">
解決方案3
0 2016-02-18 20:00:30
您可以使用Android上的Chrome遠程調試來檢查您的應用。 您已經在使用CLI 1.7.14，則無需進行任何配置即可檢查WebView上的應用程序。 跟隨鏈接將幫助您設置您的android設備以檢查chrome devtool上的離子應用程序-https ://developer.chrome.com/devtools/docs/remote-debugging這對我在實際環境中調試應用程序有很大幫助。
解決方案4
0 2017-05-17 17:40:41
排隊
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
包括http:或https:
顯示啟動畫面后的ionic android白屏
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.