修改 Ionic Framework 应用程序的徽章编号

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

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

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

之前我在 Simon Reimler 的博客上发表了一篇关于 使用 Ionic Framework 进行本地通知的 文章。但是,您可以在应用程序中使用另一种通知。在 iOS 和许多不同风格的 Android(不是全部)中,您有机会在启动器图标上使用徽章指示器。虽然这不会通过提示通知用户,但它仍会在主屏幕上通知他们需要注意的事项。

Sebastián Katzer 创建了一个名为 cordova-plugin-badge 的漂亮的 Apache Cordova 插件,它可以让我们轻松地将此功能添加到我们的 Ionic Framework 移动应用程序中。

如果您是一名 Android 开发人员,请注意并非所有 Android 版本都支持徽章,在此之前请注意。不要让这个概念驱动您的 Android 应用程序的功能。

让我们首先通过终端或命令提示符创建一个新的 Ionic Framework Android 和 iOS 项目:


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


创建新的 Ionic 项目 Shell 1 2 3 4 ionic start IonicProject blank cd IonicProject ionic platform add ios ionic platform add android

与往常一样,请注意,如果您不使用 Mac,您将无法为 iOS 平台添加和构建。

下一步是为 Apache Cordova 安装徽章插件。将 Ionic 项目作为终端或命令提示符中的当前工作目录,运行以下命令:


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


安装Apache Cordova Badge Plugin Shell 1 cordova plugin 添加https://github.com/katzer/cordova-plugin-badge.git

这将允许您现在使用原始 JavaScript 将徽章计数添加到您的启动器图标。但是,因为我们使用的是基于 AngularJS 构建的 Ionic Framework,所以只有安装 AngularJS 扩展集 ngCordova 才能使我们的开发过程更简单一些才有意义。

因为 ngCordova 经常更改,所以我将参考我使用的是来自 GitHub 上的提交 c3634c 的版本。欢迎您大胆尝试并使用最新版本,但请注意它可能不再适用于本教程。

ng-cordova.min.js 复制到项目的 www/js 目录中,然后打开 www/index.html 文件以将其包含在代码中,如下所示:


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


请注意,我在 cordova.js 之上包含了 ng-cordova.min.js 。这很重要,因为如果您不这样做,事情可能无法进行。

接下来我们要做的是打开 www/js/app.js 文件并添加一些用于设置徽章计数的逻辑:


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


请注意,在我们的 ExampleController 中,我们将所有内容都包装在 $ionicPlatform.ready() 方法中。这是因为插件使用本机代码,在我们尝试使用它之前必须准备好。

插件准备就绪后,我们首先需要征求用户的许可。无论用户是接受还是拒绝,更改此决定的唯一方法是通过设备设置进行更改。

接下来的 setBadge 方法是从 www/index.html 文件中调用的。将 <ion-content> 标签换成这样:


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


现在,当设备获得许可时,如果您单击该按钮,它将为启动器图标分配一个标志编号 5。

结论

徽章编号是通知用户需要注意某事的另一种方式。使用 Apache Cordova 插件,通过 Ionic Framework 将它们添加到您的 iOS 和 Android(某些)应用程序并不复杂。

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