uniapp消息推送超详细(从开通uniPush到测试成功)

2023-05-16

前段时间开发app的时候要开始做消息推送功能了,刚开始选择的是个推,最后由于。。。。。,em还是用了uniapp自带的uniPush,其实uniapp的推送就是集成版的个推,下面讲解详细的步骤

这里是官方的文档地址:uniPush推送指南:https://ask.dcloud.net.cn/article/35622


1、开通推送服务


1、开通推送服务

开通指南:uniPush开通指南:https://ask.dcloud.net.cn/article/35716

打开这个链接uniapp开发者后台如果以前创建过项目的话就会有应用列表,点击应用名称就会到有uniPush的页面(https://dev.dcloud.net.cn/app/indextype=0)

在这里插入图片描述

需要注意的是首次开通就会弹出信息认证框,填写一下就ok了,一定要确保信息正确

在这里插入图片描述
开通 Uni Push 功能时,需要提交应用相关信息

在申请开通时,需要确保输入的 Android包名或 iOS Bundle ID 必须与打包时配置的一致,否则可能会导致无法收到推送消息(很重要,必须要填写的都是一样的)

在这里插入图片描述

这里我填写的Android包名和IOS Bundleld都是例子上的:io.dcloud.myapp,如下图,应用签名也是

在这里插入图片描述

开通完成后我们就会看到如下页面

在这里插入图片描述

IOS端的推送需要配置证书,需要在 “配置管理”-“应用配置” 页面上传推送证书,
获取推送证书请参考:ios获取推送证书:https://docs.getui.com/getui/mobile/ios/apns/

注意:开通UniPush后,需在后台配置“厂商推送设置”,否则可能在服务端下发推送消息界面中不会显示第三方厂商(手机厂商)推送通知内容(需要自己去申请),下方也有修改应用信息的栏目

厂商推送设置指南:https://www.dcloud.io/docs/a/unipush/manufacturer.pdf

iOS平台需要使用到苹果的APNS,务必在后台正确配置苹果推送证书,参考:ios推送证书配置:https://ask.dcloud.net.cn/article/35716#ios

在这里插入图片描述


2、编写代码


2、写代码监听消息推送

这里的监听我是放在app.vue中的onLaunch生命周期函数里的,因为uniapp的应用肯定会先走app.vue
而onLaunch生命周期函数又是第一个执行的生命周期

监听则是用的5+app的方法:5+app消息推送文档https://www.html5plus.org/doc/zh_cn/push.html

在这里插入图片描述

onLaunch 生命周期里,页面跳转有问题,跳不过去,应该是页面还没加载,加上定时后,就可以了。
有更好办法的小伙伴欢迎留言,我还是太菜了

在我们推送之前应该要先做一个判断,判断用户是否授权允许推送消息了,还有就是是否打开消息推送开发了,如果没有的话就要进行提示引导用户打开(底部附文有链接)

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			//#ifdef APP-PLUS
			var info = plus.push.getClientInfo()
			// 使用5+App的方式进行监听消息推送
			plus.push.addEventListener("click", function(msg) {
				console.log("click:" + JSON.stringify(msg));
				console.log(msg.payload);
				console.log(JSON.stringify(msg));
				// onLaunch 生命周期里,页面跳转有问题,跳不过去
				// 应该是页面还没加载,加上定时后,就可以了;
				setTimeout(() => {
					uni.navigateTo({
						url: `pages/charging/chargeCoupon?data=${JSON.parse(msg.payload)}`
					})
				}, 1000)
			}, false);
			// 监听在线消息事件    
			plus.push.addEventListener("receive", function(msg) {
				//业务代码
				console.log("recevice:" + JSON.stringify(msg))
			}, false);
			//#endif
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		globalData: {
			userInfo: {},
			restaurantData: {}
		}
	}
</script>

<style>
	/*每个页面公共css */
	.main-container {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.arrow-icon {
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx;
	}

	.triangle {
		width: 0;
		height: 0;
		border: 16rpx solid #707070;
		border-bottom: 10rpx solid transparent;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		margin-left: 27rpx;
		margin-top: 10rpx;
		/* 三角形旋转 */
		transition: 0.5s;
	}

	.top-triangle {
		width: 0;
		height: 0;
		border: 16rpx solid #707070;
		border-top: 10rpx solid transparent;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		margin-left: 27rpx;
		margin-bottom: 10rpx;
		/* 三角形旋转 */
		transition: 0.5s;
	}
</style>

手动触发推送

			//如果是在线收到推送消息,需要创建一条推送  cover: false 是否覆盖上一条推送消息
				if(msg.type === 'receive'){
					var options = { cover: false, title: msg.payload.title }
					var url = `pages/shop/shopGoodDetail`
					//创建本地消息
					//content: ( String ) 必选
					//消息显示的内容,在系统通知中心中显示的文本内容。
					
					//payload: ( String ) 可选
					//消息承载的数据,可根据业务逻辑自定义数据格式。
					
					//options: ( MessageOptions ) 可选
					//创建消息的额外参数,参考MessageOptions。
					plus.push.createMessage(msg.payload.content, url, options)
				}

3、配置权限、制作自定义基座


3、配置权限、制作自定义基座

首先配置权限
在这里插入图片描述

第二步准备自定义基座
准备自定义基座是为了能够更好的测试消息推送

在Hbuild X上方的菜单栏中选择:运行------->运行到手机或模拟器-------->制定自定义调试基座

如果Android包名和IOS Bundleld名不一样以及配置文件出现其他报红错误,就出现下方图片的错误
刚开始配置了app图标,然后不小心把图片文件删了,配置的时候找不到图片就报错了…
在这里插入图片描述

成功后就会弹出
在这里插入图片描述

点击打包在控制台就会出现打包后的路径并带有apk文件(我打的是Android的包)

在这里插入图片描述
然后我们将这个apk文件安装在安卓手机上,然后在后台开始进行消息推送

在这里插入图片描述
也来设置一个定时消息试一下

在这里插入图片描述


4、真机测试效果


4、真机测试效果

在手机上看一下效果(时间内容也是正确的,测试手机用的是小米手机,图片使用iPhone手机拍的)
在这里插入图片描述


5、附文(自定义通知图标、判断权限是否开启)


5、配置自定义推送图标(文档说目前仅支持个推 & UniPush配置)

5+应用:
plus节点 --> distribute节点 --> plugins节点 --> push节点 --> igexin节点(或者unipush节点) --> icons节点 --> small节点下配置
uni应用:
app-plus节点 --> distribute节点 --> plugins节点 --> push节点 --> igexin节点(或者unipush节点) --> icons节点 --> small节点下配置

UniPush 则把igexin节点修改为 unipush 即可

配置代码

"plugins": { // 第三方sdk配置  
    "push": { // 模块名称  
        "igexin": { // 个推SDK参数配置  
            "appid": "xxxxxxx", // 个推的appid  
            "appkey": "xxxxxxx", // 个推的appkey  
            "appsecret": "xxxxxxx", // 个推的appsecret  
            "icons": { // 推送图片配置  
                "push": { // push图标,规格与应用图片一致,不配置则默认使用push图标  
                    "ldpi": "可选,48x48",  
                    "mdpi": "可选,48x48",  
                    "hdpi": "可选,72x72",  
                    "xhdpi": "可选,96x96",  
                    "xxhdpi": "可选,144x144",  
                    "xxxhdpi": "可选,192x192"  
                },  
                "small": { //  小图标,png格式图片,仅使用alpha图层  
                    "ldpi": "可选,18*18",  
                    "mdpi": "可选,24*24",  
                    "hdpi": "可选,36*36",  
                    "xhdpi": "可选,48*48",  
                    "xxhdpi": "可选,72*72"  
                },  
                "description": "推送图标"  
            },  
        }  
    }  
}

检查应用是否被授予推送权限:https://ext.dcloud.net.cn/pluginid=594
开启关闭推送服务:https://ext.dcloud.net.cn/pluginid=727

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp消息推送超详细(从开通uniPush到测试成功) 的相关文章

  • CMakeLists.txt编写规则

    一 基本语法 语法格式 指令 参数1 参数2 1 参数间用空格或分号隔开 2 指令大小写无关 参数和变量大小写相关 3 变量用 方式取值 但在if语句中直接用变量名 二 重要指令 1 cmake minimum required 指定CMa
  • [stm32] Start Tour-一些元件的连接

    如果觉得有帮助的话就点个赞吧 持续更新 目录 一 蜂鸣器 注意点 xff1a 二 独立按键 一 蜂鸣器 根据原理图连的实物图如右 xff1a 注意点 xff1a 1 xff09 蜂鸣器分正负极 2 xff09 VCC和GND是32板的总电源
  • ROS中Gazebo无响应解决办法

    标题ROS中Gazebo无响应解决办法 在终端输入gazebo没有反映 xff0c 进行下面两句操作 首先输入下面的代码 gazebo verbose 观察到报错显示原因为有另一个gazebo进程于是杀死这个进程则问题解决代码如下 xff1
  • 别害羞,开源社区真的很需要你,教你如何参与开源社区~

    前言 相信各位开发者多多少少会在实际开发的过程中会使用一些开源的技术 xff0c 例如前端的 vue react 以及大量的第三方库如 echart xff0c color js day js 等等 xff0c 后端就更多了 xff0c 从
  • VBox 快照备份虚拟机

    目录 虚拟机快照概念 什么是虚拟机快照 VBox 快照备份恢复 FreeBSD 系统 拍摄 Snapshots 快照 拍摄快照示例 恢复快照 虚拟机快照概念 什么是虚拟机快照 简单来说 xff0c 就是将你当前状态的虚拟机复制保存一份镜像
  • [Linux 调试 Android]-Linux 命令行调试 Android 设备

    目录 Slackware 15 0 下调试安卓 4 4 2 系统环境配置 获取 linux 版本的 adb 程序 将 ADB 程序安装到 Linux 系统上 配置 adb 环境变量 在 Linux 系统上 adb 调试安卓系统 Slackw
  • docker 容器如何查看正在运行容器的端口映射

    1 查看docker容器的版本 root 64 opt docker version Docker version 19 03 5 build 633a0ea 2 查看正在运行的容器 root 64 opt docker ps CONTAI
  • docker退出关闭容器

    可以使用 docker stop 来终止一个运行中的容器 此外 xff0c 当Docker容器中指定的应用终结时 xff0c 容器也自动终止 例如对于上一章节中只启动了一个终端的容器 xff0c 用户通过 exit 命令或 Ctrl 43
  • STM32收入高也好找工作,所以我学嵌入式linux终究是错付了吗

    STM32收入高也好找工作 xff0c 所以我学嵌入式linux终究是错付了吗 经常有同学纠结问我 xff1a 我到底是学STM32还是学嵌入式linux 这个问题很多人都会有自己的看法 xff0c 今天我试着从多个角度 xff0c 把了解
  • Java面试基础篇

    Java面试基础篇 基础总结 博客链接导航 Java语言基础常识 https blog csdn net article details 88531257 J2EE基础知识 https blog csdn net article detai
  • 项目实战-外卖自提柜 3. FreeRTOS主要API的应用

    项目实战 外卖自提柜 1 项目介绍 协议制定 项目实战 外卖自提柜 2 CubeMX 43 FreeRTOS入门 项目实战 外卖自提柜 3 FreeRTOS主要API的应用 项目实战 外卖自提柜 4 FreeRTOS 堆栈分配 调试技巧 项
  • [Spring] IntelliJ IDEA 新建工程时没有Spring选项的解决方法

    Spring IntelliJ IDEA 新建工程时没有Spring选项的解决方法 专业版 xff08 ultimate xff09 社区版 xff08 community xff09 刚开始学习Java Spring框架 xff0c 也是
  • MySQL下载与安装教程(超详细)

    一 MySQL下载 下载地址 xff1a https dev mysql com downloads mysql 根据自己需要下载对应的版本 xff0c 我下载的是mysql 5 7 31 二 MySQL安装教程 1 解压安装包 下载后得到
  • docker 开发编译环境搭建

    参与docker开源社区 xff0c 成为docker项目的contributor xff0c 首先要搭建docker的开发编译环境 xff0c 下面是docker官网介绍的编译环境的搭建 xff0c 这里做个笔记 docker的编译环境准
  • qt基础入门教程

    1 t的介绍 优点 成功案例 5 8 0 Qt是一个跨平台的C 43 43 图形用户界面应用程序框架 它为应用程序开发者提供建立艺术级图形界面所需的所有功能 爸是完全面向对象的 xff0c 很容易扩展 xff0c 并且允许真正的组件编程 推
  • Java开发自学教程!japonensisjava东莞

    三大内容 xff1a Java并发编程Java高并发编程高并发系统设计 Java并发编程 1 概览 2 进程与线程 3 Java 线程 4 共享模型之管程 5 共享模型之内存 6 共享模型之无锁 7 共享模型之不可变 8 共享模型之工具 并
  • MySQL 5.7 安装教程(全步骤、保姆级教程)

    2022年05月30日更新 本文介绍的是只安装MySQL数据库的过程 xff0c 并不包含各种其他附加工具 安装完成之后通常使用Navicat或SQLyog进行可视化操作 清华的镜像网站只保存最新的几个MySQL版本 xff0c 所以直链可
  • 手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

    作者 xff1a bug菌 博客 xff1a CSDN 掘金等 公众号 xff1a 猿圈奇妙屋 特别声明 xff1a 原创不易 xff0c 转载请附上原文出处链接和本文声明 xff0c 谢谢配合 版权声明 xff1a 文章里可能部分文字或者
  • node 14.19.0 版本成功解决:安装 node-sass 和 sass-loader 的过程及各 node 版本对应的 node-sass 版本号

    1 node 版本 node sass 版本及 sass loader 版本查看 xff1a 其一 我的 node 版本查看 xff1a 在命令行输入查询命令 xff1a node v 我的 node 版本为 xff1a v14 19 0
  • Shiro反序列化漏洞【详细解析】

    Shiro是什么东西 Shiro 是 Java 的一个安全框架 xff0c 执行身份验证 授权 密码 会话管理shiro默认使用了CookieRememberMeManager xff0c 其处理cookie的流程是 xff1a 得到rem

随机推荐