目标

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

1. 定义App应用

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

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

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

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

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

  • 配置层级：为了适应不同场景的应用诉求，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
appHidden 是否隐藏。如果设为隐藏，那么在Apps面板中不显示此应用
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-vendor/test-party/modules/test-party/backend/src/meta.js

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