uni-app分享基于plus.storage的角标管理类，主要用于触发个推消息监听事件后设置角标v1.0.2

发布于 1周前 作者 vueper 来自 Uni-App

uni-app分享基于plus.storage的角标管理类，主要用于触发个推消息监听事件后设置角标v1.0.2

今天下午做个推消息推送，需要提醒卖家“你有1笔新的付款订单到账，请及时处理”。

因此需要将数字保存，然后在收到个推推送后，设置订单管理的角标+1，应用的角标+1。

类似下面的效果：

https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/article/20150630/66ecb35c52f8e135b0690dbc48a04c7b.png

大家都知道角标肯定是数字的，然后使用plus.storage.setItem保存，再使用plus.storage.getItem获取，就是始终获取不到。

折腾了一下午，结果发现plus.storage.setItem只能保存string类型的数据，http://ask.dcloud.net.cn/question/6474

说多了都是泪啊 T_T

遂将角标管理类分享出来，也帮着填一个坑，已自动将value转换为string，保存到plus.storage。欢迎各位拍砖！

注意：

5+设置角标API plus.runtime.setBadgeNumber，官方文档是这么描述的：

Android - 2.2+ (支持): 目前仅支持小米(MIUI v5)，其它设备调用后无任何效果； iOS - 4.3+ (支持): 应用需开启“Push Notifications”服务才生效。 暂不知道官方的支持计划。


Harmonyos Next教程
1 回复

当然，以下是一个基于 uni-app 和 plus.storage 的角标管理类代码示例，主要用于在接收到个推（Getui）消息后更新应用的角标数量。假设你已经配置好了个推的相关服务，并且能够在应用内监听到消息事件。

首先，我们需要定义一个角标管理类，该类将使用 plus.storage 来存储和读取角标值。

// BadgeManager.js
class BadgeManager {
    constructor() {
        this.KEY = 'app_badge_count';
    }

    // 获取当前角标值
    async getBadgeCount() {
        let count = plus.storage.getItem(this.KEY);
        return count ? parseInt(count, 10) : 0;
    }

    // 设置角标值
    async setBadgeCount(count) {
        if (isNaN(count) || count < 0) {
            console.error('Invalid badge count');
            return;
        }
        plus.storage.setItem(this.KEY, count);
        
        // 更新应用角标（注意：此方法在不同平台上实现可能不同，以下仅为示例）
        if (uni.setSystemBadgeNumber) { // 假设uni-app提供了此方法（实际可能需要根据平台API调整）
            uni.setSystemBadgeNumber({
                number: count
            });
        } else {
            console.warn('setSystemBadgeNumber is not supported on this platform');
        }
    }

    // 增加角标值
    async incrementBadgeCount() {
        let count = await this.getBadgeCount();
        await this.setBadgeCount(count + 1);
    }

    // 重置角标值
    async resetBadgeCount() {
        await this.setBadgeCount(0);
    }
}

// 导出实例
const badgeManager = new BadgeManager();
export default badgeManager;

然后，在你的消息监听逻辑中调用这个管理类来更新角标。假设你有个推消息监听函数如下：

// 监听个推消息
function onGetuiMessageReceived(message) {
    // 处理消息内容...
    
    // 更新角标
    badgeManager.incrementBadgeCount().then(() => {
        console.log('Badge count incremented');
    }).catch(error => {
        console.error('Failed to update badge count:', error);
    });
}

// 假设你已经注册了个推消息监听，这里只是示例
// GetuiSDK.registerMessageListener(onGetuiMessageReceived);

请注意，上面的 uni.setSystemBadgeNumber 是一个假设的方法，实际在 uni-app 中设置应用角标的方法可能依赖于具体的平台API。对于iOS，你可能需要使用 plus.ios.invoke 来调用原生方法设置角标；对于Android，则可能需要通过通知或者特定的桌面图标API来实现。

此外，由于平台差异，请确保在实际开发中针对目标平台进行相应的适配和测试。

回到顶部