目标

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

1. 定义App应用

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

src/suite/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/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 content: JSON.stringify(content),
  38. 38 resourceRoles: 'authenticated',
  39. 39 appSorting: 0,
  40. 40 };
  41. 41 return _app;
  42. 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. 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},