参考文章:http://ask.dcloud.net.cn/article/503

源码地址下载

如题,分享一个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

一个Notification 进度条插件(android,NJS实现,直接就可使用)的更多相关文章

  1. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  2. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  3. JQuery中简约的进度条插件推荐

    JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...

  4. 简单的jquery进度条插件LineProgressbar.js,myProgress.js

    参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...

  5. HTML5圆形百分比进度条插件circleChart

    在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...

  6. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  7. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  8. pace.js – 加载进度条插件

    这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...

  9. vue2-loading-bar 一款基于Vue2的进度条插件

    自学了N久vue,奈何没有练手项目,终于决心拿个东西来试试手.基于对音乐的热爱,选择的第一个demo是音乐播放器.一般播放器都有进度条,于是无意间找到这个插件,就是vue2-loading-bar,这 ...

随机推荐

  1. Solution for latex error:”Unknown graphics extension: .eps“ or "Can not find XXX"

    Sample code: \begin{figure*} \centering % Requires \usepackage{graphicx} \includegraphics[width=7in] ...

  2. HDU-4686 Arc of Dream 构造矩阵

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4686 因为ai = ai-1*AX+AY ,bi = bi-1*BX+BY ,那么ai*bi=AX*B ...

  3. HDU 4497 GCD and LCM (数论)

    题意:三个数x, y, z. 给出最大公倍数g和最小公约数l.求满足条件的x,y,z有多少组. 题解:设n=g/l n=p1^n1*p2^n2...pn^nk (分解质因数 那么x = p1^x1 * ...

  4. Android问题-DelphiXE5编义时提示找不到“连接器(arm-linux-androideabi-ld.exe)"

    问题现象:DelphiXE5编义时提示找不到“连接器(arm-linux-androideabi-ld.exe)" 问题提示:Checking project dependencies... ...

  5. 在CentOS 6.2上安装 MemcacheQ 最新版

    1.      安装 yum install gcc cc make libevent libevent-devel 2.      安装Berkeley DB 下载:http://www.oracl ...

  6. IOS开发--C语言入门--如何结合Terminal和Vim开发C语言程序

    一直以来都想着挤出时间,记录开发之路的点点滴滴(现在记录已成回忆),和大家一起分享,开发人员总是在沟通和相互学习中提高自身的能力.路过的大神也好初学者也罢,若发现文章中又观点不对的,还望大家指出. 现 ...

  7. NSThead

    每个iOS应用程序都有个专门用来更新显示UI界面.处理用户的触摸事件的主线程,因此不能将其他太耗时的操作放在主线程中执行,不然会造成主线程堵塞(出现卡机现象),带来极坏的用户体验.一般的解决方案就是将 ...

  8. ios 说一说UINavigationController 的堆栈

    iOS的界面堆栈管理比android的要好用很多. 这里写两点:一点是 如何重回前面的vc,而不是push一个alloc的新界面.第二点就是判断当前堆栈显示的vc是何vc. vc堆栈: vc1-> ...

  9. 写了几年代码了,苦苦追寻,应该沉淀下来了,好好研究。net底层框架,以及较好的分层框架

    几年码农了.像沉淀下来.写一下自己的分层框架,尤其是逻辑层和orm层.数据訪问层.一切靠自己.网上一大堆框架,可是感觉各有优缺点.于是萌生了自己写适合自己的底层訪问框架?亲们,你们有适合自己的框架么?

  10. Cocos2d-x 3.0心得(01)-图片载入与混合模式

    近期開始用cocos2dx 3.0做东西,略有心(cao)得(dian),略微作下记录吧. v3.0相对v2.2来说,最引人注意的,应该是对触摸层级的优化.和lambda回调函数的引入(嗯嗯.不枉我改 ...