概念

胶囊按钮即小程序页面导航栏右侧的按钮,包含···菜单按钮和X关闭按钮,如下图所示:

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

胶囊按钮 - 图1

自定义菜单项

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

胶囊按钮 - 图2

宿主中添加菜单按钮

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

iOS 添加方法

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

点击按钮会回调 DCUniMPSDKEngineDelegate协议的 defaultMenuItemClicked:方法

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

Android 添加方法

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

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

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

  1. DCUniMPSDK.getInstance().setDefMenuButtonClickCallBack(new DCUniMPSDK.IMenuButtonClickCallBack() {
  2. @Override
  3. public void onClick(String appid, String id) {
  4. switch (id) {
  5. case "gy":{
  6. Log.e("unimp", "点击了关于" + appid);
  7. break;
  8. }
  9. }
  10. }
  11. });

小程序中添加菜单按钮

在小程序中可以单独为某个页面添加菜单按钮,打开pages.json,在页面的 style->app-plus->titleNView->buttons节点下添加配置,pages.json 的更多配置说明请参考此 文档

  1. {
  2. "pages": [
  3. {
  4. "path": "pages/tabBar/component/component",
  5. "style": {
  6. "navigationBarTitleText": "内置组件",
  7. "app-plus": {
  8. "bounce": "vertical",
  9. "titleNView": {
  10. "buttons": [{
  11. "text": "\ue534",
  12. "title":"关于", //注意:title 为 uni小程序中显示的按钮标题,如果没有设置则显示 text 字段
  13. "fontSrc": "/static/uni.ttf",
  14. "fontSize": "22px",
  15. "color": "#FFFFFF"
  16. }]
  17. }
  18. }
  19. }
  20. },
  21. ...
  22. ],
  23. ...
  24. }

按钮点击后会在小程序中触发onNavigationBarButtonTap(e)方法

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

隐藏胶囊按钮

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

iOS 隐藏胶囊按钮

  1. [DCUniMPSDKEngine setMenuButtonHidden:YES];

Android 隐藏胶囊按钮

DCSDKInitConfig设置setCapsule实现隐藏

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

需要注意,如果您隐藏了胶囊按钮,原生中添加的菜单按钮就会无效,小程序中添加的菜单按钮会显示到页面导航栏上并且显示的是text字段配置信息(和在HX内置基座运行效果一样)如下图所示

胶囊按钮 - 图3


发现错误?想参与编辑?在 GitHub 上编辑此页面!