SuperApp:Integrate the WindVane miniapp container into a ReactNative app

Procedure

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

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

2. Define a native module in the Android or iOS app, and then define and implement the corresponding methods.

3. Import the defined native module to the JavaScript environment, and then call the corresponding methods in the native module.

Step 1: Integrate the WindVane miniapp container 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: Define and implement a native module in the native app

Android

1. Create a Java class that inherits ReactContextBaseJavaModule, and implement the getName() method in which a native module is defined.

   Sample code:

   public class EMASMiniAppModule extends ReactContextBaseJavaModule {
     @NonNull
     @Override
     public String getName() {
       return "EMASMiniAppModule";
     }
   }

2. Use the @ReactMethod annotation to define the methods that can be called in JavaScript.

   Sample code:

   @ReactMethod
   public void openMiniApp(String appId, Promise promise) {
     IMiniAppService miniAppService = ServiceManager.getInstance().getService(
   			IMiniAppService.class.getName());
     if (miniAppService != null) {
       miniAppService.openMiniApp(this, appId, null, new OnOpenMiniAppListener() {
         @Override
         public void onOpenMiniApp() {
           //start open
         }
         
         @Override
         public void onOpenSuccess(String appId) {
           WritableMap result = new WritableNativeMap();
           result.putString("success", "true");
           promise.resolve(result);
         }
         
         @Override
         public void onOpenFailed(String appId, int errorCode) {
           WritableMap result = new WritableNativeMap();
           result.putString("success", "false");
           result.putString("errorCode", errorCode + "");
           promise.resolve(result);
         }
       });
     }
   }

3. Create a Java class that inherits ReactPackage, and implement the createNativeModules method in which a native module class is registered.

   Sample code:

   public class EMASMiniAppPackage implements ReactPackage {
     @NonNull
     @Override
     public List<NativeModule> createNativeModules(
       	@NonNull ReactApplicationContext reactApplicationContext) {
       List<NativeModule> modules = new ArrayList<>();
       modules.add(new EMASMiniAppModule());
       return modules;
     }
     
     @NonNull
     @Override
     public List<ViewManager> createViewManagers(
       	@NonNull ReactApplicationContext reactApplicationContext) {
       return Collections.emptyList();
     }
   }

4. Register the created ReactPackage class in the getPackages() method of the Application class.

   Sample code:

   @Override
   protected List<ReactPackage> getPackages() {
     @SuppressWarnings("UnnecessaryLocalVariable")
     List<ReactPackage> packages = new PackageList(this).getPackages();
     // Packages that cannot be autolinked yet can be added manually here, for example:
     packages.add(new EMASMiniAppPackage());
     return packages;
   }

iOS

1. Create a class that implements the RCTBridgeModule protocol.

   Sample code:

   #import <React/RCTBridgeModule.h>
   
   @interface EMASMiniAppModule : NSObject <RCTBridgeModule>
   @end

2. Use the RCT_EXPORT_MODULE macro to export the native modules that can be called in JavaScript.

   Sample code:

   #import "EMASMiniAppModule.h"
   
   @implementation EMASMiniAppModule
   
   RCT_EXPORT_MODULE();
   
   @end

3. Use the RCT_EXPORT_METHOD macro to define and export methods that can be called in JavaScript.

   Sample code:

   #import "EMASMiniAppModule.h"
   
   @implementation EMASMiniAppModule
   
   RCT_EXPORT_MODULE();
   
   RCT_REMAP_METHOD(openMiniApp, 
                    openMiniAppWithAppId:(NSString *)appId
                    openMiniAppWithResolver:(RCTPromiseResolveBlock)resolve
                    openMiniAppWithRejecter:(RCTPromiseRejectBlock)reject)
   {
     id<EMASMiniAppService> miniAppService = [[EMASServiceManager sharedInstance] serviceForProtocol:@"EMASMiniAppService"];
     if (miniAppService) {
       [miniAppService openMiniApp:appId openConfiguration:nil completionBlock:^(int resultCode, NSDictionary * _Nonnull resultDict) {
         resolve(nil);
       }];
     }
   }
   
   @end

Step 3: Call the native module in JavaScript

1. Import the NativeModules interface to the JavaScript file.

   Sample code:

   import { NativeModules } from 'react-native';

2. Use the NativeModules interface to obtain the native module defined in the native app.

   Sample code:

   const EMASMiniAppModule = NativeModules.EMASMiniAppModule
     ? NativeModules.EMASMiniAppModule
     : new Proxy(
       {},
       {
         get() {
           throw new Error(LINKING_ERROR);
         },
       }
     );

3. Call the methods defined in the native module.

   Sample code:

   EMASMiniAppModule.openMiniApp(`${appId}`).then((value) => {});