SuperApp：ReactNative App接入WindVane小程序容器

接入流程

ReactNative App接入WindVane小程序容器，首先需要在Native端集成小程序容器，然后通过ReactNative提供的Native Module能力，调用Native端小程序容器SDK提供的方法查询并打开小程序，详细流程如下：

1. Android端和iOS端集成小程序SDK。

2. 在Android端和iOS端定义Native Module的名称，定义并实现相应的方法。

3. 在JavaScript端中调用导入定义好的Native Module，并调用Native Module中相应的方法。

步骤一、Native端集成小程序容器

集成小程序容器的详细操作请参见：

• Android接入操作

• IOS接入操作

步骤二、Native端定义并实现Native Module

Android

1. 创建一个新的Java类，这个类继承ReactContextBaseJavaModule，并实现getName()方法，在该方法中定义Native Module的名称。

   示例代码如下：

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

2. 使用注解@ReactMethod，定义JavaScript端可以调用的方法。

   示例代码如下：

   @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. 创建一个新的Java类，这个类继承ReactPackage，并实现createNativeModules方法，在该方法中注册新建Native Module类。

   示例代码如下：

   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. 在Application类的getPackages()方法中注册新建的ReactPackage

   示例代码如下：

   @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. 创建一个新类，实现RCTBridgeModule协议。

   示例代码如下：

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

2. 使用宏RCT_EXPORT_MODULE导出可以被JavaScript端调用的Native Module。

   示例代码如下：

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

3. 使用宏RCT_EXPORT_METHOD定义并导出JavaScript端可以调用的方法。

   示例代码如下：

   #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

步骤三、在JavaScript端调用Native Module

1. 在JavaScript文件中导入NativeModules这个接口

   示例代码如下：

   import { NativeModules } from 'react-native';

2. 通过NativeModules接口获取在Native端定义好的Native Module

   示例代码如下：

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

3. 调用Native Module中定义好的方法

   示例代码如下：

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