通过集成JG-JPush和JG-JCore插件,可以在应用中添加消息推送功能,向用户发送通知、消息等。这对于提升用户体验、增加用户粘性非常有帮助。
效果图:
一、登录极光官网
官网链接:portalhttps://www.jiguang.cn/console/#/home点击去创建应用
创建应用:填写应用名称和图标(填写项目名称,项目logo就行,也可填写其他的)
选择【消息推送】服务,点击下一步
设置应用包名(图中仅为示例,最好是×××.×××.××格式),点击保存,点击下一步
点击【推送设置】可查看android和ios的AppKey和Secret,后续需要使用
二、安装和配置uniapp极光插件
1. 安装JPush插件
极光推送 JPush 官方 SDK - DCloud 插件市场
2. 安装JCore插件
极光推送 JCore 官方 SDK - DCloud 插件市场
安装完后可以在我的插件里查看到购买的插件,链接:DAccount Service
3. 导入插件到项目
4. 插件配置
打卡manifest.json的源码视图,找到 nativePlugins 节点
配置JG-JCore,设置JPUSH_APPKEY_ANDROID
三、编写代码
在App.vue中编写如下代码:(注意:极光推送信息通知回调中那个路径要改,路径就是你点击通知会打开到这个路径对应的页面)
<script>// #ifdef APP-PLUSvar jpushModule = uni.requireNativePlugin("JG-JPush");// #endifexport 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.0var 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-PLUSthis.getJpushModule();//#endif},}
</script>
四、调试运行
五、测试推送
ok,结束,手机上就会收到推送通知。