移动开发平台 mPaaS 设置右上角按钮

By admin | 2021年4月23日

0 Comment

此接口用于设置标题栏右边的按钮属性。仅负责设置，该按钮的显示需要额外调用 showOptionMenu。

注意：由于苹果的 ATS 限制，icon URL 必须为 https 链接或 base64，而 http 链接会被忽略。

setOptionMenu 接口的使用方法

  
   AlipayJSBridge.call('setOptionMenu', {
    title : '按钮', // 与 icon、icontype 三选一
    redDot : '-1', // -1 表示不显示，0 表示显示红点，1-99 表示在红点上显示的数字
    color : '#ff00ff00', // 必须以 ＃ 开始 ARGB 颜色值
   });

代码示例

设置各种类型的右侧按钮：

  
   <h1>点击以下按钮看不同效果</h1>
   
   <a href="javascript:void(0)" class="btn button">单按钮</a>
   <a href="javascript:void(0)" class="btn icon">单图标</a>
   <a href="javascript:void(0)" class="btn menu">多菜单(9.9.3)</a>
   <a href="javascript:void(0)" class="btn reset">重置</a>
   <a href="javascript:void(0)" class="btn hide">隐藏</a>
   <a href="javascript:void(0)" class="btn show">显示</a>
   
   <script>
   function ready(callback) {
    // 如果 jsbridge 已经注入则直接调用
    if (window.AlipayJSBridge) {
    callback && callback();
    } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
    }
   }
   ready(function(e) {
    document.querySelector('.button').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
    title : '按钮',
    redDot : '5', // -1 表示不显示，0 表示显示红点，1-99 表示在红点上显示的数字
    color : '#ff00ff00', // 必须以＃开始 ARGB 颜色值
    });
    AlipayJSBridge.call('showOptionMenu');
    });
   
    document.querySelector('.icon').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
    icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
    redDot : '-1', // -1 表示不显示，0 表示显示红点，1-99 表示在红点上显示的数字
    });
    AlipayJSBridge.call('showOptionMenu');
    });
   
    document.querySelector('.menu').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
    // 显示时的顺序为从右至左
    menus: [{
    icontype: 'scan',
    redDot: '-1', // -1 表示不显示，0 表示显示红点，1-99 表示在红点上显示的数字
    }, {
    icontype: 'user',
    redDot: '-1', // -1 表示不显示，0 表示显示红点，1-99 表示在红点上显示的数字
    }],
    override: true // 在需要设置多个 option 的情况下，是否保留默认的 optionMenu
    });
   
    // 必须强制调用一次以刷新界面
    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>

API

reset、title、icontype、icon 这 4 个属性有一个即可，属性的优先级：reset > title > icontype > icon。

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

入参

名称	类型	描述	必选	默认值
title	string	右按钮文字。	Y	“”
icon	string	右按钮图标 URL，base64（since 9.0）。 8.3 及以前：iOS 40×40（周边不留白）, Android 50×50（四边各透明留白 5px）。 8.4 及以后：两个平台统一使用 40×40（周边不留白）。	Y	“”
redDot	string	红点数值。	N	“”
reset	bool	重置到系统默认，当 reset=true 时，忽略其他参数。	Y	false
color	string	文字颜色值。	N	“#FFFFFFFF”
override	bool	在需要设置多个 option 的情况下，是否保留默认的 optionMenu。	N	false
menus	array	设置多个按钮。	N
preventDefault	bool	是否阻止默认的分享功能（默认是弹分享框）preventDefault=true 会阻止默认的分享。	N
icontype	string	根据图片类型加载容器预置图片，与 title、icon 三选一。注意: 只支持单个 optionMenu 变色。具体类型包含: user（账户）、filter（筛选器）、search（查找）、add（添加）、settings（设置）、scan（扫一扫）、info（信息）、help（帮助）、locate（定位）、more（更多）、mail（邮箱 10.0.8 及以上）。	N	“”
contentDesc	string	设置盲人模式阅读文案。	N	“”

注意事项

setOptionMenu 后如果效果不对，请调用一次 showOptionMenu。

请关注公众号获取更多资料

发表回复取消回复

Iconic One Theme | Powered by Wordpress