蔡繁荣
蔡繁荣
  • 发布:2015-06-16 19:01
  • 更新:2019-08-20 13:08
  • 阅读:15880

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

分类:MUI

今天下午做个推消息推送,需要提醒卖家“你有1笔新的付款订单到账,请及时处理”。
因此需要将数字保存,然后在收到个推推送后,设置订单管理的角标+1,应用的角标+1。
类似下面的效果:

大家都知道角标肯定是数字的,然后使用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”服务才生效。
暂不知道官方的支持计划。

// 用法1.  
plus.push.addEventListener('receive', function(msg){  
    if(msg.aps){  
        alert('接收到在线APNS消息');  
    }else{  
        alert('接收到在线透传消息');  
    }  

    // 测试在线,透传消息,设置角标  
    BadgeManager.setInc('order', 1);  

})  

// 用法2.  
// 进入订单管理模块后,清除订单角标  
BadgeManager.removeBadgeNumber('order');  

/**  
 * BadgeManager 静态类  
 * 只需要关心对应业务的角标增长值,自动计算总的角标数,并设置App角标plus.runtime.setBadgeNumber  
 * @author fanrong33  
 * @version 1.0.2 build 201501223  
 */  
;function BadgeManager(){  
};  

/**  
 * 角标增长  
 * @param {String} key  键值  
 * @param {Number} step 增长值  
 */  
BadgeManager.setInc = function(key, step){  
    var key = "badge_"+key;  
    var total_number = plus.storage.getItem("badge_total_number");  
    var key_number   = plus.storage.getItem(key);  
    total_number = parseInt(total_number); // 字符串转数字  
    key_number   = parseInt(key_number);  
    if(!key_number) key_number    = 0;  
    if(!total_number) total_number = 0;  
    key_number   = key_number + step;  
    total_number = total_number + step;  

    plus.storage.setItem(key, key_number.toString()); // 数字转字符串  
    plus.storage.setItem("badge_total_number", total_number.toString());  

    // 设置APP图标的角标  
    plus.runtime.setBadgeNumber(total_number);  
}  

/**  
 * 角标减少  
 * @param {String} key  键值  
 * @param {Number} step 减少值  
 */  
BadgeManager.setDec = function(key, step){  
    var key = "badge_"+key;  
    var total_number = plus.storage.getItem("badge_total_number");  
    var key_number   = plus.storage.getItem(key);  
    total_number = parseInt(total_number);  
    key_number  = parseInt(key_number);  
    if(!key_number) key_number   = 0;  
    if(!total_number) total_number = 0;  
    key_number   = key_number - step;  
    total_number = total_number - step;  

    if(key_number < 0)     key_number = 0;  
    if(total_number < 0) total_number = 0;  

    plus.storage.setItem(key, key_number.toString());  
    plus.storage.setItem("badge_total_number", total_number.toString());  

    // 设置APP图标的角标  
    plus.runtime.setBadgeNumber(total_number);  
}  

/**  
 * 根据key获取对应的角标值  
 * @param {String} key  
 */  
BadgeManager.getBadgeNumber = function(key){  
    var key = "badge_"+key;  
    var key_number = plus.storage.getItem(key);  
    key_number = parseInt(key_number);  

    if(!key_number) key_number = 0;  
    return key_number;  
}  

/**  
 * 删除key对应的角标值  
 * @param {String} key  
 */  
BadgeManager.removeBadgeNumber = function(key){  
    var key = "badge_"+key;  
    var total_number = plus.storage.getItem("badge_total_number");  
    var key_number   = plus.storage.getItem(key);  
    total_number = parseInt(total_number);  
    key_number   = parseInt(key_number);  
    if(!key_number)   key_number   = 0;  
    if(!total_number) total_number = 0;  
    total_number = total_number - key_number;  

    if(total_number < 0) total_number = 0;  

    plus.storage.removeItem(key);  
    plus.storage.setItem("badge_total_number", total_number.toString());  

    // 设置APP图标的角标  
    plus.runtime.setBadgeNumber(total_number);  
}  
27 关注 分享
DCloud_heavensoft AndyHua 羊羽亻子 五块钱的果汁 大海花开 祺佑 liuhulan DB 我勒个去 barice DCDDD ifeiyan MooGu 小云菜 gmmx133 ali 咬了一口的苹果 internetdc 距离您98米 杜林 skysowe 稳住能赢 531949150@qq.com 诗小柒 高风 阿落 lijiamu

要回复文章请先登录注册

有问

有问

这个角标,上次我看新版HBX修复了华为手机设置为0的时候,不显示角标。然而今天测试下来还是不行,要=-1,角标才会清除。IOS正常。测试手机为华为荣耀PLAY。
2019-08-20 13:08
448228262@qq.com

448228262@qq.com

集成github上安卓原生:http://ask.dcloud.net.cn/article/13166
2018-03-19 16:18
wayhbbeed

wayhbbeed

角标目前是个巨大的问题啊,除了小米其他都不能支持,GIT上有个可以安卓原生去集成的,希望MUI官方把这个加入H5+中:
https://github.com/leolin310148/ShortcutBadger
2018-01-17 02:25
851587191@qq.com

851587191@qq.com

怎样判断 订单这个页面是推送的消息点进去的 而不是普通的点击?
2017-12-21 15:20
稳住能赢

稳住能赢

怎么没有收藏按钮呢?得收藏一下
2017-11-06 10:13
杜林

杜林

mark
2017-07-20 21:01
internetdc

internetdc

mark
2017-06-10 10:19
ali

ali

[ERROR] : TypeError: BadgeManager.removeBadgeNumber is not a function. (In 'BadgeManager.removeBadgeNumber('order')', 'BadgeManager.removeBadgeNumber' is undefined)
file name:icon.html
line no:35 报这个错 求源码 Email:1844594430@qq.com
2017-03-30 15:53
蔡繁荣

蔡繁荣 (作者)

回复 gadget2k :
你根据自己的业务设置的key,方便区分管理
2016-12-21 17:26
gadget2k

gadget2k

BadgeManager.setInc('order', 1);
这里面这个“order”是什么?应用里那个badge的ID吗?
2016-12-06 10:21