效果图:

一、登录极光官网

        进入【服务中心】-【开发者平台】

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

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

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

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

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

1. 安装JPush插件

2. 安装JCore插件

3. 导入插件到项目

4. 插件配置

打卡manifest.json的源码视图,找到 nativePlugins 节点
(1) 配置JG-JPUSH,设置Android和ios的应用包名

(2) 配置JG-JCore,设置Android和ios的应用包名极光官网信息的AppKey

三、编写代码

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

<script>

const jpushModule = uni.requireNativePlugin('JG-JPush');
export default {
	onLaunch() {
		// #ifdef APP-PLUS
		jpushModule.initJPushService();
		jpushModule.setLoggerEnable(true);
		// // 设置别名
		// 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
	},
	methods: {
		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);
						}
					}
				});
			}
		}
	},
}

</script>

四、调试运行

【Hx中运行】=>【运行到手机或模拟器】=>【制作自定义调试基座】

五、测试推送

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

Logo

前往低代码交流专区

更多推荐