Mobile布局配置

介绍

在一个Mobile布局中可以统一配置底部区域的选项卡按钮。并通过选项卡按钮配置点击时相应打开的页面

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

创建`Mobile布局`的方式

创建Mobile布局有两种方式：

1. 管理页面

管理员通过管理页面直接创建Mobile布局或者修改现有Mobile布局的配置内容

2. 静态原子

由于模块a-baselayout提供了原子类型layout来管理各种类型的布局。因此，我们可以通过创建静态原子的方式来创建新的Mobile布局

静态原子创建`Mobile布局`

以模块a-layoutmobile提供的预置布局a-layoutmobile:layoutMobile为例：

1. 定义静态原子

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

1const layoutMobile = require('./layout/layoutMobile.js');
2
3module.exports = app => {
4  const layouts = [layoutMobile(app)];
5  return layouts;
6};

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

1module.exports = app => {
2  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
3  const content = {
4    toolbar: {
5      buttons: [
6        { module: 'a-layoutmobile', name: 'buttonAppMenu' },
7        { module: 'a-layoutmobile', name: 'buttonAppHome' },
8        { module: 'a-layoutmobile', name: 'buttonAppMine' },
9      ],
10    },
11  };
12  const layout = {
13    atomName: 'Mobile Layout(Authenticated)',
14    atomStaticKey: 'layoutMobile',
15    atomRevision: 7,
16    description: '',
17    layoutTypeCode: 1,
18    content: JSON.stringify(content),
19    resourceRoles: 'root',
20  };
21  return layout;
22};

toolbar

名称	说明
buttons	选项卡按钮

layout

名称	说明
atomStaticKey	系统自动添加模块名称前缀，生成`a-layoutmobile:layoutMobile`
content	布局内容
resourceRoles	资源授权对象，这里是角色`root`

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

2. 注册静态原子

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

1const staticLayouts = require('./config/static/layouts.js')(app);
2
3base: {
4  statics: {
5    'a-baselayout.layout': {
6      items: staticLayouts,
7    },
8  },
9},

名称	说明
a-baselayout.layout	原子类型的全称。在这里，原子类型`layout`是由模块`a-baselayout`提供的
items	静态原子数组

如何让Mobile布局生效

通过前面的方式，可以创建全新的Mobile布局。但是如何让Mobile布局生效呢？在新版CabloyJS中，Mobile布局是与App应用绑定在一起的，也就是说，可以为不同的App应用指定不同的Mobile布局，从而为大型项目的开发提供更加灵活多变的界面定制机制

参见：App应用

介绍

创建Mobile布局的方式