前言

关于uniapp的通知栏消息推送,uniapp是有提供详细的官方解决方案的 【unipush】(https://uniapp.dcloud.net.cn/unipush-v2.html#) ,有兴趣的朋友可以去研读一番。

一、注册极光开发者,登录进入开发者平台

1.进入【服务中心】=》【开发者平台】

2.创建应用

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

4.设置应用包名,点击下一步(Andorid) 如果有IOS端需求继续配置IOS相关信息

5.查看应用信息后续需要使用

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

1.插件市场搜索并安装JPush插件

2.插件市场搜索并安装JCore插件

3.打开manifest.json导入插件到项目

4.在源码视图进行插件配置

三、编写代码

  • 在App.vue中编写如下代码:
<script>
	// #ifdef APP-PLUS
	var jpushModule = uni.requireNativePlugin("JG-JPush");
	var audioObj = uni.getBackgroundAudioManager();
	// #endif
	export default {
		data() {
			return {};
		},
		computed: {},
		computed: {},
		methods: {
			getRegistrationID() { //获取registerID
				jpushModule.getRegistrationID(result => {
					let registerID = result.registerID
					console.log(registerID)
					this.registrationID = registerID
					uni.setStorageSync("registerID", registerID)
				})
			},
			getNotificationEnabled() {
				if (uni.getSystemInfoSync().platform == "ios") {
					jpushModule.requestNotificationAuthorization((result) => {
						let status = result.status
						if (status < 2) {
							this.noticMsgTool()
						}
					})
				} else {
					jpushModule.isNotificationEnabled((result) => { //判断android是否打开权限
						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);
							}
						}
					});
				}
			},
		},
		onLaunch() {
			// #ifdef APP-PLUS
			jpushModule.initJPushService();
			jpushModule.setLoggerEnable(true);
			plus.screen.lockOrientation("portrait-primary");
			// 设置别名
                        jpushModule.setAlias({
                                'alias': this.lxzl.getUserInfo().userId + '',
                                'sequence': 1
                        })
			//监听 极光推送连接状态
			this.getNotificationEnabled();
			jpushModule.addConnectEventListener(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/taskDetail/taskDetail?' + 'woopId=' + woopId
					});
				}
			});
			uni.$on('connectStatusChange', (connectStatus) => {
				var connectStr = ''
				if (connectStatus == true) {
					connectStr = '已连接'
					// this.getRegistrationID()
				} else {
					connectStr = '未连接'
				}
				console.log('监听到了连接状态变化 --- ', connectStr)
				this.connectStatus = connectStr
			})
			jpushModule.isPushStopped(res => {
				// code   0已停止推送  1未停止推送
				const { code } = res
				console.log(res, '安卓连接状态');
			})
			//#endif
		},
		onShow() {},
		onHide() {},
	}
</script>

四、真机调试运行(需制作自定义调试基座)

  • 注:标准基座只包含了uniapp基础的一些框架内部的东西,但是如果我们要调试第三方的插件SDK,就需要自定义基座

五、推送测试(直接通过极光后台发送)

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐