关于选项卡按钮

选项卡按钮显示在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 静态资源数组