概念

···菜单按钮和X关闭按钮，如下图所示：

目前胶囊按钮的样式不支持修改，框架默认会根据导航栏的颜色自适应胶囊按钮的颜色，不过您可以隐藏默认的胶囊按钮，然后自定义实现

自定义菜单项

···按钮会弹出ActionSheet菜单，菜单中的按钮支持自定义，其中上部分的按钮是在小程序中定义，下部分的按钮在宿主中定义，取消按钮为框架默认添加，如下图所示：

宿主中添加菜单按钮

宿主添加的菜单按钮在每个页面都会显示

iOS 添加方法

  1. // 创建按钮DCUniMPMenuActionSheetItem *item1 = [[DCUniMPMenuActionSheetItem alloc] initWithTitle:@"Item 1" identifier:@"item1"];DCUniMPMenuActionSheetItem *item2 = [[DCUniMPMenuActionSheetItem alloc] initWithTitle:@"Item 2" identifier:@"item2"];// 添加到全局配置[DCUniMPSDKEngine setDefaultMenuItems:@[item1,item2]];

DCUniMPSDKEngineDelegate协议的 defaultMenuItemClicked:方法

  1. /// 监听菜单按钮点击- (void)defaultMenuItemClicked:(NSString *)identifier {    NSLog(@"标识为 %@ 的 item 被点击了", identifier);    // 向小程序发送消息    if ([identifier isEqualToString:@"SendUniMPEvent"]) {        [DCUniMPSDKEngine sendUniMPEvent:@"NativeEvent" data:@{@"msg":@"native message"}];    }}

Android 添加方法

setMenuActionSheetItems实现全局菜单按钮设置.

  1. MenuActionSheetItem item = new MenuActionSheetItem("关于", "gy");List<MenuActionSheetItem> sheetItems = new ArrayList<>();sheetItems.add(item);DCSDKInitConfig config = new DCSDKInitConfig.Builder()    // 添加到全局配置    .setMenuActionSheetItems(sheetItems)    .build();

设置全局菜单按钮点击事件监听

  1. DCUniMPSDK.getInstance().setDefMenuButtonClickCallBack(new DCUniMPSDK.IMenuButtonClickCallBack() {    @Override    public void onClick(String appid, String id) {        switch (id) {            case "gy":{                Log.e("unimp", "点击了关于" + appid);                break;            }        }    }});

小程序中添加菜单按钮

pages.json，在页面的 style->app-plus->titleNView->buttons节点下添加配置，pages.json 的更多配置说明请参考此 文档

  1. {    "pages": [         {            "path": "pages/tabBar/component/component",            "style": {                "navigationBarTitleText": "内置组件",                "app-plus": {                    "bounce": "vertical",                    "titleNView": {                        "buttons": [{                            "text": "\ue534",                              "title":"关于",       //注意：title 为 uni小程序中显示的按钮标题，如果没有设置则显示 text 字段                            "fontSrc": "/static/uni.ttf",                            "fontSize": "22px",                            "color": "#FFFFFF"                        }]                    }                }            }        },        ...    ],    ...}

onNavigationBarButtonTap(e)方法

  1. // 监听按钮点击事件onNavigationBarButtonTap(e) {    console.log(e)}

隐藏胶囊按钮

uni小程序默认会显示胶囊按钮，您可以将其隐藏（目前只支持全局隐藏，不支持单个页面隐藏）

iOS 隐藏胶囊按钮

  1. [DCUniMPSDKEngine setMenuButtonHidden:YES];

Android 隐藏胶囊按钮

setCapsule实现隐藏

  1. DCSDKInitConfig config = new DCSDKInitConfig.Builder()    .setCapsule(false).build();

text字段配置信息（和在HX内置基座运行效果一样）如下图所示

在 GitHub 上编辑此页面！