在 Ionic Framework 移动应用程序中使用 Pin 对话框

我的一位 Twitter 关注者最近问我如何在他们的 Ionic Framework 移动应用程序中正确使用 pin 对话框。虽然我已经写了一篇关于在 Ionic Framework 应用程序中 创建 pin 解锁屏幕的 类似文章，但我认为用实际的对话框来展示如何执行此操作可能是个好主意。

使用 Paldom 的 Apache Cordova PinDialog 插件，我们可以在我们的应用程序中使用本机对话框并接受密码。

让我们首先使用命令提示符 (Windows) 或终端 (Mac / Linux) 创建一个全新的 Ionic Framework 应用程序：

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

请注意，如果您使用的不是 Mac，则无法为 iOS 平台添加和构建。

创建项目后，就可以安装 Apache Cordova 插件了。将项目作为命令提示符或终端的当前工作目录，运行以下命令：

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

现在从技术上讲，我们可以开始使用带有原始 JavaScript 的插件，但是由于 Ionic Framework 运行在 AngularJS 之外，我们将安装 AngularJS 扩展集 ngCordova 。

在本教程中，我将使用 GitHub 上提交 c3634c6 的 ngCordova 版本。欢迎您大胆尝试并使用最新版本，但不保证本教程适用于它。

下载 ngCordova 后，将 ng-cordova.min.js 复制到项目的 www/js 目录中，然后打开 www/index.html 文件，这样我们就可以使它看起来类似于以下内容：

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

请注意， ng-cordova.min.js 包含在 cordova.js 行之前。这非常重要，因为如果不这样做，它可能无法正常运行。还要注意 ng-controller="ExampleController" 是如何添加的。我们马上要检查那个控制器。

现在打开您的 www/js/app.js 文件并更改以下行：

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

您会看到我们只将 ngCordova 添加到数组中。该库现在可以使用了。

在文件仍然打开的情况下，添加以下控制器：

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

因为插件使用本机设备代码，所以我们必须首先将其包装在 $ionicPlatform.ready() 中，以确保我们不会过早尝试使用它。欢迎您改用 onDeviceReady() 方法。

在 ExampleController 中，我们静态设置了一个密码来进行比较。当用户输入一个数值并接受时，结果将与我们的静态密码进行比较并相应地显示一条消息。

结论

您现在已经了解了在 Ionic Framework 移动 Android 和 iOS 应用程序中添加引脚保护的两种方法。特别是我们刚刚看到了如何使用本机对话框而不是纯 CSS 和 JavaScript 实现来保护应用程序。

可以在下面看到本文的视频版本。