Блог

Я действительно новичок в мире мобильной разработки и пробую свои силы в этом, используя 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');
        })
};
  

Любая помощь будет действительно оценена.

Сначала установите плагин белого списка.

 cordova plugin add cordova-plugin-whitelist
  

добавьте следующий код в свой config.xml файл в вашем корневом каталоге проекта

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

или:

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

Если вы все еще сталкиваетесь с какой-либо проблемой, вы можете проверить консоль во время работы на устройстве Android с помощью Chrome remote debugging

• Подключите устройство к компьютеру.(Убедитесь, что на вашем мобильном устройстве включена отладка по USB).

• напишите chrome://inspect в браузере на рабочем столе Chrome.

• вы увидите подключенное устройство, выберите проверить и проверьте консоль на наличие журнала.