Capacitor 插件 实现本地通知 Local Notification @capacitor/local-notifications
在前一个文章中使用 Capacitor 和 H5 应用构建了一个 Android 应用，这个 h5 是通过 uniapp 生成的。
https://blog.csdn.net/KimBing/article/details/134093769
这个应用的构成是这样一个过程：
- 使用 uniapp 进行程序编写
- 生成 h5 最终文件
- 将 h5 移到 Capacitor 的框架中
- 使用 AndroidStudio 打开 Capacitor 构建的 Android 应用即可生成 Android APK
我们添加通知插件过程在第1个步骤中。在 uniapp 原文件中使用，跟在正常的 Vue 项目中使用 NPM 包是一样的。
一、uniapp 项目中添加 Capacitor 通知插件
首先你需要知道一点
npm install @capacitor/local-notifications
在你需要调用通知的页面中引入这个插件
import { LocalNotifications } from '@capacitor/local-notifications';
<script>
import alarmApi from "@/api/alarmApi";
import util from "@/tools/util";
import systemApi from "./api/systemApi";
import { LocalNotifications } from '@capacitor/local-notifications';
export default {
onLaunch: function() {
let token = uni.getStorageSync('token')
if (!token){
uni.reLaunch({url: '/pages/login/Login'})
}
this.getAbout()
},
onShow: function() {
console.log('App Show')
二、发出一个本地通知
官方文档：https://capacitorjs.com/docs/apis/local-notifications#schedule
发通知是使用的 LocalNotifications.schedule({notifications: []}) 方法，具体的参数看官方文档
这个可以同时发出多个通知，它的参数是这样的：
LocalNotifications.schedule({
notifications: [ 通知数组 ]
})
这个 通知数组 的结构是这样的
{
title: '标题',
body: '具体内容',
id: 通知id, // 这个之后会用于筛选或者对通知进行操作
}
最终你发出的通知就是这样：
比如你需要发出一条 id 为 2 的通知，如果你没有在发通知之前进行判断，判断这条通知是否已经存在于已发起的通知列表中，它就会一直发通知
三、过滤已存在的通知
为了避免上面这个问题，就需要对将要发出的通知进行过滤。
比如你要发出的通知是你后台系统中的通知列表，这个列表中每个通知都有一个唯一的 id，我们就用这个 id 作为通知的 id。
LocalNotifications.getDeliveredNotifications()
.then(oldNotification => {
console.log('old: ',oldNotification)
let oldIds = oldNotification.notifications.map(item => item.id)
LocalNotifications.schedule({
notifications: notifications.filter(item => !oldIds.includes(item.id))
})
})
这里 notification 数组中的内容是下面这样的
oldNotification 的结构是这样的：
{
notifications: [通知数组]
}
