uniapp对接极光推送,实现消息推送功能

通过集成JG-JPush和JG-JCore插件,可以在应用中添加消息推送功能,向用户发送通知、消息等。这对于提升用户体验、增加用户粘性非常有帮助‌。

效果图:

一、登录极光官网

官网链接:portalicon-default.png?t=O83Ahttps://www.jiguang.cn/console/#/home点击去创建应用

创建应用:填写应用名称和图标(填写项目名称,项目logo就行,也可填写其他的)

 选择【消息推送】服务,点击下一步

设置应用包名(图中仅为示例,最好是×××.×××.××格式),点击保存,点击下一步

 点击【推送设置】可查看android和ios的AppKey和Secret,后续需要使用

二、安装和配置uniapp极光插件 

1. 安装JPush插件

极光推送 JPush 官方 SDK - DCloud 插件市场

2. 安装JCore插件 

极光推送 JCore 官方 SDK - DCloud 插件市场

安装完后可以在我的插件里查看到购买的插件,链接:DAccount Service

3. 导入插件到项目 

4. 插件配置

打卡manifest.json的源码视图,找到 nativePlugins 节点
配置JG-JCore,设置JPUSH_APPKEY_ANDROID

三、编写代码

在App.vue中编写如下代码:(注意:极光推送信息通知回调中那个路径要改,路径就是你点击通知会打开到这个路径对应的页面) 

<script>
	// #ifdef APP-PLUS
	var jpushModule = uni.requireNativePlugin("JG-JPush");
	// #endif

	export default {
		methods: {
			// 通知消息
			getJpushModule() {
				// #ifdef APP-PLUS
				//禁止横屏
				plus.screen.lockOrientation("portrait-primary");

				//极光推送
				jpushModule.setLoggerEnable(true);
				jpushModule.initJPushService()
				// // 设置别名
				// jpushModule.setAlias({
				// 	alias: '',
				// 	sequence: 1
				// });

				this.getNotificationEnabled();
				//监听 极光推送连接状态
				jpushModule.addConnectEventListener((result) => {
					console.log('监听 极光推送连接状态', result);
					let connectEnable = result.connectEnable;
					uni.$emit('connectStatusChange', connectEnable);
				});
				//极光推送的消息通知回调
				jpushModule.addNotificationListener((result) => {
					jpushModule.setBadge(0);
					plus.runtime.setBadgeNumber(0);
					let notificationEventType = result.notificationEventType;
					// let woopId = result.extras && result.extras.dataType === 'woop' && result.extras.value;
					console.log('通知', result, notificationEventType);
					// 点击事件
					if (notificationEventType == 'notificationOpened') {
						uni.navigateTo({
							url: '/pages/mine-merchant/order-management/order-management'
						});
					}
				});
				uni.$on('connectStatusChange', (connectStatus) => {
					var connectStr = '';
					if (connectStatus == true) {
						connectStr = '已连接';
						this.getRegistrationID();
					} else {
						connectStr = '未连接';
					}
					console.log('监听到了连接状态变化 --- ', connectStr);
				});
				//#endif
			},
			getRegistrationID() {
				jpushModule.getRegistrationID((result) => {
					let registerID = result.registerID;
					console.log('获取registerID', registerID);
					this.setSto('registerID', registerID);
				});
			},
			getNotificationEnabled() {
				if (uni.getSystemInfoSync().platform == 'ios') {
					jpushModule.requestNotificationAuthorization((result) => {
						let status = result.status;
						if (status < 2) {
							this.noticMsgTool();
						}
					});
				} else {
					jpushModule.isNotificationEnabled((result) => {
						console.log('判断android是否打开权限1:true,0:false', result);
						if (result.code == 0) {
							//如果为0则表示 未打开通知权限
							this.noticMsgTool();
						}
					});
				}
			},
			noticMsgTool() {
				if (uni.getSystemInfoSync().platform == 'ios') {
					//苹果打开对应的通知栏
					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);
							}
						}
					});
				} else {
					//android打开对应的通知栏
					var main = plus.android.runtimeMainActivity();
					var pkName = main.getPackageName();
					var uid = main.getApplicationInfo().plusGetAttribute('uid');
					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);
							}
						}
					});
				}
			},
		},
		async onLaunch() {
			//#ifdef APP-PLUS
			this.getJpushModule();
			//#endif
		},
	}
</script>

四、调试运行

五、测试推送

ok,结束,手机上就会收到推送通知。

### UniApp实现极光推送离线消息推送的方法 为了使应用程序能够在后台或完全关闭的情况下接收来自极光推送的消息,在UniApp项目中集成厂商通道是必要的措施之一[^2]。 #### 创建并配置极光推送服务 在开始编码之前,需先完成极光推送服务平台上的准备工作: 1. 登录至【服务中心】下的【开发者平台】。 2. 进入【概览】页面中的【创建应用】选项来新建一个应用实例,并指定其名称与图标样式。 3. 当选择启用【消息推送】特性之后,则按照指示逐步设定好该应用对应的包名信息等内容直至最终确认提交。 4. 完成上述操作后返回到应用详情页内的【设置】->【应用设置】部分获取重要的`AppKey`以及`Master Secret`参数以便稍后的开发环节调用[^3]。 #### 配置厂商通道支持离线推送 由于仅依靠极光推送SDK不足以覆盖所有的场景特别是当目标设备的应用处于离线状态时,因此还需要额外接入各主流手机制造商所提供的官方推送渠道API接口。这一步骤通常涉及注册成为相应品牌的开发者成员身份并通过审核流程获得权限访问特定于品牌的通知发送能力。对于具体的实施细节可以参照文档说明进行相应的环境搭建和服务端对接工作[^4]。 #### 编写客户端代码处理接收到的信息 下面给出了一段用于监听并响应远程下发指令的JavaScript片段作为示范用途: ```javascript import jpush from 'jiguang/jpush' export default { onLoad() { this.initJPush() }, methods: { initJPush() { const that = this; // 初始化 JPush SDK jpush.init({ appkey: 'your_app_key_here', // 替换成自己的 App Key channel: 'developer-default' }); // 注册成功回调函数 jpush.on('register', function (msgId) { console.log(`Register Success, msgId=${msgId}`); // 设置别名(可选) jpush.setAlias({ alias: `alias_${new Date().getTime()}` }).then(res => { console.log('Set Alias:', res); }); }); // 收到自定义消息事件处理器 jpush.on('customMessageReceive', function (message) { console.log('Received Custom Message:', message); // 处理消息逻辑... }); // 接收通知打开事件 jpush.on('notificationOpen', function (notification) { console.log('Notification Opened:', notification); // 执行跳转或者其他交互行为... }) } } } ``` 这段脚本展示了怎样通过初始化极光推送组件并与之建立连接从而准备接受可能到来的数据包;同时也包含了针对不同类型通信内容所设计的不同类型的侦听器用来捕捉和解析实际传来的有效载荷数据[^5]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值