uniapp APP消息推送方案

Posted 2023-04-11 Jelly115

提示：本文实例消息推送使用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的各个界面_Chandler丶的博客-CSDN博客

---

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 进行全局监听

---

个推支持海外消息推送，助力APP扬帆出海

在全球化的浪潮之下，越来越多的国内开发者选择“乘风出海”。消息推送作为APP连接用户的有效途径，成为开发者进军海外市场的刚需。但由于海内外网络环境、应用生态等的差异，APP在海外推送的过程中，也面临着消息通道建设、海外用户精细运营、数据安全合规等方面的诸多挑战。

为此，个推推出海外消息推送解决方案，帮助APP高效整合海外消息通道，构建智能、精细、高效的用户触达体系，促进APP海外业务快速增长。

多链路触达体系，提升用户触达

用户触达通道，是APP与用户高效沟通的“桥梁”。但在APP构建海外消息通道的过程中，也存在着不少“隐痛”：一方面，自建通道或逐一对接各厂商海外通道，不仅费时费力且成本居高不下；另一方面，面对全球复杂的网络环境，若APP只采用FCM或APNs的系统通道，又会遇到消息送达率的瓶颈。

个推为APP构建了海外多链路触达体系，助其打破用户触达的壁垒。基于APP海外推送需求，个推不仅提供自有在线渠道，无缝对接FCM、APNs系统通道，还高效整合了小米、华为、荣耀、魅族、 OPPO等厂商推送能力。APP只需一次集成即可接入多厂商海外推送服务，实现在线、离线推送，保障消息稳定、高效送达。同时，个推还支持国际短信推送，帮助APP进一步拓宽海外用户触达渠道，全面提升消息到达率。

依托海外多链路触达体系， APP不仅可以自选消息下发通道触达海外用户，还能通过消息并发、分发、补发等方式，提高消息到达率。此外，个推还提供离线消息库、超长消息自动截短、厂商推送余量查询管理等能力，支持各阶段、各渠道推送数据后效分析，帮助APP科学管理渠道资源，以更低的成本实现用户触达效率的全面升级。

多样化推送策略，提升用户转化

消息点击率与运营转化效果密不可分。

基于海外推送场景，个推支持丰富的消息展示样式以及亮屏推送、A/B Test、消息分组、定时推送等消息运营工具，帮助APP精细化触达海外目标人群，提高消息点击转化率，提升用户活跃与留存。

保障数据合规，护航APP“扬帆出海

数据安全是全球关注的焦点，也是APP出海的“必修课”。

为全方位护航APP扬帆出海，个推构建了全球化的云服务集群，实现全球服务器多节点部署，保障海外推送的稳定性。此外，个推还提供分层权限管理、鉴权体系、日志监控、敏感内容审核过滤等多重保护机制，帮助APP降低运营风险，全方位保障数据安全、系统安全和内容安全。

深耕移动开发领域十余年，个推通过安全、稳定、可靠的产品及服务赢得了全球开发者的信赖。大航海时代，个推还将持续创新产品和技术服务，帮助更多开发者提升增长效率、开拓海外市场版图。

合作咨询 

如果您对个推海外推送解决方案感兴趣，欢迎到个推官网添加个推专属顾问，为您提供一对一服务！