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

news2024/10/2 12:19:04

目录

一、极光推送

1.1、在极光官网创建应用

1.2、插件下载

1.3、代码填充

1.4、发送通知/消息

二、阿里云推送

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

2.2、插件下载

 2.3、代码填充

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

一、极光推送

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原生插件配置里面填写AppKeyAppSecret(应用在官网创建好之后就可以拿到)

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原生插件配置里面填写AppKeyAppSecret(应用在官网创建好之后就可以拿到)

(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‘)。

最后,项目打包图片:

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/352549.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

c/c++开发,无可避免的模板编程实践(篇三)

一、模板与多态 多态就是通过单一命名标记关联不同特定行为的能力。在C中&#xff0c;主要是通过继承和虚函数来实现&#xff0c;由于继承和虚函数主要是在运行期进行处理&#xff0c;因此c把这种多态称为“动多态”。而通过函数重载方式也可以单一命名标记关联不同行为&#x…

TrueNas篇-硬盘直通

硬盘直通 在做硬盘直通之前&#xff0c;在trueNas(或者其他虚拟机)内是检测不到安装的硬盘的。 在pve节点查看硬盘信息 打开pve的shell控制台 输入下面的命令查看硬盘信息&#xff1a; ls -l /dev/disk/by-id/该命令会显示出实际所有的硬盘设备信息&#xff0c;其中ata代…

Python 给视频添加背景音乐 | Python工具

目录 前言 环境依赖 代码 总结 前言 本文提供给视频添加背景音乐的python工具&#xff0c;一如既往的实用主义。 环境依赖 ffmpeg环境安装&#xff0c;可以参考我的另一篇文章&#xff1a;windows ffmpeg安装部署_阿良的博客-CSDN博客 本文主要使用到的不是ffmpeg&#x…

绘制正余弦曲线中的sin(x),cos(x)的使用

目录一、 基础知识1.1 头文件1.2 原型1.3 参数1.4 返回值二、使用1. 坐标与弧度的对应关系一、 基础知识 1.1 头文件 #include <math.h> 1.2 原型 double sin(double x) double cos(double x) 1.3 参数 参数是弧度制&#xff08;rad&#xff09; 1.4 返回值 返…

Python 采集 筷 实现视频批量保存

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 刷到的视频怕它下架&#xff1f;我们来采集保存一下它 知识点: 动态数据抓包 requests发送请求 json数据解析 开发环境: python 3.8 运行代码 pycharm 2022.3 辅助敲代码 requests pip install requests 代码展示 需…

故障案例:MySQL唯一索引有重复值,官方却说This is not a bug

GreatSQL社区原创内容未经授权不得随意使用&#xff0c;转载请联系小编并注明来源。GreatSQL是MySQL的国产分支版本&#xff0c;使用上与MySQL一致。作者&#xff1a;飞鱼过天文章来源&#xff1a;GreatSQL社区原创 问题原因故障解决方案复现步骤参考文献 一、问题&#xff1a;…

图片压缩怎么弄?多种图片格式压缩大小的方法

平时接触的图片格式有许多种&#xff0c;比如jpg、png、gif、tiff、webp等&#xff0c;不同的场景都需要用不同的图片&#xff0c;但是当这些图片大小都不符合我们的使用要求时&#xff0c;该怎么去压缩图片大小呢&#xff1f;小编今天给大家分享一款支持多种图片格式压缩工具&…

openEuler RISC-V 成功适配 VisionFive 2 单板计算机

近日&#xff0c;RISC-V SIG 成功在 VisionFive 2 开发板上适配欧拉操作系统&#xff0c;目前最新版本的 openEuler RISC-V 22.03 V2 镜像已在 VisionFive 2 开发板上可用&#xff0c;这是 openEuler 推动 RISC-V 生态演进的又一新进展。下载链接​​https://mirror.iscas.ac.c…

如何在Power Virtual Agents中使用Power Automate

今天我们来介绍一下如何在Power Virtual Agents中使用PowerAutomate。我们以通过在PVA聊天机器人的对话框中输入“发布通知”后会把预设好的通知信息自动发布到Teams中的某个团队中为例。首先进入PVA聊天机器人编辑界面后选择“主题”-“新建主题”。 在“新建主题”中添加“触…

服务器容器配置日志(Linux+x86_64+Ubuntu18.04+CUDA11.0+python3.7)

一、创建并进入容器 &#xff08;平台使用教学详细&#xff0c;这部分略写&#xff09; 登上服务器后&#xff0c;打开终端输入如下进入自己建的容器 ssh -p XXXXX root10.XXX.XXX.XXX //按自己的宿主机端口写二、安装Conda&#xff08;miniconda3&#xff09; &#xff08…

数据库系统:1. 绪论

更好的阅读体验\huge{\color{red}{更好的阅读体验}}更好的阅读体验 文章目录1.1 数据库系统概述1.1.1 基本概念数据&#xff08;data&#xff09;数据库&#xff08;DataBase, DB&#xff09;数据库管理系统&#xff08;DataBase Management System, DBMS&#xff09;数据库系统…

极验3代 加密分析

目标链接 aHR0cHM6Ly93d3cuZ2VldGVzdC5jb20vZGVtby9zbGlkZS1mbG9hdC5odG1s接口分析 极验参数重要信息 gt和challenge&#xff1b;gt是固定的&#xff0c;但是challenge每次请求会产生不同的&#xff0c;这里的请求的并没有什么加密参数。 下一个请求 gettype.php&#xff0c…

365天深度学习训练营-第J2周:ResNet50V2算法实战与解析

目录 一、前言 二、论文解读 1、ResNetV2结构与ResNet结构对比 2、关于残差结构的不同尝试 3、关于激活的尝试 三、模型复现 1.Residual Block 3、ResNet50V2架构复现 4.ResNet50V2模型结构大图 一、前言 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习…

自动定时播报股价变动(零代码):今天我的股票涨了吗?

你是否会关注某个上市公司每天的股价信息吗&#xff1f;比如自己公司~你是否需要一个机器人&#xff0c;每天在内部群自动播报今日收盘价&#xff1f;不用复制粘贴&#xff0c;也不用写python&#xff0c;今天教你一个零代码可以自动播报股价数据的好办法。来看看我自动化的效果…

从开始测试到年薪40W,我的自动化测试艰辛历程

我希望我的故事能够激励现在的软件测试人&#xff0c;尤其是还坚持在做“点点点”的测试人。 你可能会有疑问&#xff1a;“我也能做到这一点的可能性有多大&#xff1f;”因此&#xff0c;我会尽量把自己做决定和思考的过程讲得更具体一些&#xff0c;并尽量体现更多细节。 …

嵌入式ARM设计编程(四) ARM启动过程控制

文章和代码已归档至【Github仓库&#xff1a;hardware-tutorial】&#xff0c;需要的朋友们自取。或者公众号【AIShareLab】回复 嵌入式 也可获取。 一、实验目的 &#xff08;1&#xff09; 掌握建立基本完整的ARM 工程&#xff0c;包含启动代码&#xff0c;C语言程序等&…

如何选择好的IB课程学校?

在上海除了拼中考&#xff0c;你还可以走一条更有“选择权”的路——国际化学校&#xff01; 然而选择学校时&#xff0c;让家长最头痛的事情&#xff0c;莫过于为孩子选择什么样的国际化课程。 今天我们来聊聊IB课程&#xff01; 三大主流国际课程中&#xff0c;被公认含金量最…

操作系统引论

操作系统是管理硬件和软件的一种应用程序。操作系统是运行在计算机上最重要的一种软件&#xff0c;它管理计算机的资源和进程以及所有的硬件和软件。它为计算机硬件和软件提供了一种中间层&#xff0c;使应用软件和硬件进行分离&#xff0c;让我们无需关注硬件的实现&#xff0…

嵌入式C语言设计模式 --- 外观模式

1 - 什么是外观模式? 外观模式(Facade Pattern),是一种比较简单的结构型模式,它存在的目的,也是为了简单。 外观模式隐藏了一系列接口的复杂性,旨在为外部客户端提供一个更高层次且统一简单的接口,简化了客户端调用某些模块的一系列操作。 外观模式应该是软件工程师…

Git入门使用详细笔记小白教程

Git入门使用详细笔记小白教程 一、克隆远程仓库到本地 1.复制远程仓库的地址到URL中&#xff1a; 二、本地和远程冲突 注意事项&#xff1a; 一定要在第二次修改提交到本地之前先pull远程的项目&#xff01;&#xff01;&#xff01;不然就会本地和远程的项目起冲突。 冲突…