SuperApp:How to use the Mini App JsApi white label

Introduction

const authorize = () =>{
  window.WindVane.call('WVAuthorize', 'authorize', {}, function(e) { ... }, function(e) { ... });
};
document.addEventListener('WV.Event.WVBluetooth.characteristicValueChanged', function(e) { ... }, false);

As shown in the above code snippet, some customers do not want to use the "WindVane" nameSpace and "WV" classNamePrefix in the mini app code. They hope to customize the above "WindVane" nameSpace and "WV" classNamePrefix. Therefore, three new configurable items are added in config as follows:

1. superAppNameSpace is used to set the window object name for the mini app to access JsApi. The default value is "WindVane"

2. jsApiClassNamePrefix is used to set a custom JsApi class name prefix, the default value is "WV"

3. windvaneBackwardCompatible is used to set whether it is compatible with old versions of mini app. The default value true indicates that it is compatible with old versions of mini app.

New configuration items & usage methods

a. New configuration items

- (void)initConfig {


    EMASMiniAppInitConfig *miniAppInitConfig = [EMASMiniAppInitConfig new];

    ...

    //new config item
    miniAppInitConfig.windvaneBackwardCompatible = YES;
    miniAppInitConfig.superAppNameSpace = @"your NameSpace";
    miniAppInitConfig.jsApiClassNamePrefix = @"your ClassNamePrefix";

    ...

    EMASMiniAppServiceImpl *miniAppService = [EMASMiniAppServiceImpl new];
    [miniAppService initialize:miniAppInitConfig];

}

Use Cases

Define SuperAppNameSpace as "SuperApp" and JsApiClassNamePrefix as "SA".

- (void)initConfig {


    EMASMiniAppInitConfig *miniAppInitConfig = [EMASMiniAppInitConfig new];

    ...

    //new config item
    miniAppInitConfig.windvaneBackwardCompatible = YES;
    miniAppInitConfig.superAppNameSpace = @"SuperApp";
    miniAppInitConfig.jsApiClassNamePrefix = @"SA";

    ...

    EMASMiniAppServiceImpl *miniAppService = [EMASMiniAppServiceImpl new];
    [miniAppService initialize:miniAppInitConfig];

}

After the configuration is complete, compare the mini app JSAPI calls.

// Call jsapi before customization
const authorize = () =>{
  window.WindVane.call('WVAuthorize', 'authorize', {}, function(e) { ... }, function(e) { ... });
};
document.addEventListener('WV.Event.WVBluetooth.characteristicValueChanged', function(e) { ... }, false);


// Call jsapi after customization
const authorize = () =>{
    window.SuperApp.call('SAAuthorize', 'authorize', {}, function(e) { ... }, function(e) { ... });
};
document.addEventListener('SA.Event.SABluetooth.characteristicValueChanged', function(e) {
  ...
}, false);

As shown in the above code snippet, if NameSpace and ClassNamePrefix are set to "SuperApp" and "SA" respectively, when the mini app calls JsApi, NameSpace is changed from WindVane -> SuperApp, and ClassNamePrefix is changed from WV... -> SA...

b. Configuration Method

1. For users whose mini app only use "WindVane" NameSpace and "WV" ClassNamePrefix, there is no need to configure these three configuration items additionally and the default values can be used.

2. For users who only use custom NameSpace and custom ClassNamePrefix for all mini app, the configuration is as follows:

- (void)initConfig {


    EMASMiniAppInitConfig *miniAppInitConfig = [EMASMiniAppInitConfig new];

    ...

    //new config item
    miniAppInitConfig.windvaneBackwardCompatible = NO;
    miniAppInitConfig.superAppNameSpace = @"your NameSpace";
    miniAppInitConfig.jsApiClassNamePrefix = @"your ClassNamePrefix";

    ...

    EMASMiniAppServiceImpl *miniAppService = [EMASMiniAppServiceImpl new];
    [miniAppService initialize:miniAppInitConfig];

}

3. For some mini app still use the "WindVane" NameSpace and "WV" ClassNamePrefix. For other new versions of mini app that use custom NameSpace and custom ClassNamePrefix,

   The configuration is as follows:

- (void)initConfig {


    EMASMiniAppInitConfig *miniAppInitConfig = [EMASMiniAppInitConfig new];

    ...

    // new config item
    miniAppInitConfig.windvaneBackwardCompatible = YES;
    miniAppInitConfig.superAppNameSpace = @"your NameSpace";
    miniAppInitConfig.jsApiClassNamePrefix = @"your ClassNamePrefix";

    ...

    EMASMiniAppServiceImpl *miniAppService = [EMASMiniAppServiceImpl new];
    [miniAppService initialize:miniAppInitConfig];

}