Flutter 63: 图解 Flutter 集成极光 JPush 小结

简介: 0 基础学习 Flutter,第六十三步:学习一下 Flutter 版推送!

      我们每天都在接收各种推送消息,而最初的 Flutter 推送主要是与原生交互进行;现阶段极光推出了 Flutter JPush,虽不如原生强大,但日常需求均可满足,小菜尝试集成了 Flutter 版的 JPush

前期准备

  1. 极光 后台注册账号并【创建应用】;

_001

  1. 在【推送设置】中设置 Android/iOS 基本信息,小菜以 Android 为例,注意应用包名为 ApplicationID

  1. 在【应用信息】中获取 AppKey 等关键参数;

中期集成

Android 配置

      与原生接入 JPush 相同,需要在 Android Gradle 加入配置信息;

defaultConfig {
    applicationId "com.example.flutterapp01"
    minSdkVersion 16
    targetSdkVersion 28
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

    ndk {
        //选择要添加的对应 cpu 类型的 .so 库。
        abiFilters 'armeabi', 'armeabi-v7a', 'x86', 'x86_64', 'mips', 'mips64', 'arm64-v8a'
    }

    manifestPlaceholders = [
        JPUSH_PKGNAME : "com.example.flutterapp01",
        JPUSH_APPKEY : "AppKey", // NOTE: JPush 上注册的包名对应的 Appkey.
        JPUSH_CHANNEL : "developer-default", //暂时填写默认值即可.
    ]
}

Flutter 配置

      按照平常插件接入的方法在工程 pubspec.yaml 中加入 jpush_flutter: 0.1.0 并同步即可;

dependencies:
  jpush_flutter: 0.1.0

API 调用

JPush 的使用方式很简单,Demo 中都很全面,小菜仅尝试常见的方法;

1. 初始化

      在原生开发中各类三方的插件几乎均须在 Application 中初始化,同样 Flutter 也需要先调用 JPush.setup 进行初始化;其中 channel 可自定义,小菜未从源码中获取准确消息,个人理解与高版本的 Android Channel 通道类似;

      初始化成功之后即可获取消息推送,只是暂不能处理;

final JPush _jPush = JPush();

@override
void initState() {
  super.initState();
  initPlatformState();
}

Future<void> initPlatformState() async {
  _jPush.setup(
    appKey: "后台获取 AppKey",
    channel: "flutter_channel",
    production: false,
    debug: true,
  );
  if (!mounted) return;
}
2. RegistrationID

      每个用户均有作为接收消息的唯一标识 RegistrationID,方便对单个或多个设备进行推送测试;

_jPush.getRegistrationID().then((rid) {
  setState(() {
    _result = "JPush RegistrationID 唯一标识:\n $rid";
    _registID = rid;
  });
});
3. 本地通知

      JPush 提供了本地推送的方法,可以灵活调用获取本地推送消息;注意 idint 类型,设置不能过长;

// 源码分析
const LocalNotification ({
    @required this.id,          // 通知 id, 可用于取消通知
    @required this.title,       // 通知标题
    @required this.content,     // 通知内容
    @required this.fireTime,    // 通知触发时间(毫秒)
    this.buildId,               // 通知样式:1 为基础样式,2 为自定义样式(需先调用 'setStyleCustom' 设置自定义样式)
    this.extra,                 // 额外信息
    this.badge = 0,             // iOS:本地推送触发后应用角标值
    this.soundName,             // iOS:指定推送的音频文件
    this.subtitle               // iOS:子标题
}): 

onTap: () {
  var fireDate = DateTime.fromMillisecondsSinceEpoch(DateTime.now().millisecondsSinceEpoch + 3000);
  var localNotification = LocalNotification(
      id: 000001,
      title: 'Local Push 本地标题',
      buildId: 1,
      content: 'Local Push 本地内容',
      fireTime: fireDate,
      extra: {"extra_key": "extra_value"});
  _jPush.sendLocalNotification(localNotification).then((res) {
    setState(() {
      _result = res;
    });
  });
}

4. 通知类消息

      小菜集成原生推送时分为 通知类消息透传类消息(自定义消息),两种推送略有不同;通知类消息可以通过极光后台配置消息标题、消息内容等多种信息,且 App 接收到之后直接调用推送通道展现在通知栏中;

try {
  _jPush.addEventHandler(
    onReceiveNotification: (Map<String, dynamic> message) async {
      // 获取通知数据
      print('Flutter JPush 获取通知类数据:\n $message');
      setState(() {
        _result = 'Flutter JPush 获取通知类数据:\n $message';
        _message = message;
      });
    }
  );
} on PlatformException {
  platformVersion = 'Failed to get platform version.';
}
5. 透传类消息

      透传类消息通过极光后台配置发送,主要配置通知内容;App 接收到不会直接调用推送通道,获取内容后我们可根据内容灵活使用,是否展示推送消息或其他操作等;且通知类消息与透传类消息获取参数不同;

try {
  _jPush.addEventHandler(
    onReceiveMessage: (Map<String, dynamic> message) async {
      // 获取透传数据
      print('Flutter JPush 获取透传类数据:\n $message');
      setState(() {
        _result = 'Flutter JPush 获取透传类数据:\n $message';
        _message = message;
      });
    }
  );
} on PlatformException {
  platformVersion = 'Failed to get platform version.';
}
6. 推送点击监听

      获取到推送之后注定要有点击操作,JPush 也同样提供了监听方法,包括通知类消息和本地推送消息;

try {
  _jPush.addEventHandler(
    onOpenNotification: (Map<String, dynamic> message) async {
      // 点击通知信息
      print('Flutter JPush 点击通知消息:\n $message');
      setState(() {
        _result = 'Flutter JPush 点击通知消息:\n $message';
        _message = message;
      });
    }
  );
} on PlatformException {
  platformVersion = 'Failed to get platform version.';
}
7. 清空通知栏

      在用户收到推送通知后若未点击,原生 Android 可通过 NotificationManager.cancel() 清除通知,Flutter 也提供了清空通知栏方法;但小菜测试只可清空通知类推送消息,本地发送的通知消息无法清空;

Future clearAllNotifications() async {
  await _channel.invokeMethod('clearAllNotifications');
}

_jPush.clearAllNotifications();

后期测试

1. 通知类消息

  1. 在极光后台【发送通知】中按要求编辑目标平台、通知标题、通知内容、发送时间和选择目标等基本信息;

  1. App 接收消息,并展示推送消息,各参数如下:

2. 透传类消息

  1. 在极光后台【自定义消息】中按要求编辑目标平台、通知内容、发送时间和选择目标等基本信息;其中 Registration ID 为测试时获取的唯一标识;
  2. App 接收消息,不会展示推送消息,若需要可调用本地通知;各参数如下:
onOpenNotification: (Map<String, dynamic> message) async {
  setState(() {
    _result = 'Flutter JPush 点击通知消息:\n $message';
    _message = message;
    Map<String, dynamic> message2 = convert.jsonDecode(_message['extras']['cn.jpush.android.EXTRA']);
    if (message2['type'] == "1") {
      Toast.show('自定义通知消息!', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
    }
  });
}

onReceiveMessage: (Map<String, dynamic> message) async {
  setState(() {
    _result = 'Flutter JPush 获取透传类数据:\n $message';
    _message = message;
    Map<String, dynamic> message2 = convert.jsonDecode(_message['message']);
    var fireDate = DateTime.fromMillisecondsSinceEpoch(DateTime.now().millisecondsSinceEpoch + 2000);
    var localNotification = LocalNotification(
        id: message2['id'],
        title: message2['title'],
        buildId: 1,
        content: message2['context'],
        fireTime: fireDate,
        extra: {"type": message2['type']});
    _jPush.sendLocalNotification(localNotification).then((res) {
      setState(() { _result = res; });
    });
  });
}


      小菜认为 Flutter 版的极光推送与 Android 原生版本的差异在于,大部分的配置有 App 端移到了极光后台,包括图标 icon,页面处理,通知级别等;小菜仅尝试了基本的消息推送及处理,还是有很多细节需要认真学习;如有问题,请多多指导!

来源: 阿策小和尚

目录
相关文章
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
74 2
|
4月前
|
Dart Android开发
鸿蒙Flutter实战:03-鸿蒙Flutter开发中集成Webview
本文介绍了在OpenHarmony平台上集成WebView的两种方法:一是使用第三方库`flutter_inappwebview`,通过配置pubspec.lock文件实现;二是编写原生ArkTS代码,自定义PlatformView,涉及创建入口能力、注册视图工厂、处理方法调用及页面构建等步骤。
114 0
|
6月前
|
数据可视化 Linux Android开发
Flutter相关痛点解决问题之研发链路中的环境配置和打包集成问题如何解决
Flutter相关痛点解决问题之研发链路中的环境配置和打包集成问题如何解决
|
7月前
|
Dart 开发工具 Android开发
快速集成 Flutter Shorebird 热更新
Flutter Shorebird 是一种云端代码推送服务,可以让开发者在几分钟内集成,无需修改代码即可将更新推送到任何 Dart 代码,支持所有 Android 和 iOS 设备,并符合 App Store 和 Play Store 的规定。Shorebird 最大的优点是无代码侵入,快速集成,设计优秀。
263 2
快速集成 Flutter Shorebird 热更新
|
6月前
|
Android开发 Kotlin
Flutter集成fluwx编译出错:compileReleaseKotlin
Flutter集成fluwx编译出错:compileReleaseKotlin
114 2
|
6月前
|
iOS开发 Perl
IOS集成flutter_boost 3.0常见问题
IOS集成flutter_boost 3.0常见问题
106 0
|
8月前
|
安全 定位技术 API
探讨如何在Flutter中集成支付、地图等第三方服务,以及集成过程中需要注意的问题和最佳实践
【6月更文挑战第11天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,注意服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则包括选择地图服务、获取API密钥、初始化地图组件和添加交互功能。集成时要选择稳定插件、仔细阅读文档,处理错误,优化性能并遵循安全规范。随着Flutter生态发展,更多优质服务将可供选择。
136 2
|
9月前
|
前端开发 定位技术 API
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
【4月更文挑战第30天】本文介绍了在Flutter中集成第三方服务,如支付和地图,以增强应用功能和用户体验。开发者可通过官方或社区插件集成服务,关注服务选择、API调用、错误处理和用户体验。支付集成涉及选择服务、获取API密钥、引入插件、调用API及处理结果。地图集成则需选择地图服务、获取API密钥、初始化地图并添加交互功能。集成时注意选择稳定插件、阅读文档、处理异常、优化性能和遵循安全规范。随着Flutter生态发展,更多第三方服务将可供选择。
131 0
【Flutter前端技术开发专栏】Flutter中的第三方服务集成(如支付、地图等)
|
9月前
|
Dart 前端开发 Android开发
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互
【4月更文挑战第30天】本文探讨了如何在Flutter中集成和交互原生代码,以利用特定平台的API和库。当需要访问如蓝牙、特定支付SDK或复杂动画时,集成原生代码能提升效率和性能。集成方法包括:使用Platform Channel进行通信,借助现有Flutter插件,以及Android和iOS的Embedding。文中通过一个电池信息获取的例子展示了如何使用`MethodChannel`在Dart和原生代码间传递调用。这些技术使开发者能充分利用原生功能,加速开发进程。
142 0
【Flutter前端技术开发专栏】Flutter与原生代码的集成与交互

热门文章

最新文章

  • 1
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 3
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 4
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 7
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡