Mobile布局配置（示范）

介绍

CabloyJS提供了一个演示套件：微信一起点菜，其中实现了手机点菜的应用。那么，就需要创建一个H5应用，然后设置Mobile端的自适应布局

获取完整代码，请参见：bz-diancai: 微信一起点菜

1. 创建应用

我们先创建一个面向C端用户的点菜应用，由于该应用同时支持Mobile端和PC端，因此也需要提供各自的界面配置信息

src/suite-vendor/bz-diancai/modules/diancai-h5/backend/src/config/static/app/appDianCaiWechatH5.js

1module.exports = app => {
2  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
3  const infoMobile = {
4    layout: 'diancai-h5:layoutDianCaiWechatH5',
5    menu: {
6      layout: 'diancai-h5:layoutAppMenuDianCaiWechatH5',
7    },
8    mine: {
9      layout: true,
10    },
11  };
12  const infoPC = {
13    layout: null,
14    menu: {
15      layout: 'diancai-h5:layoutAppMenuDianCaiWechatH5',
16    },
17    home: {
18      mode: 'page',
19      page: '/diancai/h5/diancai/home',
20    },
21    mine: {
22      layout: true,
23    },
24  };
25  const content = {
26    info: {
27      theme: {
28        type: 'thirdParty',
29        thirdParty: 'a-themehyacinth',
30      },
31    },
32    presets: {
33      anonymous: {
34        mobile: infoMobile,
35        pc: infoPC,
36      },
37      authenticated: {
38        mobile: infoMobile,
39        pc: infoPC,
40      },
41    },
42  };
43  const _app = {
44    atomName: 'DianCaiWechatH5',
45    atomStaticKey: 'appDianCaiWechatH5',
46    atomRevision: 7,
47    atomCategoryId: 'DemoIsolateApp',
48    description: '',
49    appIcon: 'diancai-icon::dian',
50    appIsolate: true,
51    content: JSON.stringify(content),
52    resourceRoles: 'root',
53    appSorting: 0,
54  };
55  return _app;
56};

名称	值	说明
infoMobile.layout	diancai-h5:layoutDianCaiWechatH5	为Mobile端指定自定义布局，这里需要填写自定义布局的`atomStaticKey`
_app.atomStaticKey	appDianCaiWechatH5	应用Key，系统自动添加模块名称前缀，生成`diancai-h5:appDianCaiWechatH5`
_app.appIsolate	true	指定该应用为独立应用

关于其他配置信息的说明，请参见：App应用

2. 创建Mobile自定义布局

接下来，我们就需要创建一个Mobile自定义布局，atomStaticKey为layoutDianCaiWechatH5，位于模块diancai-h5。通过该布局我们配置了三个选项卡按钮

src/suite-vendor/bz-diancai/modules/diancai-h5/backend/src/config/static/layout/layoutH5.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', title: 'Home', resourceConfig: { icon: { f7: '::home' } } },
7        { module: moduleInfo.relativeName, name: 'buttonDianCai' },
8        { module: 'a-layoutmobile', name: 'buttonAppMine' },
9      ],
10    },
11  };
12  const layout = {
13    atomName: 'DianCaiWechatH5',
14    atomStaticKey: 'layoutDianCaiWechatH5',
15    atomRevision: 5,
16    description: '',
17    layoutTypeCode: 1,
18    content: JSON.stringify(content),
19    resourceRoles: 'root',
20  };
21  return layout;
22};

效果展示

微信点菜应用	https://test.cabloy.com/?appKey=diancai-h5:appDianCaiWechatH5

介绍

1. 创建应用

2. 创建Mobile自定义布局

效果展示

评论: