如何创建App应用

目标

下面我们演示如何在模块test-party中新建一个App应用

1. 定义App应用

我们通过静态原子的方式定义App，一方面既可以把App固化在代码中，方便开发和部署，也可以在系统运行阶段动态调整App的配置

更详细内容，参见：静态原子

src/suite/test-party/modules/test-party/backend/src/config/static/apps.js

1const appParty = require('./app/appParty.js');
2
3module.exports = app => {
4  const apps = [
5    //
6    appParty(app),
7  ];
8  return apps;
9};

src/suite/test-party/modules/test-party/backend/src/config/static/app/appParty.js

1module.exports = app => {
2  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
3  const info = {
4    // layout: null,
5    // menu: {
6    //   layout: null,
7    // },
8    home: {
9      mode: 'dashboard', // dashboard/page
10      dashboard: 'test-party:dashboardTest',
11      page: null,
12    },
13    mine: {
14      layout: true,
15    },
16  };
17  const content = {
18    presets: {
19      anonymous: {
20        mobile: info,
21        pc: info,
22      },
23      authenticated: {
24        mobile: info,
25        pc: info,
26      },
27    },
28  };
29  const _app = {
30    atomName: 'Party',
31    atomStaticKey: 'appParty',
32    atomRevision: 2,
33    atomCategoryId: 'Demonstration',
34    description: '',
35    appIcon: ':business:party',
36    appIsolate: false,
37    content: JSON.stringify(content),
38    resourceRoles: 'authenticated',
39    appSorting: 0,
40  };
41  return _app;
42};

配置层级：为了适应不同场景的应用诉求，App的配置分为几个层级
- 第一层：用户认证状态：anonymous、authenticated
- 第二层：用户界面场景：mobile、pc
- 第三层：语言：在本演示中不涉及，请参见模块a-cms源码
App配置

名称	说明
layout	为App设置独立的自适应布局配置。一般而言，不必设置。参见：Mobile布局配置、PC布局配置
menu.layout	App菜单页面的布局配置。一般而言，不必设置，系统会自动从后端获取App的菜单资源并渲染成默认的风格。如果要自定义菜单页面的显示内容或者显示风格，就需要单独提供layout对应的`atomStaticKey`
home.mode	App对应的首页页面有两种模式：dashboard/page。如果不设置任何值，就意味着不提供首页页面
home.dashboard	如果mode为dashboard，这里就需要设置dashboard的`atomStaticKey`
home.page	如果mode为page，这里就需要设置前端页面组件的路径
mine.layout	App对应的我的页面。如果不设置任何值，就意味着不提供我的页面。如果设置为true，系统会自动从后端获取App的菜单资源并渲染成默认的风格。如果要自定义我的页面的显示内容或者显示风格，就需要单独提供layout对应的`atomStaticKey`

静态原子

名称	说明
atomStaticKey	系统自动添加模块名称前缀，生成`test-party:appParty`
atomCategoryId	App归属目录。系统内置4个目录：General(通用)、Management(管理)、System(系统)、Demonstration演示
appIcon	App图标
appIsolate	是否为`独立App`
content	App的配置内容
resourceRoles	资源授权对象，这里是角色`authenticated`，意味着只有登录用户才有权限访问此`App`

atomCategoryId（App归属目录）
- 系统内置4个目录，基本可以满足大多数业务场景的需求。当然，我们也可以根据需要直接设置为其他目录名称。比如，我们开发了一款ERP，那么就可以将atomCategoryId设置为ERP，然后为目录ERP添加一系列App应用
- General(通用)：一般放置面向C端用户的App：比如电商App
- Management(管理)：一般放置面向B端用户的App：比如商家管理App
- System(系统)：一般放置面向系统管理员的App：比如系统App
- Demonstration演示：一般放置与测试、演示相关的App：比如宴会App

2. 注册App应用

src/suite/test-party/modules/test-party/backend/src/meta.js

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

如何创建App应用

目标

1. 定义App应用

2. 注册App应用

评论: