查看: 779|回复: 0

[HTML代码] Cordova开发App入门(三)消息推送

发表于 2018-5-10 08:00:00

图片描述

如图,我们在使用App时,经常能碰到消息栏上app推送的消息,而现在比较常用的推送平台比如“极光”、“融云”等,一是付费,二是涉及到Android原生代码。噗,前面都说了,Cordova就是让普通用户可以开发App,既然如此,怎么容忍要写大量原生代码和配置呢。

So,今天要介绍的就是如何通过Cordova插件时间消息栏上的消息通知。
图片描述

注:浏览本文章前,请先了解以下内容

Cordova开发App入门(一)创建android项目

Cordova开发App入门(二)使用热更新插件


安装插件
  1. cordova plugin add cordova-plugin-local-notification
复制代码

该命令执行完成后,可以通过cordova plugin list查看已安装的插件列表

这时候可以看到除了cordova-plugin-local-notification插件外,另外又多出了两个插件

  1. cordova-plugin-device # 获取设备信息
  2. cordova-plugin-badge # 未读消息数徽章显示
复制代码

这两个插件都是cordova-plugin-local-notification必须依赖的,所以在安装cordova-plugin-local-notification时就自动安装了这里两个插件

Javascript代码
  1. zyd.notification = {
  2. look: false,
  3. init : function () {
  4. try {
  5. setInterval(function(){
  6. if(!zyd.notification.look){
  7. cordova.plugins.notification.local.schedule({
  8. id: Math.random(),
  9. title: '会议通知',
  10. text: '今天下午17点30分 \n塔1C座2306室-会议室\n开年终会议... ',
  11. foreground: true,
  12. actions: [
  13. { id: 'yes', title: '确认查看' },
  14. { id: 'no', title: '忽略' }
  15. ]
  16. });
  17. zyd.notification.look = true;
  18. cordova.plugins.notification.local.un('yes', zyd.notification.success);
  19. cordova.plugins.notification.local.on('yes', zyd.notification.success);
  20. cordova.plugins.notification.local.un('no', zyd.notification.ignore);
  21. cordova.plugins.notification.local.on('no', zyd.notification.ignore);
  22. }else{
  23. console.log("有未读的消息,暂不显示通知");
  24. }
  25. }, 5000);
  26. } catch (err) {
  27. alert("发生异常了。" + err);
  28. }
  29. },
  30. success: function(notification, eopts){
  31. zyd.notification.look = false;
  32. alert("消息详情:消息标题["+notification["title"]+"], 消息内容["+notification["text"]+"]")
  33. for(var i in eopts){
  34. console.log(i + "==" + eopts[i]);
  35. }
  36. for(var i in notification){
  37. console.log(i + "==" + notification[i]);
  38. }
  39. },
  40. ignore: function(notification, eopts){
  41. zyd.notification.look = false;
  42. }
  43. };
复制代码

然后在页面上通过以下命令调用

  1. zyd.notification.init();
复制代码

接下来就可以打包测试或者真机运行(本次是在模拟机上测试)
真机测试
图片描述

总结

Cordova实现消息推送,必须要注意的几点:

①安装插件

②编写推送相关的代码

源码地址:cordova-study



回复

使用道具 举报