Como usar o white label de JsApi para Mini Apps - SuperApp: Central de Documentação do Alibaba Cloud

O recurso de white label do SDK permite substituir o namespace padrão WindVane e o prefixo de nome de classe WV por identificadores próprios. Isso garante que as chamadas de JSAPI dos mini apps usem a sua marca em vez dos padrões do WindVane. Para ativar esse recurso, entre em contato conosco.

Visão geral

Por padrão, os mini apps chamam JSAPIs usando window.WindVane como namespace e WV como prefixo de nome de classe:

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

Para substituir esses padrões por identificadores próprios, configure os três parâmetros a seguir no MiniAppInitConfig.Builder durante a inicialização do SDK:

Parâmetro	Descrição	Padrão
`setSuperAppNameSpace(String nameSpace)`	Defina o nome do objeto window usado pelos mini apps para chamar JSAPIs.	`"WindVane"`
`setJsApiClassNamePrefix(String classNamePrefix)`	Defina um prefixo personalizado de nome de classe para chamadas de JSAPI.	`"WV"`
`setWindVaneBackwardCompatible(boolean bool)`	Controla se os mini apps ainda podem usar o namespace padrão `WindVane` e o prefixo `WV`. Defina como `false` após migrar todos os mini apps para o namespace personalizado.	`true`

setSuperAppNameSpace(String nameSpace) defina o nome do objeto window usado pelos mini apps para chamar JSAPIs. O valor padrão é "WindVane".
setJsApiClassNamePrefix(String classNamePrefix) especifica um prefixo personalizado de nome de classe para chamadas de JSAPI. O valor padrão é "WV".
setWindVaneBackwardCompatible(boolean bool) determina se os mini apps ainda podem usar o namespace padrão WindVane e o prefixo WV. Quando definido como true (padrão), os mini apps antigos permanecem compatíveis. Defina como false após migrar todos os mini apps para o namespace personalizado.

Configurar namespace e prefixo personalizados

Inicialização do SDK

Adicione os três parâmetros ao MiniAppInitConfig.Builder durante a inicialização do SDK:

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

}

Casos de uso

O exemplo abaixo define SuperAppNameSpace como "SuperApp" e JsApiClassNamePrefix como "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);

Após a inicialização, compare as chamadas de JSAPI antes e depois da personalização. Todos os exemplos usam o objeto window e o padrão de listener de eventos para invocar JSAPIs.

// 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);

Com o namespace definido como "SuperApp" e o prefixo de nome de classe como "SA", a convenção de chamada de JSAPI muda da seguinte forma: o namespace passa de WindVane para SuperApp e o prefixo de nome de classe muda de WV para SA.

Cenários de configuração

Escolha uma configuração conforme a dependência dos seus mini apps em relação aos identificadores padrão do WindVane:

Cenário	`setWindVaneBackwardCompatible`	`setSuperAppNameSpace`	`setJsApiClassNamePrefix`
Todos os mini apps usam o namespace padrão `WindVane` e o prefixo `WV`	Não necessário (aplica-se o padrão)	Não necessário	Não necessário
Todos os mini apps usam namespace e prefixo personalizados	`false`	Seu namespace personalizado	Seu prefixo personalizado
Alguns mini apps usam `WindVane`/`WV`; outros usam namespace e prefixo personalizados	`true`	Seu namespace personalizado	Seu prefixo personalizado

Se todos os mini apps usarem o namespace padrão WindVane e o prefixo WV, nenhuma configuração adicional será necessária, pois os padrões serão aplicados automaticamente.
Caso todos os mini apps usem namespace e prefixo personalizados, aplique a seguinte configuração:

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

}

Se alguns mini apps ainda usarem o namespace padrão WindVane e o prefixo WV, enquanto os mais recentes adotarem namespace e prefixo personalizados,

utilize a configuração abaixo:

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

}