介绍

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

1. 创建应用

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

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

  1. 1module.exports = app => {
  2. 2 // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3 const infoMobile = {
  4. 4 layout: 'diancai-h5:layoutDianCaiWechatH5',
  5. 5 menu: {
  6. 6 layout: 'diancai-h5:layoutAppMenuDianCaiWechatH5',
  7. 7 },
  8. 8 mine: {
  9. 9 layout: true,
  10. 10 },
  11. 11 };
  12. 12 const infoPC = {
  13. 13 layout: null,
  14. 14 menu: {
  15. 15 layout: 'diancai-h5:layoutAppMenuDianCaiWechatH5',
  16. 16 },
  17. 17 home: {
  18. 18 mode: 'page',
  19. 19 page: '/diancai/h5/diancai/home',
  20. 20 },
  21. 21 mine: {
  22. 22 layout: true,
  23. 23 },
  24. 24 };
  25. 25 const content = {
  26. 26 info: {
  27. 27 theme: {
  28. 28 type: 'thirdParty',
  29. 29 thirdParty: 'a-themehyacinth',
  30. 30 },
  31. 31 },
  32. 32 presets: {
  33. 33 anonymous: {
  34. 34 mobile: infoMobile,
  35. 35 pc: infoPC,
  36. 36 },
  37. 37 authenticated: {
  38. 38 mobile: infoMobile,
  39. 39 pc: infoPC,
  40. 40 },
  41. 41 },
  42. 42 };
  43. 43 const _app = {
  44. 44 atomName: 'DianCaiWechatH5',
  45. 45 atomStaticKey: 'appDianCaiWechatH5',
  46. 46 atomRevision: 7,
  47. 47 atomCategoryId: 'DemoIsolateApp',
  48. 48 description: '',
  49. 49 appIcon: 'diancai-icon::dian',
  50. 50 appIsolate: true,
  51. 51 content: JSON.stringify(content),
  52. 52 resourceRoles: 'root',
  53. 53 appSorting: 0,
  54. 54 };
  55. 55 return _app;
  56. 56};
名称 说明
infoMobile.layout diancai-h5:layoutDianCaiWechatH5 为Mobile端指定自定义布局,这里需要填写自定义布局的atomStaticKey
_app.atomStaticKey appDianCaiWechatH5 应用Key,系统自动添加模块名称前缀,生成diancai-h5:appDianCaiWechatH5
_app.appIsolate true 指定该应用为独立应用
  • 关于其他配置信息的说明,请参见:App应用

2. 创建Mobile自定义布局

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

src/suite-vendor/bz-diancai/modules/diancai-h5/backend/src/config/static/layout/layoutH5.js

  1. 1module.exports = app => {
  2. 2 const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3 const content = {
  4. 4 toolbar: {
  5. 5 buttons: [
  6. 6 { module: 'a-layoutmobile', name: 'buttonAppMenu', title: 'Home', resourceConfig: { icon: { f7: '::home' } } },
  7. 7 { module: moduleInfo.relativeName, name: 'buttonDianCai' },
  8. 8 { module: 'a-layoutmobile', name: 'buttonAppMine' },
  9. 9 ],
  10. 10 },
  11. 11 };
  12. 12 const layout = {
  13. 13 atomName: 'DianCaiWechatH5',
  14. 14 atomStaticKey: 'layoutDianCaiWechatH5',
  15. 15 atomRevision: 5,
  16. 16 description: '',
  17. 17 layoutTypeCode: 1,
  18. 18 content: JSON.stringify(content),
  19. 19 resourceRoles: 'root',
  20. 20 };
  21. 21 return layout;
  22. 22};

效果展示

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

diancai-mobile