“This is the 25th day of my participation in the August Gwen Challenge, for more details: August Gwen Challenge” juejin.cn/post/698796…

We receive all kinds of push messages every day, and the initial Flutter push mainly interacts with the native; At present, Aurora launched Flutter JPush, which is not as powerful as the original, but can meet daily needs. The small dish tries to integrate Flutter JPush.

preparation

  1. Register an account in aurora backstage and [create an application];

  1. Set basic Android/iOS information in push Settings. Take Android as an example. Note that the package name is ApplicationID.

  1. Obtain key parameters such as AppKey from application Information.

Medium-term integrated

Android configuration

As with native access JPush, you need to add configuration information to Android Gradle.

defaultConfig { applicationId "com.example.flutterapp01" minSdkVersion 16 targetSdkVersion 28 versionCode flutterVersionCode.toInteger() versionName flutterVersionName testInstrumentationRunner "Androidx. Test. Runner. AndroidJUnitRunner" the NDK {/ / choose to add a corresponding type of CPU. So the library. abiFilters 'armeabi', 'armeabi-v7a', 'x86', 'x86_64', 'mips', 'mips64', 'arm64-v8a' } manifestPlaceholders = [ JPUSH_PKGNAME : "com.example.flutterapp01", JPUSH_APPKEY : "AppKey", // NOTE: JPUSH_CHANNEL: "developer-default", // enter the default value for now.]}Copy the code

Flutter configuration

Jpush_flutter: 0.1.0 was added to project Pubspec. yaml and synchronized.

Dependencies: jpush_flutter: 0.1.0 fromCopy the code

API call

The use of JPush is very simple, the Demo is very comprehensive, small dishes only try common methods;

1. Initialization

In native development, all types of three-party plug-ins must be initialized in Application. Flutter also needs to be initialized by calling jpusher setup first. The channel can be customized, small dish does not get accurate information from the source code, personal understanding is similar to the high version of Android Channel channel;

After the initialization is successful, the message push can be obtained, but temporarily cannot be processed;

final JPush _jPush = JPush(); @override void initState() { super.initState(); initPlatformState(); } Future<void> initPlatformState() async {_jpush.setup (appKey: "background get appKey ", channel: "flutter_channel", production: false, debug: true, ); if (! mounted) return; }Copy the code
2. RegistrationID

Each user has a unique RegistrationID for receiving messages to facilitate push testing on single or multiple devices;

_jpush.getregistrationId ().then((RID) {setState(() {_result = "JPush RegistrationID :\n $RID "; _registID = rid; }); });Copy the code
3. Local notification

JPush provides a local push method, which can be flexibly called to obtain local push messages. Note that the id is an int and cannot be too long.

Const LocalNotification ({@required this.id, // notification ID, which can be used to unnotify @required this.title, // Notification title @required this.content, // notification content @required this.fireTime, // Notification trigger time (ms) this.buildId, // Notification style: This. Extra, // Additional information this.badge = 0, // iOS: This.soundname, // iOS: this. Subtitle // iOS: subtitle}): 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; }); }); }Copy the code

4. Notification messages

When xiaocai integrates native push, it is divided into notification message and transparent message (custom message), which are slightly different. Notification messages can be configured with message title, message content and other information through the aurora background, and the App directly calls the push channel to display in the notification bar after receiving them.

try { _jPush.addEventHandler( onReceiveNotification: (Map<String, dynamic> message) async {// get notification data print('Flutter JPush get notification data :\n $message'); SetState (() {_result = 'Flutter JPush gets notification class data :\n $message'; _message = message; }); }); } on PlatformException { platformVersion = 'Failed to get platform version.'; }Copy the code
5. Transparent message transmission

The transparent message is sent through the aurora background configuration, mainly configuring the notification content; The App will not directly call the push channel after receiving the content. After obtaining the content, we can flexibly use it according to the content, whether to display push messages or other operations; The parameters of notification message and transparent message are different.

try { _jPush.addEventHandler( onReceiveMessage: (Map<String, dynamic> message) async {print('Flutter JPush fetch Flutter data :\n $message'); SetState (() {_result = 'Flutter JPush gets transparent class data :\n $message'; _message = message; }); }); } on PlatformException { platformVersion = 'Failed to get platform version.'; }Copy the code
6. Push click monitor

JPush also provides listening methods, including notification messages and local push messages.

try { _jPush.addEventHandler( onOpenNotification: (Map<String, dynamic> message) async {print('Flutter JPush Flutter :\n $message'); SetState (() {_result = 'Flutter JPush click notification message :\n $message'; _message = message; }); }); } on PlatformException { platformVersion = 'Failed to get platform version.'; }Copy the code
7. Clear the notification bar

If not click after users receive push notifications, native Android by NotificationManager. Cancel () to clear notice, Flutter also provides a clear notification bar method; However, the small dish test can only clear the notification push messages, but cannot clear the notification messages sent locally.

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

_jPush.clearAllNotifications();
Copy the code

The late testing

1. Notification messages

  1. Edit target platform, notification title, notification content, sending time, target selection and other basic information in aurora background [Notification Sending] as required;

  1. The App receives the message and displays the push message. The parameters are as follows:

2. Transparent message transmission

  1. Edit basic information such as target platform, notification content, sending time and target selection in aurora background [Custom Message] as required; Where Registration ID is the unique identification obtained during the test;

  1. App will not display push messages when receiving messages. Local notification can be called if necessary. The parameters are as follows:
OnOpenNotification: (Map<String, dynamic> message) async {setState(() {_result = 'Flutter JPush click notification message :\n $message'; _message = message; Map<String, dynamic> message2 = convert.jsonDecode(_message['extras']['cn.jpush.android.EXTRA']); If (message2['type'] == "1") {toast.show (' user-defined notification message! ', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM); }}); } onReceiveMessage: (Map<String, dynamic> message) async {setState(() {_result = 'Flutter JPush gets pass-through class data :\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; }); }); }); }Copy the code

The difference between the Aurora push of Flutter and the Android native version is that most of the configuration of Flutter has been moved to the Aurora background, including icon, page processing, notification level, etc. Xiao CAI only tried the basic message push and processing, there are still many details to learn carefully; If you have any questions, please give more guidance!

Source: Little Monk A Ce