SuperApp:Integrate the WindVane miniapp container into a Flutter app

Procedure

If you want to integrate the WindVane miniapp container into a Flutter app, you must integrate the WindVane SDK into a native app, and use MethodChannel to call methods provided by the WindVane SDK in the native app to open a miniapp. Perform the following operations:

1. Integrate the WindVane SDK into a native Android or iOS app.

2. Create a MethodChannel instance in Flutter to enable the communication between Flutter and the native app, and then define the methods that you want to call.

3. Implement the methods that are defined by MethodChannel in the Android or iOS app.

4. Use the created MethodChannel instance in Flutter to call the methods defined in the native app.

Step 1: Integrate WindVane into a native app

For more information about how to integrate WindVane into a native app, see the following topics:

• Integrate the WindVane miniapp container into an Android app

• Integrate the WindVane miniapp container into an iOS app

Step 2: Create a MethodChannel instance in Flutter

Create a MethodChannel instance in Flutter to enable the communication between Flutter and the native app. Sample code:

class WindVaneMiniAppManager {
 static const MethodChannel channel = const MethodChannel("windvane_miniapp");
}

Step 3: Implement MethodChannel in the native app

Android

1. Inherit FlutterActivity.

2. Implement the configureFlutterEngine method to create a MethodChannel instance.

   Important

   The channel name that you specify for MethodChannel in the native app must be the same as the channel name that you specified for MethodChannel in Flutter in Step 2: Create a MethodChannel instance in Flutter.

   In the following sample code, three methods are defined:

   • loadMiniApp: opens a miniapp.

   • initWindVaneMiniApp: initializes WindVane.

   • getMiniApps: queries miniapps.

   @Override
   public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
     super.configureFlutterEngine(flutterEngine);
     GeneratedPluginRegistrant.registerWith(flutterEngine);
     MethodChannel channel = new MethodChannel(flutterEngine.getDartExecutor(),
   			WINDVANE_MINIAPP);
     channel.setMethodCallHandler((methodCall, result) -> {
       String method = methodCall.method;
       if ("initMiniApp".equals(method)) {
         initMiniApp(result);
       } else if ("getMiniAppList".equals(method)) {
         getMiniAppList(result);
       } else if ("openMiniapp".equals(method)) {
         openMiniApp(methodCall, result);
       }});
   }

   • You can use MethodCall.method to query the name of a method.

   • You can use MethodCall.argument("${key}") to query the parameter of a method.

   • You can check the result of a method by using MethodChannel.Result.success or MethodChannel.Result.error that is returned after the method is called.

iOS

1. Inherit FlutterViewController.

2. Create a MethodChannel instance.

   @interface EMASMainViewController : FlutterViewController
   
   @end
   
   @interface EMASMainViewController ()
   @property (nonatomic, strong) FlutterMethodChannel* messageChannel;
   @end
   
   @implementation EMASMainViewController
   - (void)viewDidLoad {
       [super viewDidLoad]; 
       [self configMessageChannel];
   }
   
   -(void) configMessageChannel{
       // Query the current controller.
   //    FlutterViewController* controller = (FlutterViewController*)[UIApplication sharedApplication].delegate.window.rootViewController;
   
       
       self.messageChannel = [FlutterMethodChannel methodChannelWithName:@"windvane_miniapp" binaryMessenger:self.binaryMessenger];
       
       __weak __typeof__(self) weakSelf = self;
       [self.messageChannel setMethodCallHandler:^(FlutterMethodCall * _Nonnull call, FlutterResult  _Nonnull result) {
           NSLog(@"call method is %@",call.method);
           
           __strong typeof(weakSelf) strongSelf = weakSelf;
           NSString *method = call.method;
           
           if ([method isEqualToString:@"initMiniApp"]) {
               [strongSelf initWindVaneMiniApp:call result:result];
           } else if ([method isEqualToString:@"openMiniapp"]) {
               [strongSelf loadMiniApp:call result:result];
           } else if ([method isEqualToString:@"getMiniAppList"]) {
               [strongSelf getMiniApps:call result:result];
           }
           
       }];
       
   }
   @end

Step 4: Call MethodChannel

Use the created MethodChannel instance in Flutter to call the methods defined in the native app. Sample code:

WindVaneMiniAppManager.channel.invokeMethod(
 "openMiniapp", {'appId': appId}).then((value) => {});