为了账号安全,请及时绑定邮箱和手机立即绑定

Cordova开发App入门(三)消息推送

图片描述

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

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

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

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

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


安装插件
cordova plugin add cordova-plugin-local-notification

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

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

cordova-plugin-device # 获取设备信息
cordova-plugin-badge # 未读消息数徽章显示

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

Javascript代码
zyd.notification = {
   look: false,
   init : function () {
       try {
            setInterval(function(){
                if(!zyd.notification.look){
                    cordova.plugins.notification.local.schedule({
                        id: Math.random(),
                        title: '会议通知',
                        text: '今天下午17点30分 \n塔1C座2306室-会议室\n开年终会议... ',
                        foreground: true,
                        actions: [
                            { id: 'yes', title: '确认查看' },
                            { id: 'no',  title: '忽略' }
                        ]
                  });
                  zyd.notification.look = true;
                  cordova.plugins.notification.local.un('yes', zyd.notification.success);
                  cordova.plugins.notification.local.on('yes', zyd.notification.success);

                  cordova.plugins.notification.local.un('no', zyd.notification.ignore);
                  cordova.plugins.notification.local.on('no', zyd.notification.ignore);
                }else{
                    console.log("有未读的消息,暂不显示通知");
                }
            }, 5000);
       } catch (err) {
            alert("发生异常了。" + err);
       }
   },
   success: function(notification, eopts){
          zyd.notification.look = false;
          alert("消息详情:消息标题["+notification["title"]+"], 消息内容["+notification["text"]+"]")
          for(var i in eopts){
              console.log(i + "==" + eopts[i]);
          }
          for(var i in notification){
              console.log(i + "==" + notification[i]);
          }
   },
   ignore: function(notification, eopts){
        zyd.notification.look = false;
   }
};

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

zyd.notification.init();

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

总结

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

①安装插件

②编写推送相关的代码

源码地址:cordova-study

点击查看更多内容
7人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
9132
获赞与收藏
5502

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消