背景

我们知道CabloyJS支持多个场景的跨端开发，那么不可避免，不同的场景、不同的终端，可能需要配置不同的前端config参数，比如有如下一些诉求：

  1. 微信公众号、企业微信、钉钉，分别使用不同的前端参数
  2. 针对不同的角色使用不同的前端参数
  3. 针对不同的用户使用不同的前端参数

后端事件：loginInfo

当页面初始化时，前端会调用后端API接口/a/base/auth/echo，返回当前用户的信息。这个API接口引发了一个后端事件loginInfo，其他模块可以响应这个事件，提供一些自定义的信息到前端

下面，我们以模块test-party为例，演示如何响应后端事件，然后提供自定义的config参数到前端

关于后端事件的完整说明，请参见：后端事件

声明事件实现

test-party/backend/src/meta.js

  1. 1event: {
  2. 2  implementations: {
  3. 3    'a-base:loginInfo': 'loginInfoDashboard',
  4. 4  },
名称 说明
a-base:loginInfo 事件的全称，格式为：模块名称:事件名称
loginInfoDashboard 响应事件的Bean组件

定义Bean组件

在本示例中，响应后端事件a-base:loginInfo

src/suite-vendor/test-party/modules/test-party/backend/src/bean/event.loginInfoDashboard.js

  1. 1const require3 = require('require3');
  2. 2const extend = require3('@zhennann/extend');
  3. 3
  4. 4module.exports = ctx => {
  5. 5  // const moduleInfo = ctx.app.meta.mockUtil.parseInfoFromPackage(__dirname);
  6. 6  class EventBean {
  7. 7    async execute(context, next) {
  8. 8      const data = context.data;
  9. 9      const info = data.info;
  10. 10      info.config = extend(true, info.config, {
  11. 11        modules: {},
  12. 12      });
  13. 13      // next
  14. 14      await next();
  15. 15    }
  16. 16  }
  17. 17
  18. 18  return EventBean;
  19. 19};
名称 说明
context.data 外部传入的参数
next event采用洋葱圈模型，调用next从而允许其他事件实现的执行
info.config 将自定义的config参数追加到info.config，info数据将返回给前端，从而覆盖前端对应的config参数

注册Bean组件

前面定义的Bean组件需要在模块的beans.js中注册

src/suite-vendor/test-party/modules/test-party/backend/src/beans.js

  1. 1const eventLoginInfoDashboard = require('./bean/event.loginInfoDashboard.js');
  2. 2
  3. 3module.exports = app => {
  4. 4  const beans = {
  5. 5    // event
  6. 6    'event.loginInfoDashboard': {
  7. 7      mode: 'ctx',
  8. 8      bean: eventLoginInfoDashboard,
  9. 9    },
  10. 10  };
  11. 11  return beans;
  12. 12};
注册名称 场景 所属模块 global beanFullName
loginInfoDashboard event test-party false test-party.event.loginInfoDashboard