uniApp消息推送(极光/阿里云)

目录

一、极光推送

1.1、在极光官网创建应用

1.2、插件下载

1.3、代码填充

1.4、发送通知/消息

二、阿里云推送

2.1、在阿里云官网创建应用

2.2、插件下载

 2.3、代码填充

2.4、发给后端的值(API类型的通知

扫描二维码关注公众号，回复： 16884805 查看本文章

一、极光推送

1.1、在极光官网创建应用

参考 极光文档 (jiguang.cn)=======》极光文档 > 极光推送 > 快速开始 > 创建应用

在官网创建应用，前提：uniapp项目已经有自己的Android包名。

1.2、插件下载

在插件市场下载对应的插件：

(1)极光JCore官方SDK 

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

(2)极光JPush官方SDK

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

(3)将下载的压缩包解压放在项目目录的nativeplugins文件夹下面(没有就自己新建一个)

(4)在项目的manifest.json中的App原生插件配置里面填写AppKey和AppSecret(应用在官网创建好之后就可以拿到)

1.3、代码填充

在App.vue页面的onLaunch生命周期里面，写入以下代码：

<script>
//插件调用
	const jpushModule = uni.requireNativePlugin('JG-JPush')
	export default {
		onLaunch: function() {
			//#ifdef APP-PLUS       
			jpushModule.setLoggerEnable(true);
			// 初始化函数
			jpushModule.initJPushService();
			jpushModule.addConnectEventListener(result => {
				let connectEnable = result.connectEnable
				console.log("jpush连接", connectEnable)
			})
			jpushModule.getRegistrationID(result => {
				// console.log("注册ID.....", result)
				this.registerID = result.registerID
				// uni.showToast({
				// 	title: result.registerID,
				// 	icon: "success",
				// })
				if (result.registerID != '') {
					uni.setStorageSync('registerID', result.registerID);
					console.log("存设备ID", this.registerID);
				}
			})

			jpushModule.isPushStopped(result => {
				let code = result.code
				console.log('连接状态回调', result)
			});
			// 设置别名
			jpushModule.setAlias({
				'alias': 'coder',
				'sequence': 1
			})
			jpushModule.addNotificationListener(result => {
				let notificationEventType = result.notificationEventType
				let messageID = result.messageID
				let title = result.title
				let content = result.content
				let extras = result.extras
				console.log('通知事件回调', result)
				// 推送一个本地通知
				jpushModule.addLocalNotification({
					messageID,
					title,
					content,
					extras
				})
			})

			// vuex防止丢失
			let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			if (isiOS) {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("pagehide", () => {
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
				})
				//在页面加载时读取localStorage里的状态信息
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
			} else {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("beforeunload", () => {
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
				})
				//在页面加载时读取localStorage里的状态信息
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
			}

			if (uni.getStorageSync.getItem("list")) {
				this.$store.replaceState(
					Object.assign({},
						this.$store.state,
						JSON.parse(uni.getStorageSync.getItem("list"))
					)
				);
			}
			plus.globalEvent.addEventListener("beforeunload", () => {
				uni.setStorageSync.setItem("list", JSON.stringify(this.$store.state));
			});
			//#endif

		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';

	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
</style>

1.4、发送通知/消息

在官网登陆后，进入【消息推送】-【推送管理】-【创建推送】-【通知消息】页面创建推送任务。

成功的话，在手机上就可以看到通知。这种属于“控制台”推送，后台的“API”推送功能需要后端配置。

二、阿里云推送

2.1、在阿里云官网创建应用

参考官网文档  快速入门_移动研发平台EMAS-阿里云帮助中心  

注意：创建的是Native应用，不是H5应用。

在官网创建应用，前提：uniapp项目已经有自己的Android包名。

2.2、插件下载

(1)阿里云移动推送

阿里云移动推送 - DCloud 插件市场

(2)将下载的压缩包解压放在项目目录的nativeplugins文件夹下面(没有就自己新建一个)

(3)在项目的manifest.json中的App原生插件配置里面填写AppKey和AppSecret(应用在官网创建好之后就可以拿到)

(4)对2的补充：2属于本地下载使用插件，也可以选择for云打包,则在云端插件里勾选配置

这两种任选一种进行配置即可! 

注意：项目打包前在manifest.json里面，一定要勾选Push(消息推送)权限

 2.3、代码填充

在App.vue页面的onLaunch生命周期里面，写入以下代码：

<script>
	// const jpushModule = uni.requireNativePlugin('JG-JPush')
	const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
	// const aliyunThirdPush = uni.requireNativePlugin('Aliyun-ThirdPush');
	export default {
		onLaunch: function() {
			//#ifdef APP-PLUS    
			// 通知通道创建
			const channel = uni.requireNativePlugin('Aliyun-Push-NotificationChannel');
			channel.createChannel({
				id: 'aaa',
//特别注意：发送消息在高级设置==>Android8.0特殊配置：===>通知通道：===>里面加上id
				name: '智慧校园',
				desc: '测试创建通知通道',
				importance: 3,
			});
			// 注册推送
			// const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
			aliyunPush.registerPush({}, result => {
				const event = result.event;
				if (event === 'registerPush') {
					if (result.code === 'success') {
						console.log("注册推送 成功 ");
					} else {
						console.log("注册推送 " + result.code + " " + result.msg);
					}
				} else {
					const data = JSON.stringify(result.data);
					console.log("receive push event : " + event);
					console.log("receive push data : " + data);
				}
			});
			// （可选）注册厂商通道
			// const aliyunThirdPush = uni.requireNativePlugin('Aliyun-ThirdPush');
			// aliyunThirdPush.registerThirdPush({}, result => {
			// 	const data = JSON.stringify(result);
			// 	console.log("receive third push : " + data);
			// });
			// 获取设备ID
			// const aliyunPush = uni.requireNativePlugin('Aliyun-Push');
			const result = aliyunPush.getDeviceId();
			// console.log("getDeviceId : ", result.data.deviceId);
			if (result.data.deviceId != '') {
				uni.setStorageSync('registerID', result.data.deviceId);
				// console.log("存设备ID", result.data.deviceId);
			}

			// vuex防止丢失
			let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			if (isiOS) {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("pagehide", () => {
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
				})
				//在页面加载时读取localStorage里的状态信息
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
			} else {
				//在页面刷新时将vuex里的信息保存到缓存里
				plus.globalEvent.addEventListener("beforeunload", () => {
					// localStorage.setItem("messageStore", JSON.stringify(this.$store.state))
					uni.setStorageSync('messageStore', JSON.stringify(this.$store.state));
				})
				//在页面加载时读取localStorage里的状态信息
				// localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
				// 	.parse(localStorage.getItem("messageStore"))));
				uni.getStorageSync("messageStore") && this.$store.replaceState(Object.assign(this.$store.state, JSON
					.parse(uni.getStorageSync("messageStore"))));
			}

			if (uni.getStorageSync.getItem("list")) {
				this.$store.replaceState(
					Object.assign({},
						this.$store.state,
						JSON.parse(uni.getStorageSync.getItem("list"))
					)
				);
			}
			plus.globalEvent.addEventListener("beforeunload", () => {
				uni.setStorageSync.setItem("list", JSON.stringify(this.$store.state));
			});
			//#endif

		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import "uview-ui/index.scss";
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';

	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
</style>

2.4、发给后端的值(API类型的通知)

RAM 访问控制 (aliyun.com)    将得到的 AccessKey ID和AccessKey Secret发给后端。

特别注意：

发送消息时高级设置==>Android8.0特殊配置===>通知通道===>里面加上代码里id的值(我的是’aaa‘)。

最后，项目打包图片：

 最后两项二选一，看自己需求。正式包选择’打正式包‘，调试打’自定义调试基座‘。