撒网要见鱼
撒网要见鱼
  • 发布:2016-01-06 18:57
  • 更新:2019-08-19 10:16
  • 阅读:6182

【分享】一个Notification 进度条插件(android,NJS实现,直接就可使用)

分类:HTML5+

如题,分享一个Notification 进度条插件(android,用js调用原生api实现,直接就可以使用).
参考1: http://ask.dcloud.net.cn/article/155
参考2:http://ask.dcloud.net.cn/question/2464

详细介绍: 最近有一个需求是,android更新资源包时,需要在通知栏里显示下载进度条,于是就搜索了下已有的解决方案
发现并没有现成的解决方案,于是参考了以上两个解决方案,结合了下,实现了直接能调用的js插件.

第一步(分析以上两种方案的缺陷):
第一种:功能上能实现需求,但是使用起来太麻烦,而且也不方便调试(需要离线打包后才能看到效果),
而且,我这里还遇到了一个问题,在 hbuild 6.9.2 中,我明明已经添加了自定义模块权限,但是却一直提示我 ***权限没有添加, 真的是把我弄的吐血了, 所以没办法,只能另谋他路.

第二种:使用起来很方便,但是却没有完全达到功能要求(只显示了普通通知,但没有显示进度条),而且在api <16 的机子上会报错.
于是在这个基础上,结合第一种方法.写了一个 工具类,实现android的通知栏控制(兼容了api11-16的通知显示)

源码:

/**  
 * @description njs实现android原生功能   
 * 1.通知栏消息  
 * @see http://ask.dcloud.net.cn/article/503  
 *   
 * @author dailc  
 * @version 1.0  
 * @time 2016-01-08 08:38:20  
 */  
(function(obj) {  
    var defaultTitle = '通知栏标题';  
    var defaultContent = '通知内容';  
    var defaultTicker = '通知提示';  
    var defaultNotifyId = 1000;  
    var defaultNumber = 1;  
    /**  
     * plusReady  
     * @param {type} callback  
     * @returns {Window}  
     */  
    obj.plusReady = function(callback) {  
        if (window.plus) {  
            setTimeout(function() { //解决callback与plusready事件的执行时机问题(典型案例:showWaiting,closeWaiting)  
                callback();  
            }, 0);  
        } else {  
            document.addEventListener("plusready", function() {  
                callback();  
            }, false);  
        }  
        return this;  
    };  
    /**  
     * @description 比较两个版本大小  
     * 比较版本大小,如果新版本nowVersion大于旧版本OldResourceVersion则返回true,否则返回false  
     */  
    function compareVersion(OldVersion, nowVersion) {  
        if (!OldVersion || !nowVersion || OldVersion == '' || nowVersion == '') {  

            return false;  
        }  
        //第二份参数 是 数组的最大长度  
        var OldVersionA = OldVersion.split(".", 4);  
        var nowVersionA = nowVersion.split(".", 4);  
        for (var i = 0; i < OldVersionA.length && i < nowVersionA.length; i++) {  
            var strOld = OldVersionA[i];  
            var numOld = parseInt(strOld);  
            var strNow = nowVersionA[i];  
            var numNow = parseInt(strNow);  
            //小版本到高版本  
            if (numNow > numOld  
                //||strNow.length>strOld.length  
            ) {  
                return true;  
            } else if (numNow < numOld) {  
                return false;  
            }  
        }  
        //如果是版本  如 1.6 - 1.6.1  
        if (nowVersionA.length > OldVersionA.length && 0 == nowVersion.indexOf(OldVersion)) {  
            return true;  
        }  
    };  
    /**  
     * @description 通过push功能来推送消息  
     */  
    obj.sendNotificationByPush = function() {  
        var options = {  
            cover: false  
        };  
        var str = ": 欢迎使用Html5 Plus创建本地消息!";  
        plus.push.createMessage(str, "LocalMSG", options);  
    };  
    (function() {  
        /**  
         * @constructor 创建通知栏进度条构造函数  
         */  
        function NotificationCustom() {  
            if (plus.os.name != 'Android') {  
                return;  
            }  
            //当前版本号  
            var SystemVersion = plus.os.version;  
            var Context = plus.android.importClass("android.content.Context");  
            var main = plus.android.runtimeMainActivity();  
            var NotificationManager = plus.android.importClass("android.app.NotificationManager");  
            var nm = main.getSystemService(Context.NOTIFICATION_SERVICE)  
                // Notification build 要android api16以上才能使用(4.1.2以上)  
            var Notification = null;  
            if (compareVersion('4.1.1', SystemVersion) == true) {  
                Notification = plus.android.importClass("android.app.Notification");  
            } else {  
                Notification = plus.android.importClass("android.support.v4.app.NotificationCompat");  
            }  
            if (Notification) {  
                this.notifyManager = nm;  
                this.mNotificationBuild = new Notification.Builder(main);  
                //设为true代表常驻状态栏  
                this.mNotificationBuild.setOngoing(false);  
                this.mNotificationBuild.setContentTitle(defaultTitle);  
                this.mNotificationBuild.setContentText(defaultContent);  
                this.mNotificationBuild.setTicker(defaultTicker);  
                //默认的push图标  
                this.mNotificationBuild.setSmallIcon(17301620);  
                //设置默认声音  
                //console.log('默认:'+plus.android.importClass("android.app.Notification").DEFAULT_SOUND);  
                this.mNotificationBuild.setDefaults(plus.android.importClass("android.app.Notification").DEFAULT_SOUND);  
                //this.mNotificationBuild.setNumber(defaultNumber)  
            }  
        };  
        /**  
         * @description 给android通知栏发送通知  
         * @param {String} title 标题  
         * @param {String} content  内容  
         * @param {String} tickerTips  提示  
         * @param {Number} notifyId id,默认为1000  
         */  
        NotificationCustom.prototype.setNotification = function(title, content, tickerTips,notifyId) {  
            if (this.mNotificationBuild == null ||  
                this.notifyManager == null) {  
                return;  
            }  
            notifyId = (typeof(notifyId)=='number')?notifyId:defaultNotifyId;  
            title = title || defaultTitle;  
            content = content || defaultContent;  
            tickerTips = tickerTips || defaultTicker;  
            this.mNotificationBuild.setContentTitle(title);  
            this.mNotificationBuild.setContentText(content);  
            this.mNotificationBuild.setTicker(tickerTips);  
            //默认有声音  
            this.mNotificationBuild.setDefaults(plus.android.importClass("android.app.Notification").DEFAULT_SOUND);  
            this.notifyManager.notify(notifyId, this.mNotificationBuild.build());  
        };  
        /**  
         * @description 设置进度条  
         * @param {Number} progress  
         * @param {String} title 标题  
         * @param {String} content  内容  
         * @param {String} tickerTips  提示  
         * @param {Number} notifyId id,默认为1000  
         */  
        NotificationCustom.prototype.setProgress = function(progress, title, content, tickerTips,notifyId) {  
            if (this.mNotificationBuild == null ||  
                this.notifyManager == null) {  
                return;  
            }  
            notifyId = (typeof(notifyId)=='number')?notifyId:defaultNotifyId;  
            title = title || '正在下载';  
            content = content || '正在下载';  
            tickerTips = tickerTips || '进度提示';  
            //          tickerTips = tickerTips || defaultTicker;  
            this.mNotificationBuild.setContentTitle(title);  
            this.mNotificationBuild.setContentText(content);  
            this.mNotificationBuild.setTicker(tickerTips);  
            //进度条显示时,默认无声音  
            this.mNotificationBuild.setDefaults(0);  
            this.mNotificationBuild.setProgress(100, progress, false);  
            this.notifyManager.notify(notifyId, this.mNotificationBuild.build());  
        };  
        /**  
         * @description 完成进度条  
         * @param {String} title 标题  
         * @param {String} content  内容  
         * @param {String} tickerTips  提示  
         * @param {Number} notifyId id,默认为1000  
         */  
        NotificationCustom.prototype.compProgressNotification = function(title, content, tickerTips,notifyId) {  
            if (this.mNotificationBuild == null ||  
                this.notifyManager == null) {  
                return;  
            }  
            notifyId = (typeof(notifyId)=='number')?notifyId:defaultNotifyId;  
            title = title || '进度条显示完毕';  
            content = content || '进度条显示完毕';  
            tickerTips = tickerTips || '进度提示';  
            this.mNotificationBuild.setContentTitle(title);  
            this.mNotificationBuild.setContentText(content);  
            this.mNotificationBuild.setTicker(tickerTips);  
            this.mNotificationBuild.setProgress(0, 0, false);  
            //默认有声音  
            this.mNotificationBuild.setDefaults(plus.android.importClass("android.app.Notification").DEFAULT_SOUND);  
            this.notifyManager.notify(notifyId, this.mNotificationBuild.build());  
        };  
        /**  
         * @description 清除通知栏信息  
         * @param {Number} notifyId id,默认为1000  
         */  
        NotificationCustom.prototype.clearNotification = function(notifyId) {  
            notifyId = (typeof(notifyId)=='number')?notifyId:defaultNotifyId;  
            if(this.notifyManager){  
                this.notifyManager.cancel(notifyId);  
            }         
        };  
        /**  
         * @description 清除所有通知栏信息  
         */  
        NotificationCustom.prototype.clearAllNotification = function() {  
            if(this.notifyManager){  
                this.notifyManager.cancelAll();  
            }         
        };  
        obj.plusReady(function() {  
            obj.NotificationUtil = new NotificationCustom();  
        });  
    })();  

})(window.NjsPhoneApi = {});

调用方法示例:
显示普通通知:

NjsPhoneApi.NotificationUtil.setNotification('测试标题'+staticI,'测试内容');

显示进度条代码:

function testProgress() {  
        //插件调用  
        NjsPhoneApi.NotificationUtil.setNotification("新版下载", "开始下载");  
        var current = 0;  
        NjsPhoneApi.NotificationUtil.setProgress(current); //插件调用  
        function progress() {  
            setTimeout(function() {  
                current += 1;  
                NjsPhoneApi.NotificationUtil.setProgress(current);  
                if(current>=100){  
                     NjsPhoneApi.NotificationUtil.compProgressNotification("下载完成");  
                }else{  
                    progress();  
                }  
            }, 100);  
        };  
        progress();  
    };  
testProgress();//调用显示进度条

取消单条通知:(传入参数为id,不传采用默认id)

NjsPhoneApi.NotificationUtil.clearNotification();

取消所有通知:

NjsPhoneApi.NotificationUtil.clearAllNotification();

另外: 支持自定义id的通知,也就是说可以通过传入不同的id,同时显示不同的通知

效果图1:
效果图2:
示例源码:鉴于有一些朋友会有各式各样的奇怪错误,所以这里单独写了一个示例,测试了android机型(华为,联想)都是可以正常使用的.
示例源码中采用的是默认id

15 关注 分享
蔡繁荣 郑家好人 wx_0553@163.com BirdZhang 雪之梦技术驿站 gaus zhuhong02199@163.com ws初学者 internetdc 786914253@qq.com 漠 1783477613@qq.com 810726685@qq.com qhs_111@126.com 377613362@qq.com

要回复文章请先登录注册

toy21@163.com

toy21@163.com

这个功能很强大,如果要做点击回调。要怎么调?
2019-08-19 10:16
510450106@qq.com

510450106@qq.com

请问有谁在uniapp里使用过
2019-06-05 19:05
377613362@qq.com

377613362@qq.com

楼主 可以给一个示例源码参考学习吗
2019-05-25 16:26
qhs_111@126.com

qhs_111@126.com

6666666找了3天终于找到了想要的了。楼主大赞
2019-05-11 21:34
FLB

FLB

var R = plus.android.importClass("android.R");
this.mNotificationBuild.setSmallIcon(R.drawable.stat_sys_download);

图标替换,这是安卓自带的下载图标

图标参考
https://www.cnblogs.com/penghuster/p/4909930.html
2019-04-01 11:08
淘券券

淘券券

回复 小白啊:
其他不能操作解决了没
2018-11-26 16:23
lykli1234@qq.com

lykli1234@qq.com

马一个
2018-07-27 15:57
ouweican@126.com

ouweican@126.com

求图标替换
2018-03-21 15:42
漠

谢谢
2018-01-30 11:13
小白啊

小白啊

正在下载的时候,其他操作用不了
2017-12-08 11:26
cxian

cxian

进度条mark
2017-11-13 16:58
505744817@qq.com

505744817@qq.com

mask 消息推送、下载进度条
2017-08-11 10:54
崔岩松

崔岩松

不错!
2017-07-26 13:43
internetdc

internetdc

mark
2017-06-21 14:50
爆栈工程师

爆栈工程师

mark
2017-04-01 16:06
zhuhong02199@163.com

zhuhong02199@163.com

回复 NewsNing:
那个图标怎么替换知道吗?谢谢
2017-03-14 19:16
zhuhong02199@163.com

zhuhong02199@163.com

回复 比尔:
我也想问一下这个图标该怎么替换呢?谢谢
2017-03-14 18:18
zhuhong02199@163.com

zhuhong02199@163.com

这个是只支持安卓4.1.2以上系统的吗?
2017-03-02 13:31
比尔

比尔

图标怎么修改? setSmallIcon(17301620) 这个值怎么计算的?
2017-02-17 13:57
1246165435@qq.com

1246165435@qq.com

在模拟器上运行是正常的,在真机上就报错了
2016-11-27 18:42
雪之梦技术驿站

雪之梦技术驿站

看起来很不错,先赞一下
2016-11-18 08:41
yangzhou_yz@qq.com

yangzhou_yz@qq.com

怎么在通知栏中下载完成后点击通知信息后,重启对应的应用
2016-07-05 11:59
qixi

qixi

mark
2016-06-03 09:31
撒网要见鱼

撒网要见鱼 (作者)

回复 6秒真男人:
我刚刚传了一个示例源码,你可以下载运行,然后找找原因. 希望你解决后能将错误原因也反馈下.以供大家借鉴参考.
2016-01-07 14:01
6秒真男人

6秒真男人

回复 撒网要见鱼:
按照你写的3个代码直接贴到页面上的,启动就报这个错了
2016-01-07 11:53
撒网要见鱼

撒网要见鱼 (作者)

回复 6秒真男人:
那个关键代码你又引用么?正常来说引用了就会有PhoneApiCustom.NotificationUtil的.
还有就是这个只是android的API. ios无法用的
2016-01-07 11:51
6秒真男人

6秒真男人

PhoneApiCustom.NotificationUtil.setNotification('测试标题','测试内容');
这句话报错:
Uncaught TypeError: Cannot call method 'setNotification' of undefined
2016-01-07 11:20
郑家好人

郑家好人

顶起!!
2016-01-07 08:22
NewsNing

NewsNing

给楼主赞一个
2016-01-06 19:00