Статьи

Использование Pin-диалога в вашем мобильном приложении Ionic Framework

Сентябрь 17, 2017

Один из моих   последователей в Твиттере недавно спросил меня, как правильно использовать диалоговое окно в своем   мобильном приложении Ionic Framework . Хотя я уже создал аналогичную статью, касающуюся  создания экрана разблокировки булавки  в приложении Ionic Framework, я подумал, что было бы неплохо показать, как сделать это в реальном диалоге.

Используя  плагин Apache Cordova  PinDialog от Paldom, мы можем использовать собственные диалоги в нашем приложении и принимать пароли.

Начнем с создания нового приложения Ionic Framework с использованием командной строки (Windows) или терминала (Mac / Linux):

ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

Обратите внимание, что если вы не используете Mac, вы не можете добавлять и собирать для платформы iOS.

После создания проекта пришло время установить   плагин Apache Cordova . С проектом в качестве текущего рабочего каталога для вашей командной строки или терминала выполните следующую команду:

cordova plugin add https://github.com/Paldom/PinDialog.git

Теперь технически мы можем начать использовать плагин с необработанным JavaScript, но поскольку Ionic Framework работает на  AngularJS , мы собираемся установить набор расширений AngularJS,  ngCordova .

В этом уроке я собираюсь использовать версию ngCordova из commit  c3634c6  на GitHub. Вы можете быть авантюрным и использовать последнюю версию, но нет никаких гарантий, что это руководство будет работать с ним.

Загрузив ngCordova, скопируйте  ng-cordova.min.js  в каталог вашего проекта  www / js  и откройте   файл www / index.html, чтобы мы могли сделать его похожим на следующее:

<!DOCTYPE html>
<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">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content ng-controller="ExampleController">
            </ion-content>
        </ion-pane>
    </body>
</html>

Обратите внимание, что  ng-cordova.min.js  был включен перед  строкой cordova.js  . Это очень важно, потому что если вы этого не сделаете, он может работать неправильно. Также обратите внимание, как  ng-controller="ExampleController" добавляется. Мы собираемся проверить этот контроллер через минуту.

Теперь откройте файл  www / js / app.js  и измените следующую строку:

angular.module('starter', ['ionic', 'ngCordova'])

Вы увидите, что мы только добавили  ngCordova в массив. Библиотека теперь готова к использованию.

С открытым файлом добавьте следующий контроллер:

.controller("ExampleController", function($ionicPlatform, $cordovaPinDialog) {

    var correctPassword = "1337";

    $ionicPlatform.ready(function() {
        $cordovaPinDialog.prompt('Some message here').then(function(result) {
            if(result.input1 === correctPassword) {
                alert("The correct password was entered");
            } else {
                alert("Incorrect password enetered");
            }
        }, function (error) {
            console.error(error);
        });
    });

})

Поскольку плагин использует собственный код устройства, мы должны сначала обернуть его,  $ionicPlatform.ready() чтобы убедиться, что мы не пытаемся использовать его слишком рано. Вы можете использовать  onDeviceReady() метод вместо.

В  ExampleController статически мы установили пароль для сравнения. Когда пользователь вводит числовое значение и принимает, результат будет сравниваться с нашим статическим паролем и отображать соответствующее сообщение.

Вывод

Теперь вы видели два способа добавления защиты контактов в свое мобильное приложение для Android и iOS от Ionic Framework. В частности, мы только что увидели, как защитить приложение с помощью собственного диалога по сравнению с чистой реализацией CSS и JavaScript.

Видео-версию этой статьи можно увидеть ниже.

29
Share: