uniapp添加极光推送

news2024/11/20 13:31:27

1.从dcloud插件市场下载极光SDK插件 (可以云打包,也可以离线打包)

 极光JCore官方SDK下载地址

https://ext.dcloud.net.cn/plugin?id=4028https://ext.dcloud.net.cn/plugin?id=4028

极光JPush官方SDK下载地址

极光JPush官方SDK - DCloud 插件市场极光JPush官方SDK HBuilder插件版本https://ext.dcloud.net.cn/plugin?id=4035

下载SDK插件 

云打包:从插件市场点击for打云包,

离线打包:点击离线打包,将SDK下载到本地,在根目录中新建【nativeplugins】文件夹,将下载的文件放在里面

 2.在项目中红配置mainifest.json

(1)本地插件,点击mainifest.json中的【APP原生插件配置】,选择本地插件,点击确定按钮导入,在mainifest.json的源码视图中配置应用包名和AppKey

添加本地插件

 配置JG-JPUSH,设置Android和ios的应用包名

android_package_name:"包名" 

ios_bundle_id:"包名"

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

android_package_name:"包名"

ios_bundle_id:"包名"

JPUSH_APPKEY_ANDROID:"AppKey"

(2)云端插件配置

点击mainifest.json中的【APP原生插件配置】,选择云端插件,点击确定按钮导入,在mainifest.json的源码视图中配置应用包名和AppKey(跟上述一致)

3.页面代码

 在App.vue中添加以下代码

<script>
const jpushModule = uni.requireNativePlugin('JG-JPush')
	export default {
		onLaunch: function() {
			console.log('App Launch')
			if (uni.getSystemInfoSync().platform == "ios") {
				// 请求定位权限
				let locationServicesEnabled = jpushModule.locationServicesEnabled()
				let locationAuthorizationStatus = jpushModule.getLocationAuthorizationStatus()
				console.log('locationAuthorizationStatus', locationAuthorizationStatus)
				if (locationServicesEnabled == true && locationAuthorizationStatus < 3) {
					jpushModule.requestLocationAuthorization((result) => {
						console.log('定位权限', result.status)
					})
				}
				jpushModule.requestNotificationAuthorization((result) => {
					let status = result.status
					if (status < 2) {
						uni.showToast({
							icon: 'none',
							title: '您还没有打开通知权限',
							duration: 3000
						})
					}
				})
			}

			jpushModule.initJPushService();
			jpushModule.setLoggerEnable(true);
			jpushModule.addConnectEventListener(result => {
				console.log(result)
				let connectEnable = result.connectEnable
				uni.$emit('connectStatusChange', connectEnable)
			});


			jpushModule.addNotificationListener(result => {
				console.log(result)
				if (result.notificationEventType == "notificationOpened") {
				  //点击窗口通知栏推送的消息 跳转指定页面
					uni.navigateTo({
						url: '/pages/home/warningCenter/warningCenter',
						complete(res) {
							console.log(res);
						}
					})
				}

			});

			jpushModule.addCustomMessageListener(result => {
				let type = result.type
				let messageType = result.messageType
				let content = result.content
				uni.showToast({
					icon: 'none',
					title: JSON.stringify(result),
					duration: 3000
				})
			})

			jpushModule.addLocalNotificationListener(result => {
				let messageID = result.messageID
				let title = result.title
				let content = result.content
				let extras = result.extras
				uni.showToast({
					icon: 'none',
					title: JSON.stringify(result),
					duration: 3000
				})
			})

			jpushModule.addGeofenceListener(result => {
				let code = result.code
				let type = result.type
				let geofenceId = result.geofenceId
				let userInfo = result.userInfo
				uni.showToast({
					icon: 'none',
					title: '触发地理围栏',
					duration: 3000
				})
			})

			jpushModule.setIsAllowedInMessagePop(true)
			jpushModule.pullInMessage(result => {
				let code = result.code
				console.log(code)
			})

			jpushModule.addInMessageListener(result => {
				let eventType = result.eventType
				let messageType = result.messageType
				let content = result.content
				console.log('inMessageListener', eventType, messageType, content)

				uni.showToast({
					icon: 'none',
					title: JSON.stringify(result),
					duration: 3000
				})
			})
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

登录页代码

<script>
	const jpushModule = uni.requireNativePlugin('JG-JPush')
	export default {
		data() {
			return {
				//极光推送
				connectStatus: '未连接',
				registrationID: '未获得',
			}
		},
		methods: {
			//点击登录按钮
			login() {
              //登录成功后
                 //设置别名
				jpushModule.setAlias({
						'alias': this.phone,
						'sequence': 1
						})
			},
			connect() {
				uni.$on('connectStatusChange', (connectStatus) => {
					console.log('进入连接')
					var connectStr = ''
					if (connectStatus == true) {
						connectStr = '已连接'
						this.getRegistrationID()
					} else {
						connectStr = '未连接'
					}
					console.log('监听到了连接状态变化 --- ', connectStr)
					this.connectStatus = connectStr
				})
			},
			//获取推送ID
			getRegistrationID() {
				jpushModule.getRegistrationID(result => {
					let registerID = result.registerID
					console.log(result)
					this.registrationID = registerID
				})
			}
		},
		onLoad() {
			this.connect()
		}
	}
</script>

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

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

相关文章

Request获取请求数据中文乱码问题

目录 一、当Request请求字母时&#xff0c;输出正常 二、当Request请求参数为汉字时 三、使用伪代码了解乱码的形成 URL编码 四、Request请求参数中文乱码-Post请求解决方案 五、Request请求参数中文乱码-Get请求解决方案 前言&#xff1a;Tomcat在7以及更低版本时&#…

【虚幻引擎UE】UE5 实现WEB和UE通讯思路(含工程源码)

UE5实现WEB和UE通讯思路 两个方案,根据需求选择适合自己的: 1.UE打包为像素流页面,嵌入WEB进行通讯。 2.UE和WEB基于WEB UI插件实现通讯,打包为像素流页面。 实现效果如下 ↓ 本文着重说明第二种方案。 示例项目工程文件:https://download.csdn.net/download/qq_35079…

使用nodejs写接口

一、基本步骤 要使用Node.js编写接口&#xff0c;需要遵循以下步骤&#xff1a; 1、安装Node.js&#xff1a;如果尚未在计算机上安装Node.js&#xff0c;可以在Node.js的官方网站上下载安装程序&#xff0c;并按照说明进行安装。 2、初始化项目&#xff1a;在项目文件夹中打…

完美解决 - 前端发版后浏览器缓存问题(发版后及时拉取最新版本代码)

一、简介 开发完发布新版本后&#xff0c;在有些电脑上总需要强刷才能获取到最新版本的内容&#xff0c;太恶心了。 浏览器缓存&#xff08;Browser Caching&#xff09;是为了节约网络的资源加速浏览&#xff0c;浏览器在用户磁盘上对最近请求过的文档进行存储&#xff0c;当…

为什么要将程序部署到云服务器上?华为云Web及移动App上云解决方案体验测评

Web及移动App上云是指将Web应用程序或移动应用程序部署到云计算平台上&#xff0c;以便用户可以通过互联网访问这些应用程序。这种部署方式可以提高应用程序的可靠性、可扩展性和安全性&#xff0c;同时也可以降低应用程序的运营成本。 三大特性决定系统的稳定能力 部署应用服务…

【中秋征文】“海上生明月”中秋节网页特效

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

van-uploader上传图片实现过程、使用原生input实现上传图片

1、使用van-uploader 使用van-uploader组件上传图片&#xff0c;并将其封装成组件&#xff0c;接收传入的参数imglist。图片地址为服务器返回的。 完整代码 <template><div class"image-uploader"><div class"list-img" v-for"(src…

html 导入百度地图 网页中如何导入百度地图

先看案例如图所示 首先我们需要知道我们想要标注地点的经纬度 经纬度查询网址如下 图中以同程大厦为例 经纬度查询定位 拾取坐标系统 经纬度查询地图 好了 准备工作做好 现在开始编码~ 第一步 html css部分 注意点1. #map 命名 不要随意更改 如影响到您的布局 您可以在外面在…

多种方法解决前后端报出的SyntaxError: xxx is not valid JSON的问题,比如“[object Object]“ is not valid JSON

文章目录1. 复现问题2. 分析问题3. 解决问题4. 该错误的其他解决方法5. 文章总结1. 复现问题 今天启动后端服务&#xff0c;访问knife4j文档时&#xff0c;却报出如下错误&#xff1a; 于是&#xff0c;按F12打开调试页面板&#xff0c;找到了具体的错误信息&#xff0c;如下所…

那些你不得不了解的HTML基础

瞧一瞧&#xff0c;看一看&#xff0c;新鲜的HTML出笼了 目录 一、HTML基本语法&#xff08;标签&#xff09; 注释 标题 段落 换行 特殊转义字符 格式化标签 图片 超链接a标签 表格标签 列表标签 表单标签 无语义标签 二、基于上述实现的两个案例 制作一份简历…

vue 之 CSS进行样式穿透的方法(/deep/、::v-deep、>>> 、:deep、额外的全局<style>)

一、简介 在很多vue的组件库 , 如vant&#xff0c;elementUI&#xff0c; iview等都可能自定义一些样式文件&#xff0c;如果我们在项目中引入了样式组件或者通过v-html渲染了数据&#xff0c;然后想要去修改他们内部的某元素的样式, 直接修改样式很可能不起作用&#xff0c;修…

做一个前端网页送给女朋友~轮播图+纪念日

文章目录1. 轮播图框架2. 轮播图大盒子实现1. 盒子及图片的可视化2. 将图片重叠起来并放入轮播图盒子中...相对定位与绝对定位3. 添加左右按钮4. 点击按钮跳转图片5. 鼠标离开图片轮播图按钮隐藏6. 添加小圆点按钮7. 点击小圆点跳转图片并且该小圆点变色8. 自动轮播9. 最后一步…

Vue项目中ESLint配置(VScode)

Vue项目中ESLint配置&#xff08;VScode&#xff09; 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint&#xff0c;点击并翻页到最下面&#xff0c;点击setting.json进行配置&#xff1a; // 值设置为true时…

Springboot Long类型数据太长返回给前端,精度丢失问题 复现、解决

前言 惯例&#xff0c;收到兄弟求救&#xff0c;关于long类型丢失精度的问题&#xff1a; 存在一个初学者不会&#xff0c;就会有第二个初学者不会&#xff0c;所以我出手。 正文 不多说&#xff0c;开搞。 如题&#xff0c; 后端返回的数据 给到 前端&#xff0c; Long类型数…

【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制

文章目录问题描述解决过程玩味Vue Scoped知识点解决方法问题描述 ​ 在开发的前期&#xff0c;我清晰的记得使用动画完成了图片放大的效果&#xff0c;当时还写了一篇博文 http://t.csdn.cn/lA9aq上了热榜。可是过了几天之后&#xff0c;这个效果居然“失效了”&#xff0c;我…

若依前后端分离新窗口打开页面,如何使用this.$router.resolve解决

若依前后端分离新窗口打开页面this.$router.resolve 欢迎遇到同样问题的同学阅读 例如系统后台要求点击【可视化大屏】菜单&#xff0c;需要打开新窗口显示&#xff0c;但不能影响原窗口显示系统页面&#xff0c;网上查询了一圈都是比较片面的只提到了this.$router.resolve&a…

JS时间戳转换方式

前言 在js中将时间戳转换为常用的时间格式&#xff0c;有三种主要的方式 1、使用JS中已有的函数&#xff0c;例如getFullYear(),getMonth()等&#xff0c;将时间戳直接转换成对应的年月&#xff1b; 2、创建时间过滤器&#xff0c;在其他的页面中直接调用该过滤器&#xff0c;转…

npm install 安装失败常见问题解决办法

安装cnpm npm install -g cnpm --registryhttp://registry.npm.taobao.org安装完之后可以通过cnpm -v 检验是否安装成功。 显示当前的镜像网址 npm get registrycnpm install安装依赖 cnpm install在运行cnpm install 中&#xff0c;你可以会遇到cnpm : 无法加载文件 C:\Us…

微信小程序搜索框实现模糊查询

目录 前言一、概述二、步骤三、效果展示总结前言 主要实现功能&#xff0c;无美化&#xff0c;如需请自设 一、概述 开发工具&#xff1a;微信开发者工具 通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 二、步骤 在文件中新建一个goodFilter.wxs文…

THREE.js

电子书网站http://www.webgl3d.cn链接 特定版本three.js下载 github链接&#xff1a;https://github.com/mrdoob/three.js github链接查看所有版本&#xff1a;https://github.com/mrdoob/three.js/releases 选择你需要的版本three.js文件包下载&#xff0c;然后解压即可。…