自学内容网 自学内容网

uniapp对接极光推送,实现消息推送功能

通过集成JG-JPush和JG-JCore插件,可以在应用中添加消息推送功能,向用户发送通知、消息等。这对于提升用户体验、增加用户粘性非常有帮助‌。

效果图:

一、登录极光官网

 进入【服务中心】-【开发者平台】

创建应用:【概览】- 【创建应用】,填写应用名称和图标(填写项目名称,项目logo就行,也可填写其他的)

 选择【消息推送】服务,点击下一步

设置应用包名(图中仅为示例,最好是×××.×××.××格式),点击下一步

 点击【推送设置】可查看android和ios的AppKey和Secret,后续需要使用

二、安装和配置uniapp极光插件 

1. 安装JPush插件

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

2. 安装JCore插件 

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

3. 导入插件到项目 

4. 插件配置

打卡manifest.json的源码视图,找到 nativePlugins 节点
配置JG-JCore,设置JPUSH_APPKEY_ANDROID

三、编写代码

在App.vue中编写如下代码:(注意:极光推送信息通知回调中那个路径要改,路径就是你点击通知会打开到这个路径对应的页面) 

<script>
// #ifdef APP-PLUS
var jpushModule = uni.requireNativePlugin("JG-JPush");
// #endif

export default {
methods: {
// 通知消息
getJpushModule() {
// #ifdef APP-PLUS
//禁止横屏
plus.screen.lockOrientation("portrait-primary");

//极光推送
jpushModule.setLoggerEnable(true);
jpushModule.initJPushService()
// // 设置别名
// jpushModule.setAlias({
// alias: '',
// sequence: 1
// });

this.getNotificationEnabled();
//监听 极光推送连接状态
jpushModule.addConnectEventListener((result) => {
console.log('监听 极光推送连接状态', result);
let connectEnable = result.connectEnable;
uni.$emit('connectStatusChange', connectEnable);
});
//极光推送的消息通知回调
jpushModule.addNotificationListener((result) => {
jpushModule.setBadge(0);
plus.runtime.setBadgeNumber(0);
let notificationEventType = result.notificationEventType;
// let woopId = result.extras && result.extras.dataType === 'woop' && result.extras.value;
console.log('通知', result, notificationEventType);
// 点击事件
if (notificationEventType == 'notificationOpened') {
uni.navigateTo({
url: '/pages/mine-merchant/order-management/order-management'
});
}
});
uni.$on('connectStatusChange', (connectStatus) => {
var connectStr = '';
if (connectStatus == true) {
connectStr = '已连接';
this.getRegistrationID();
} else {
connectStr = '未连接';
}
console.log('监听到了连接状态变化 --- ', connectStr);
});
//#endif
},
getRegistrationID() {
jpushModule.getRegistrationID((result) => {
let registerID = result.registerID;
console.log('获取registerID', registerID);
this.setSto('registerID', registerID);
});
},
getNotificationEnabled() {
if (uni.getSystemInfoSync().platform == 'ios') {
jpushModule.requestNotificationAuthorization((result) => {
let status = result.status;
if (status < 2) {
this.noticMsgTool();
}
});
} else {
jpushModule.isNotificationEnabled((result) => {
console.log('判断android是否打开权限1:true,0:false', result);
if (result.code == 0) {
//如果为0则表示 未打开通知权限
this.noticMsgTool();
}
});
}
},
noticMsgTool() {
if (uni.getSystemInfoSync().platform == 'ios') {
//苹果打开对应的通知栏
uni.showModal({
title: '通知权限开启提醒',
content: '您还没有开启通知权限,无法接受到消息通知,请前往设置!',
showCancel: false,
confirmText: '去设置',
success: function(res) {
if (res.confirm) {
var app = plus.ios.invoke('UIApplication', 'sharedApplication');
var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
plus.ios.invoke(app, 'openURL:', setting);
plus.ios.deleteObject(setting);
plus.ios.deleteObject(app);
}
}
});
} else {
//android打开对应的通知栏
var main = plus.android.runtimeMainActivity();
var pkName = main.getPackageName();
var uid = main.getApplicationInfo().plusGetAttribute('uid');
uni.showModal({
title: '通知权限开启提醒',
content: '您还没有开启通知权限,无法接受到消息通知,请前往设置!',
showCancel: false,
confirmText: '去设置',
success: function(res) {
if (res.confirm) {
var Intent = plus.android.importClass('android.content.Intent');
var Build = plus.android.importClass('android.os.Build');
//android 8.0引导
if (Build.VERSION.SDK_INT >= 26) {
var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
} else if (Build.VERSION.SDK_INT >= 21) {
//android 5.0-7.0
var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
intent.putExtra('app_package', pkName);
intent.putExtra('app_uid', uid);
} else {
//(<21)其他--跳转到该应用管理的详情页
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts('package', mainActivity.getPackageName(), null);
intent.setData(uri);
}
// 跳转到该应用的系统通知设置页
main.startActivity(intent);
}
}
});
}
},
},
async onLaunch() {
//#ifdef APP-PLUS
this.getJpushModule();
//#endif
},
}
</script>

四、调试运行

五、测试推送

ok,结束,手机上就会收到推送通知。


原文地址:https://blog.csdn.net/weixin_52830464/article/details/143823231

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!