SuperApp:WindVane ミニアプリ コンテナーを Flutter アプリに統合する

手順

WindVane ミニアプリ コンテナーを Flutter アプリに統合するには、WindVane SDK をネイティブアプリに統合し、MethodChannel を使用してネイティブアプリで WindVane SDK によって提供されるメソッドを呼び出してミニアプリを開く必要があります。次の操作を実行します。

1. WindVane SDK をネイティブ Android アプリまたは iOS アプリに統合します。

2. MethodChannel インスタンスを Flutter で作成して、Flutter とネイティブアプリ間の通信を有効にし、呼び出すメソッドを定義します。

3. Android アプリまたは iOS アプリで MethodChannel によって定義されたメソッドを実装します。

4. 作成した MethodChannel インスタンスを Flutter で使用して、ネイティブアプリで定義されたメソッドを呼び出します。

手順 1: WindVane をネイティブアプリに統合する

WindVane をネイティブアプリに統合する方法の詳細については、次のトピックをご参照ください。

• WindVane ミニアプリ コンテナーを Android アプリに統合する

• WindVane ミニアプリ コンテナーを iOS アプリに統合する

手順 2: Flutter で MethodChannel インスタンスを作成する

MethodChannel インスタンスを Flutter で作成して、Flutter とネイティブアプリ間の通信を有効にします。サンプルコード:

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

手順 3: ネイティブアプリで MethodChannel を実装する

Android

1. FlutterActivity を継承します。

2. configureFlutterEngine メソッドを実装して、MethodChannel インスタンスを作成します。

   重要

   ネイティブアプリで MethodChannel に指定するチャネル名は、手順 2: Flutter で MethodChannel インスタンスを作成する で Flutter の MethodChannel に指定したチャネル名と同じである必要があります。

   次のサンプルコードでは、3 つのメソッドが定義されています。

   • loadMiniApp: ミニアプリを開きます。

   • initWindVaneMiniApp: WindVane を初期化します。

   • getMiniApps: ミニアプリをクエリします。

   @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);
       }});
   }

   • MethodCall.method を使用して、メソッドの名前をクエリできます。

   • MethodCall.argument("${key}") を使用して、メソッドのパラメーターをクエリできます。

   • メソッドの呼び出し後に返される MethodChannel.Result.success または MethodChannel.Result.error を使用して、メソッドの結果を確認できます。

iOS

1. FlutterViewController を継承します。

2. MethodChannel インスタンスを作成します。

   @interface EMASMainViewController : FlutterViewController
   
   @end
   
   @interface EMASMainViewController ()
   @property (nonatomic, strong) FlutterMethodChannel* messageChannel;
   @end
   
   @implementation EMASMainViewController
   - (void)viewDidLoad {
       [super viewDidLoad]; 
       [self configMessageChannel];
   }
   
   -(void) configMessageChannel{
       // 現在の ViewController を取得します。
   //    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

手順 4: MethodChannel を呼び出す

作成した MethodChannel インスタンスを Flutter で使用して、ネイティブアプリで定義されたメソッドを呼び出します。サンプルコード:

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