uniapp对接极光推送(国内版以及海外版)

勾选push,但不要勾选unipush

国内版

网址:极光推送-快速集成消息推送功能,提升APP运营效率 (jiguang.cn)

  • 进入后台,并选择对应应用开始配置
  • 配置安卓包名 以及ios推送证书,是否将生产证书用于开发环境选择是
  • ios推送证书获取

参考文档:iOS 证书设置指南 (engagelab.com)

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

插件市场:DCloud 插件市场

  • 打开manifest.json导入插件到项目
  • 在源码视图进行插件配置
  • App.vue示例代码

示例代码地址:jpush-hbuilder-plugin/JPush_Hbuilder_Demo/App.vue at master · jpush/jpush-hbuilder-plugin · GitHub

javascript 复制代码
<script>
	var 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.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
					})
				});
				
				// 监听deviToken的状态
				jpushModule.addDeviceTokenListener(result=>{
					let code = result.code
					if (code == 0) {
						let deviceToken = result.deviceToken
						uni.showToast({
							icon: 'none',
							title: deviceToken,
							duration: 3000
						})
						console.log("deviceToken:", deviceToken)
					}else {
						let error = result.msg
					}
				})
			
			};
			
			jpushModule.initJPushService();
			jpushModule.setLoggerEnable(true);
			jpushModule.addConnectEventListener(result=>{
				let connectEnable = result.connectEnable
				uni.$emit('connectStatusChange',connectEnable)
			});
			
			jpushModule.addNotificationListener(result=>{
				let notificationEventType = result.notificationEventType
				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.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.addInMessageListener(result=>{
            				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
				})
			})
			
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>
  • 真机调试运行(需制作自定义调试基座)

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

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

离线推送

离线接收消息是必须要配置厂商通道

获取厂商通道文档地址:厂商通道参数申请指南 - 极光文档 (jiguang.cn)

三星手机离线推送怎么配置

配置fcm通道

推荐Java生成

海外版

官网地址:海外消息推送_海外消息推送服务_海外推送服务平台_Engagelab

与国内版类似,不同的是插件变了

  • 在源码视图进行插件配置
  • App.vue示例代码

demo示例:engagelab-uniapp-plugin/MTPush_Hbuilder_Demo/App.vue at main · DevEngageLab/engagelab-uniapp-plugin · GitHub

javascript 复制代码
<script>
	var mtpushModule = uni.requireNativePlugin("EL-MTPush")
	export default {
		onLaunch: function() {
			console.log('App Launch')
			if(uni.getSystemInfoSync().platform == "ios"){
				
				mtpushModule.requestNotificationAuthorization((result)=>{
					let status = result.status
					if (status < 2) {
						uni.showToast({
							icon: 'none',
							title: '您还没有打开通知权限',
							duration: 3000
						})
					}
				})
			}
			
			// mtpushModule.setCountryCode("US");
			// mtpushModule.setTcpSSL(true)
			mtpushModule.setSiteName("Singapore");
			mtpushModule.setLoggerEnable(true);
			mtpushModule.initPushService();
			mtpushModule.addConnectEventListener(result=>{
				let connectEnable = result.connectEnable
				uni.$emit('connectStatusChange',connectEnable)
			});
			
			mtpushModule.addNotificationListener(result=>{
				let notificationEventType = result.notificationEventType
				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
				})
			});
			
			mtpushModule.addCustomMessageListener(result=>{
				let type = result.type
				let messageType = result.messageType
				let content = result.content
				uni.showToast({
					icon: 'none',
					title: JSON.stringify(result),
					duration: 3000
				})
			});
			
			mtpushModule.addTagAliasListener(result=>{
				uni.showToast({
					icon: 'none',
					title: JSON.stringify(result),
					duration: 3000
				})
			});
			
			if(uni.getSystemInfoSync().platform == "ios"){
				mtpushModule.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
					})
				})
			}
			
			
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

api

api地址:

jpush-hbuilder-plugin/doc/API.md at master · jpush/jpush-hbuilder-plugin · GitHub

  • getRegistrationID

调用此 API 来取得应用程序对应的 RegistrationID

  • addNotificationListener

通过CALLBACK 的 notificationEventType字段 区分 是 通知收到 还是 点击通知

// 点击前 notificationArrived

// 点击后 notificationOpened

  • 监听连接
javascript 复制代码
uni.$on('connectStatusChange', (connectStatus) => {
					var connectStr = ''
					if (connectStatus == true) {
						connectStr = '已连接'
						getRegistrationID()
					} else {
						connectStr = '未连接'
					}
					state.connectStatus = connectStr
				})
  • 销毁连接
javascript 复制代码
uni.$off('connectStatusChange')

问题

  • 监听到了连接状态变化比较长

是网络问题,engagelab服务器在海外,耗时是正常的

相关推荐
你挚爱的强哥11 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
dccose44 分钟前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript