Todos os produtos
Search
Central de documentação

Mobile Platform as a Service:Definir o botão no canto superior direito

Última atualização: Jun 28, 2026

Esta API define as propriedades do botão no canto superior direito da barra de título. Para exibi-lo, chame também showOptionMenu.

Nota

Devido às restrições do App Transport Security (ATS) da Apple, a URL do ícone deve ser um link HTTPS ou uma string Base64. O sistema ignora links HTTP.

Usar a API setOptionMenu

AlipayJSBridge.call('setOptionMenu', {
  title : 'Button',  // Choose one from title, icon, and icontype
  redDot : '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
  color : '#ff00ff00', // Must be an ARGB color value that starts with #.
});

Exemplo de código

Defina diferentes tipos de botões no canto superior direito:

<h1>Click the buttons below to see different effects</h1>

<a href="javascript:void(0)" class="btn button">Single button</a>
<a href="javascript:void(0)" class="btn icon">Single icon</a>
<a href="javascript:void(0)" class="btn menu">Multiple menus (9.9.3)</a>
<a href="javascript:void(0)" class="btn reset">Reset</a>
<a href="javascript:void(0)" class="btn hide">Hide</a>
<a href="javascript:void(0)" class="btn show">Show</a>

<script>
function ready(callback) {
  // If jsbridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(e) {
  document.querySelector('.button').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      title : 'Button',
      redDot : '5', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
      color : '#ff00ff00', // Must be an ARGB color value that starts with #.
    });
    AlipayJSBridge.call('showOptionMenu');
  });

  document.querySelector('.icon').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
      redDot : '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
    });
    AlipayJSBridge.call('showOptionMenu');
  });

  document.querySelector('.menu').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      // The display order is from right to left.
      menus: [{
        icontype: 'scan',
        redDot: '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
      }, {
        icontype: 'user',
        redDot: '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
      }],
      override: true // If you set multiple options, specifies whether to keep the default optionMenu.
    });

    // Call this once to refresh the interface.
    AlipayJSBridge.call('showOptionMenu');
  });  

  document.querySelector('.reset').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      reset: true,
    });
    AlipayJSBridge.call('showOptionMenu');
  });  

  document.querySelector('.show').addEventListener('click', function() {
    AlipayJSBridge.call('showOptionMenu');
  });  

  document.querySelector('.hide').addEventListener('click', function() {
    AlipayJSBridge.call('hideOptionMenu');
  });  

  document.addEventListener('optionMenu', function(e) {
   alert(JSON.stringify(e.data));
  }, false);
});
</script>

Descrição da API

Importante

Se o botão não aparecer conforme esperado após chamar setOptionMenu, chame showOptionMenu.

Defina apenas uma das quatro propriedades a seguir. A prioridade segue esta ordem: reset > title > icontype > icon.

AlipayJSBridge.call('setTitle',{
  title, icon, redDot, reset, color, override, menus, icontype
})

Parâmetros de entrada

Propriedade

Tipo

Descrição

Obrigatório

Valor padrão

title

string

Texto do botão à direita.

Sim

""

icon

string

URL do ícone do botão à direita. Compatível com Base64 a partir da versão 9.0.

Versões 8,3 e anteriores: iOS 40 × 40 px (sem preenchimento), Android 50 × 50 px (preenchimento transparente de 5 px em cada lado).

Versões 8,4 e posteriores: ambas as plataformas usam 40 × 40 px (sem preenchimento).

Sim

""

redDot

string

Valor do ponto vermelho.

Não

""

reset

bool

Redefine para o padrão do sistema. Se reset for true, o sistema ignora os demais parâmetros.

Sim

false

color

string

Valor da cor do texto.

N

"#FFFFFFFF"

override

bool

Ao definir várias opções, especifica se o optionMenu padrão deve ser mantido.

N

false

menus

array

Configura vários botões.

N

[]

preventDefault

bool

Indica se o recurso de compartilhamento padrão (que abre a caixa de diálogo) deve ser bloqueado. Se preventDefault for true, o compartilhamento padrão não ocorrerá.

N

[]

icontype

string

Carrega uma imagem predefinida do contêiner conforme o tipo. Escolha entre icontype, title e icon.

Importante

A alteração de cor é compatível apenas com um único optionMenu.

Tipos válidos: user (conta), filter, search, add, settings, scan, info, help, locate, more e mail (versão 10.0.8 e posteriores).

N

""

contentDesc

string

Define o texto lido no modo leitor de tela.

N

""