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 remote debugging

在Android设备上运行时检查控制台

将您的设备与您的设备连接。（确保您的手机上应启用USB调试。）
在桌面浏览器的浏览器中写下chrome://inspect。
您将看到已连接的设备，选择检查并检查控制台是否有日志。

Ionic - App在浏览器和iOS模拟器上工作正常但在android模拟器中没有

1 个答案: