uniapp APP消息推送方案实现全过程

 更新时间:2023年01月06日 10:37:13   作者:Jelly115  
前段时间开发app的时候要开始做消息推送功能了,下面这篇文章主要给大家介绍了关于uniapp APP消息推送方案实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

提示:本文实例消息推送使用uniapp官方的unipush推送:

项目场景:该项目是uniapp + uniCloud 项目,APP端的消息推送使用 html+ 与原生实现交互

1.开通推送消息

– uniapp 中的manifest.json文件中找到App模块配置,勾选push消息推送模块
– dcloud开发者中心后台开通unipush功能及各种配置项
– 安卓离线消息推送是需要配置各大厂商,IOS离线不需要,但需要推送证书

2.判断手机权限

- 需求:判断是否开启通知权限,跳转对应设置页

  /**
     * 设置手机通知权限
     */
    setPermissionsInform() {
        // #ifdef APP-PLUS  
        if (plus.os.name == 'Android') { // 判断是Android
            var main = plus.android.runtimeMainActivity();
            var pkName = main.getPackageName();
            var uid = main.getApplicationInfo().plusGetAttribute("uid");
            var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");
            //android.support.v4升级为androidx
            if (NotificationManagerCompat == null) {
                NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");
            }
            var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
            // 未开通‘允许通知'权限,则弹窗提醒开通,并点击确认后,跳转到系统设置页面进行设置  
            if (!areNotificationsEnabled) {
                uni.showModal({
                    title: '通知权限开启提醒',
                    content: '您还没有开启通知权限,无法接受到消息通知,请前往设置!',
                    showCancel: false,
                    confirmText: '去设置',
                    success: function(res) {
                        if (res.confirm) {
                            var Intent = plus.android.importClass('android.content.Intent');
                            var Build = plus.android.importClass("android.os.Build");
                            //android 8.0引导  
                            if (Build.VERSION.SDK_INT >= 26) {
                                var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
                                intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
                            } else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0  
                                var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
                                intent.putExtra("app_package", pkName);
                                intent.putExtra("app_uid", uid);
                            } else { //(<21)其他--跳转到该应用管理的详情页  
                                intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
                                var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
                                intent.setData(uri);
                            }
                            // 跳转到该应用的系统通知设置页  
                            main.startActivity(intent);
                        }
                    }
                });
            }
        } else if (plus.os.name == 'iOS') { // 判断是ISO
            var isOn = undefined;
            var types = 0;
            var app = plus.ios.invoke('UIApplication', 'sharedApplication');
            var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');
            if (settings) {
                types = settings.plusGetAttribute('types');
                plus.ios.deleteObject(settings);
            } else {
                types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');
            }
            plus.ios.deleteObject(app);
            isOn = (0 != types);
            if (isOn == false) {
                uni.showModal({
                    title: '通知权限开启提醒',
                    content: '您还没有开启通知权限,无法接受到消息通知,请前往设置!',
                    showCancel: false,
                    confirmText: '去设置',
                    success: function(res) {
                        if (res.confirm) {
                            var app = plus.ios.invoke('UIApplication', 'sharedApplication');
                            var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
                            plus.ios.invoke(app, 'openURL:', setting);
                            plus.ios.deleteObject(setting);
                            plus.ios.deleteObject(app);
                        }
                    }
                });
            }
        }
        // #endif  
    } ,
    /**

可以将该方法放在APP.vue文件的onShow生命周期或是消息中心的onShow中去判断用户是否开启通知权限

-- Android跳转系统设置Settings的各个界面

3.推送消息到手机APP:

需求:当有消息推送时,推送到手机状态栏中

3.1 获取客户端推送标识信息 cid

		// 必须要获取到cid后才能接收推送信息
        const cid = plus.push.getClientInfo()
        console.log(cid);

3.2 创建推送消息

		//plus.push.createMessage( content, payload, option );
		//在本地直接创建推送消息,并添加到系统消息中心。
		content: ( String ) 必选
		消息显示的内容,在系统通知中心中显示的文本内容。
		
		payload: ( String | Object ) 可选
		消息承载的数据,可根据业务逻辑自定义数据格式。
		
		options: ( MessageOptions ) 可选
		创建消息的额外参数,参考
		https://www.html5plus.org/doc/zh_cn/push.html#plus.push.MessageOptions
		
		plus.push.createMessage('我是你爸爸!'); // 创建本地推送
		plus.runtime.setBadgeNumber(1)  // 设置角标

3.3 消息事件

- 实现手机状态栏推送功能逻辑,在APP.vue中添加推送消息事件监听器 ,监听到有新消息时,使用createMessage API创建消息,添加点击事件 点击后进行不同操作

  1. 对于安卓的在线和离线消息以及IOS的离线消息都是走的click监听事件。也就是说可以直接将消息推送到手机通知栏中,然后点击消息的时候,可以触发应用监听的点击事件,跳转到对应页面。
  2. receive事件,可以监听到后端推送过来的消息,触发相应的回调,使用createMessage在本地创建消息
		// 添加推送消息事件监听器 click
		plus.push.addEventListener("click",(msg)=>{
		        console.log('msg............',msg);
		        if(msg.payload){
		        // 点击跳转对应页面
		            uni.navigateTo({
		                url:msg.payload
		            })
		        }
		},false)
		
		// 添加推送消息事件监听器 receive
		plus.push.addEventListener("receive",(msg)=>{
		    if("LocalMSG" == msg.payload){
		    }else{
		        if(msg.type=='receive'){
		            var options = {cover:false,title:msg.title};
		            // 创建本地推送
		            plus.push.createMessage(msg.content, msg.payload, options ); 
		         }  
		    }
		},false)

4. 消息页面的数据及数字角标

- 需求:当有消息推送时,要更新消息中心页面的数据和数字角标

1.在项目中定义请求消息列表的方法,将响应的数据存储到vuex中,供消息中心页面使用

// 消息页面的数据
	async getMsgData(){
	    let res = await this.$callFunction("userContent/getMsgType")
	    this.$u.vuex("msgData", res.result.data);
	    let msgCount = 0 // 数字角标
	    res.result.data.map((item)=>{
	        if(item._id!=5){
	            msgCount+=item.no_read_total
	        }
	    })
	    // 给tabbar的角标赋值
	    let tabbar_data = JSON.parse(JSON.stringify(this.TabbarList))
	    tabbar_data[3].count = msgCount
	    this.$u.vuex("TabbarList", tabbar_data);

2.监听消息的推送,如果接收到消息就更新消息列表数据和角标数字

	// --------监听推送的状态----------
	plus.push.addEventListener("receive", (msg) => {
	    console.log(getApp().globalData.followCount);
	    if(msg.payload.data.msg_type==501){
	        uni.$emit('followUpdate','update');
	    }
	    let {content, payload, options} = msgCreate(msg)
	
	    plus.push.createMessage(content, payload, options);
	    this.getMsgData()
	}, false)
  • 该功能的实现,主要重点在于数据的全局的传值,以及监听数据的变化,实时更新数据
  • 可以使用vuex或globalData来存储数据
  • nuve页面中可以使用$emit $on 进行全局监听

总结

到此这篇关于uniapp APP消息推送方案的文章就介绍到这了,更多相关uniapp APP消息推送方案内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中好用的数组对象排序方法分享

    JavaScript中好用的数组对象排序方法分享

    在日常工作中,我们经常需要对数组对象进行排序,尤其是在处理数据可视化需求中。本文将介绍一些简单而又实用的方法,帮助你实现对数组对象的某几个 key 进行排序
    2023-05-05
  • 莱鸟介绍window.print()方法

    莱鸟介绍window.print()方法

    这篇文章主要介绍了莱鸟介绍window.print()方法的相关资料,需要的朋友可以参考下
    2016-01-01
  • Bootstrap Scrollspy源码学习

    Bootstrap Scrollspy源码学习

    这篇文章主要介绍了Bootstrap Scrollspy源码学习,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript制作弹出层效果

    JavaScript制作弹出层效果

    弹出层效果大家在网站上经常遇到此功能,下面小编给大家分享一段js代码制作弹出层效果,代码简单易懂,非常不错,需要的朋友参考下吧
    2016-12-12
  • node.js的事件机制

    node.js的事件机制

    本文主要介绍了node.js的事件机制,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • Javascript动态创建表格及删除行列的方法

    Javascript动态创建表格及删除行列的方法

    这篇文章主要介绍了Javascript动态创建表格及删除行列的方法,涉及javascript动态操作表格的相关技巧,需要的朋友可以参考下
    2015-05-05
  • 微信小程序之滑动页面隐藏和显示组件功能的实现代码

    微信小程序之滑动页面隐藏和显示组件功能的实现代码

    这篇文章主要介绍了微信小程序之滑动页面隐藏和显示组件功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • 判断iOS、Android以及PC端的示例代码

    判断iOS、Android以及PC端的示例代码

    这篇文章主要给大家介绍了关于如何判断iOS、Android以及PC端的相关资料,主要是利用navigator.userAgent来实现,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
    2018-11-11
  • JS时间转换标准格式、时间戳转换标准格式的示例代码

    JS时间转换标准格式、时间戳转换标准格式的示例代码

    这篇文章主要介绍了JS时间转换标准格式、时间戳转换标准格式的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-05-05
  • JavaScript实现签名板功能

    JavaScript实现签名板功能

    签名板在网页应用中扮演着重要角色,它们能够记录用户的手写签名或者绘图,下面就跟随小编一起来学习一下如何使用JavaScript实现签名板功能
    2024-10-10

最新评论