撒网要见鱼
撒网要见鱼
  • 发布:2016-01-06 18:57
  • 更新:2023-07-21 14:52
  • 阅读:18877

【分享】一个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

18 关注 分享
蔡繁荣 郑家好人 w***@163.com BirdZhang 雪之梦技术驿站 gaus z***@163.com ws初学者 internetdc 7***@qq.com 漠 1***@qq.com 8***@qq.com q***@126.com 3***@qq.com aliang888 我想和你在一起 一抱一个胖猪猪

要回复文章请先登录注册

a***@126.com

a***@126.com

按照你的手机端还是没有消息提醒,是要打包之后才能生效吗?
2023-07-21 14:52
1***@qq.com

1***@qq.com

消息渠道怎么自定义声音提醒?
2023-06-19 18:04
1***@qq.com

1***@qq.com

你用的什么预览的
2021-04-01 16:59
h***@163.com

h***@163.com

应用打包后push推送就不管用了呢?
2021-03-22 18:07
1***@qq.com

1***@qq.com

这个适不适用APP
2021-03-05 17:20
小小菜76055421

小小菜76055421

回复 2***@qq.com :
Android10可以用吗,好像试了之后,发现并没有通知栏
2021-01-27 16:21
Sean_2020

Sean_2020

如果想在 通知消息里边增加一些业务处理应该怎么写?比如定位,这样是不是可以解决后台定位保活的问题?
2020-12-04 14:18
Sean_2020

Sean_2020

回复 Sean_2020 :
需要等待 plusReady 执行完之后再执行
2020-12-03 18:48
Sean_2020

Sean_2020

调用 NjsPhoneApi.NotificationUtil.setNotification('测试标题'+staticI,'测试内容'); 的时候
一直提示 setNotification 找不到,什么问题?
2020-12-03 18:13
小权

小权

回复 小权 :
进程阻塞?还是开发原生插件吧
2020-01-16 16:13