Ionic-应用在浏览器和iOS模拟器上运行良好，但在android模拟器中运行不正常

Question

我真的是移动开发领域的新手，并尝试使用IonicFramework来尝试它。

我正在创建一个登录表单，成功登录后，用户将进入另一个状态，称为viewMyList 。 当我运行ionic serve命令时，一切似乎都可以正常运行，我能够登录并进入下一个状态，在iOS模拟器上也一切正常，但是在Android模拟器上单击登录按钮时，一切都没有，我没有也看不到任何错误。

我的尝试

login.html

<ion-view title="Login">
    <ion-content class="has-header" padding="true">
        <form class="list">
            <h2 id="login-heading3" style="color:#000000;text-align:center;">Welcome back!</h2>
            <div class="spacer" style="width: 300px; height: 32px;"></div>
            <ion-list>
                <label class="item item-input">
                    <span class="input-label">Email</span>
                    <input type="text" placeholder="" ng-model="credentials.username">
                </label>
                <label class="item item-input">
                    <span class="input-label">Password</span>
                    <input type="text" placeholder="" ng-model="credentials.password">
                </label>
            </ion-list>
            <div class="spacer" style="width: 300px; height: 18px;"></div>
            <a class="button button-positive  button-block" ng-click="login()">Sign In</a>
        </form>
    </ion-content>
</ion-view>

ng-click与login()链接

这是我的loginCtrl ，其中包含login()函数

.controller('loginCtrl', function ($scope, $state, $ionicHistory, User) {

    $scope.credentials = {
        username: '',
        password: ''
    };
    $scope.login = function () {
        User.login($scope.credentials)
            .then(function (response) {
                console.log(JSON.stringify(response));
                //Login should not keep any history
                $ionicHistory.nextViewOptions({historyRoot: true});
                $state.go('app.viewMyList');
            })
    };

    $scope.message = "this is a message loginCtrl";
})

这是我的User服务，负责登录逻辑

angular.module('app.user', [])
    .factory('User', function ($http) {

        var apiUrl = 'http://127.0.0.1:8000/api';
        var loggedIn = false;

        return {
        login: function (credentials) {
            console.log(JSON.stringify('inside login function'));
            console.log(JSON.stringify(credentials));
            return $http.post(apiUrl + '/tokens', credentials)
                .success(function (response) {
                    console.log(JSON.stringify('inside .then of login function'));
                    var token = response.data.token;
                    console.log(JSON.stringify(token));
                    $http.defaults.headers.common.Authorization = 'Bearer ' + token;
                    persist(token);
                })

                .error(function (response) {
                    console.log('inside error of login function');
                    console.log(JSON.stringify(response));
                })
                ;
        },

            isLoggedIn: function () {
                if (localStorage.getItem("token")  != null) {
                    return loggedIn = true;
                }
            }
        };

        function persist(token) {

            window.localStorage['token'] = angular.toJson(token);
        }
    });

这是登录后的route

    .state('login', {
        url: '/login',
        templateUrl: 'templates/login.html',
        controller: 'loginCtrl'


    })

目前我真的很笨，因为我似乎无法弄清为什么Android上什么也没发生，从我的故障排除中，我只能找到当我单击登录按钮时代码似乎没有进入以下功能的地方。

$scope.login = function () {
    User.login($scope.credentials)
        .then(function (response) {
            console.log(JSON.stringify(response));
            //Login should not keep any history
            $ionicHistory.nextViewOptions({historyRoot: true});
            $state.go('app.viewMyList');
        })
};

任何帮助将不胜感激。

Answer 1

首先安装白名单插件。

cordova plugin add cordova-plugin-whitelist

在项目的根目录下的config.xml文件中添加以下代码

<allow-navigation href="http://example.com/*" />

要么：

<allow-navigation href="http://*/*" />

如果仍然遇到任何问题，那么您可以使用Chrome远程调试在android设备中运行时检查控制台

• 将设备与机器连接。（确保在手机上启用USB调试）。

• 在桌面chrome浏览器中编写chrome://inspect 。

• 您将看到已连接的设备，选择检查并检查控制台以获取日志。