Mobile Platform as a Service：Mengatur tombol di pojok kanan atas

Gunakan API setOptionMenu

AlipayJSBridge.call('setOptionMenu', {
  title : 'Button',  // Pilih salah satu dari title, icon, dan icontype
  redDot : '-1', // -1: Jangan tampilkan. 0: Tampilkan titik merah. 1-99: Tampilkan angka pada titik merah.
  color : '#ff00ff00', // Harus berupa nilai warna ARGB yang diawali dengan #.
});

Contoh kode

Atur berbagai jenis tombol di pojok kanan atas:

<h1>Klik tombol di bawah ini untuk melihat efek berbeda</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) {
  // Jika jsbridge sudah disuntikkan, panggil langsung.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Jika belum, dengarkan event penyuntikan.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(e) {
  document.querySelector('.button').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      title : 'Button',
      redDot : '5', // -1: Jangan tampilkan. 0: Tampilkan titik merah. 1-99: Tampilkan angka pada titik merah.
      color : '#ff00ff00', // Harus berupa nilai warna ARGB yang diawali dengan #.
    });
    AlipayJSBridge.call('showOptionMenu');
  });

  document.querySelector('.icon').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
      redDot : '-1', // -1: Jangan tampilkan. 0: Tampilkan titik merah. 1-99: Tampilkan angka pada titik merah.
    });
    AlipayJSBridge.call('showOptionMenu');
  });

  document.querySelector('.menu').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      // Urutan tampil dari kanan ke kiri.
      menus: [{
        icontype: 'scan',
        redDot: '-1', // -1: Jangan tampilkan. 0: Tampilkan titik merah. 1-99: Tampilkan angka pada titik merah.
      }, {
        icontype: 'user',
        redDot: '-1', // -1: Jangan tampilkan. 0: Tampilkan titik merah. 1-99: Tampilkan angka pada titik merah.
      }],
      override: true // Jika Anda mengatur beberapa opsi, tentukan apakah akan mempertahankan optionMenu default.
    });

    // Panggil sekali untuk refresh antarmuka.
    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>

Deskripsi API

Atur hanya salah satu dari keempat properti berikut. Properti diprioritaskan dalam urutan berikut: reset > title > icontype > icon.

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

Parameter input