关于选项卡按钮

选项卡按钮显示在Mobile布局的页面底部

CabloyJS对选项卡按钮进行了抽象，既有利于灵活定制，也便于开发新的按钮

最佳实践：可以根据业务需要开发自定义的选项卡按钮，然后再创建一个新的Mobile布局，或修改现有Mobile布局的配置

Mobile布局配置，请参见：Mobile布局配置

内置选项卡按钮

模块a-layoutmobile内置了三个边栏按钮，分别是：

名称 说明
工作台 显示App列表、App菜单
首页 显示与App对应的首页页面
我的 显示与App对应的我的页面
搜索 显示搜索页面，用于快速搜索业务数据

创建选项卡按钮

在一个复杂的系统中，会涉及到资源授权的问题，我们需要对选项卡按钮进行权限控制。模块a-layoutmobile提供了一个资源类型a-layoutmobile:button，只需定义静态资源，并指定角色，即可同时完成资源的注册与初始授权

下面以搜索为例来说明如何创建一个选项卡按钮

1. 定义静态资源

src/module-system/a-layoutmobile/backend/src/config/static/resources.js

  1. 1module.exports = app => {
  2. 2  const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3  const resources = [
  4. 4    // buttons
  5. 5    {
  6. 6      atomName: 'Search',
  7. 7      atomStaticKey: 'buttonSearch',
  8. 8      atomRevision: 0,
  9. 9      atomCategoryId: 'a-layoutmobile:button.General',
  10. 10      resourceType: 'a-layoutmobile:button',
  11. 11      resourceConfig: JSON.stringify({
  12. 12        module: moduleInfo.relativeName,
  13. 13        component: 'buttonLink',
  14. 14        icon: { f7: '::search' },
  15. 15        url: '/a/basefront/atom/searchQuick',
  16. 16      }),
  17. 17      resourceRoles: 'root',
  18. 18    },
  19. 19  ];
  20. 20  return resources;
  21. 21};
名称 说明
atomStaticKey 系统自动添加模块名称前缀，生成a-layoutmobile:buttonSearch
atomCategoryId 资源归属目录。资源类型全称a-layoutmobile:button作为一级目录
resourceType 资源类型全称
resourceConfig 资源配置信息
resourceConfig.module + component 按钮前端渲染组件名称。buttonLink是模块a-layoutmobile提供的内置组件
resourceConfig.icon 按钮图标
resourceConfig.url 按钮链接。当点击按钮时自动显示url指定的页面组件
resourceRoles 资源授权对象，这里是角色root

角色root是整个角色树的根，也就意味着所有用户（包括匿名用户）均可访问此资源

更多配置说明，参见静态资源

2. 注册静态资源

src/module-system/a-layoutpc/backend/src/meta.js

  1. 1const staticResources = require('./config/static/resources.js')(app);
  2. 2
  3. 3base: {
  4. 4  statics: {
  5. 5    'a-base.resource': {
  6. 6      items: staticResources,
  7. 7    },
  8. 8  },
  9. 9},
名称 说明
a-base.resource 原子类型的全称。在这里，原子类型resource是由模块a-base提供的
items 静态资源数组