SuperApp:How to use the Mini App JsApi white label

SDK development can configure custom channels and JSAPI prefixes. If you need to use this function, please contact us.

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. setSuperAppNameSpace(String nameSpace) is used to set the window object name for the mini app to access JsApi. The default value is "WindVane"

2. setJsApiClassNamePrefix(String classNamePrefix) is used to set a custom JsApi class name prefix, the default value is "WV"

3. setWindVaneBackwardCompatible(boolean bool) 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

public static void init() {
    MiniAppInitConfig config = new MiniAppInitConfig.Builder()
            .setUseWindVane(true)
            .setHost("your.host.name")
            .setAppCode("your app code")
            .setAccessKey("your access key")
            .setSecretKey("your secret key")
    
            ...
    
           
            // new config item
            .setWindVaneBackwardCompatible(true)
            .setSuperAppNameSpace("your NameSpace")
            .setJsApiClassNamePrefix("your ClassNamePrefix")
    
            ...
    
            .build();
    IMiniAppService miniAppService = new MiniAppService();
    miniAppService.initialize(application, config);

}

Use Cases

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

public static void init() {
    MiniAppInitConfig config = new MiniAppInitConfig.Builder()
    .setUseWindVane(true)
    .setHost("your.host.name")
    .setAppCode("your app code")
    .setAccessKey("your access key")
    .setSecretKey("your secret key")

    ...

  
    // new config item
    .setWindVaneBackwardCompatible(true)
    .setSuperAppNameSpace("SuperApp")
    .setJsApiClassNamePrefix("SA")

    ...

    .build();
    IMiniAppService miniAppService = new MiniAppService();
    miniAppService.initialize(application, config);

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:

public static void init() {
    MiniAppInitConfig config = new MiniAppInitConfig.Builder()
            ...
    
           
            // new config item
            .setWindVaneBackwardCompatible(false)
            .setSuperAppNameSpace("your NameSpace")
            .setJsApiClassNamePrefix("your ClassNamePrefix")
    
            ...
    
            .build();
    IMiniAppService miniAppService = new MiniAppService();
    miniAppService.initialize(application, config);

}

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:

public static void init() {
    MiniAppInitConfig config = new MiniAppInitConfig.Builder()
            ...
    
           
            // new config item
            .setWindVaneBackwardCompatible(true)
            .setSuperAppNameSpace("your NameSpace")
            .setJsApiClassNamePrefix("your ClassNamePrefix")
    
            ...
    
            .build();
    IMiniAppService miniAppService = new MiniAppService();
    miniAppService.initialize(application, config);

}