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

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

我的一位 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 实现来保护应用程序。

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