目标
下面我们演示如何在模块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},
评论: