7. 源码面板详解

在源码面板中，您可以完成低代码中的代码部分编写。

面板功能拆解

代码编辑面板

代码编辑面板允许您书写 JavaScript 代码，并支持 JSX 语法。由于依赖了 Babel，所以书写的 JSX 和 Chrome 80+ 以后的新语法也会被自动编译：

编译前	编译后

注：因为编译结果会被 @babel/runtime 干扰，目前面板不支持 async await或 { ...arr } 形态的语法编译。如果您需要此类编译，您可以考虑在读取 schema 中的 originCode 之后自己手动通过 babel 编译。

全局变量引用

在代码中，您可以通过 window 来引用全局变量。资产包中的 packages 都是通过 UMD 方式引入的对应内容，如果您引入了 Fusion Next（Demo 中默认引入），那么可以通过此方法直接唤起 Fusion Next 的内容，如弹窗提示：

window.Next.Message.success('成功')

局部变量引用

您可以在成员函数中访问到如下变量：

this.state
this.setState
this.context.appHelper.utils
this.context.appHelper.constants
this.context.appHelper.requestHandlerMap
this.context.components

读、写与异常处理

读取：每次打开面板时，都会尝试读取 schema 中的 originCode 字段，如果没有，则从 schema 上的字段还原代码；
写入：在关闭代码编辑面板（主动点击叉或者点击非代码编辑区块的被动关闭都算）时，将自动写入到 schema 中；您也可以在编辑过程中点击“保存”按钮手动保存；

源码面板中	Schema 中
本地数据初始值设置：
生命周期方法：
自定义函数：
编译前全量代码：

异常处理：如果代码解析失败，它将无法被正常保存到 schema 中，此时编辑器会弹层提示：

样式编辑面板

您可以在这里书写 CSS 内容。它对应 schema 中的 css 字段：

源码面板中	Schema 中

对接代码

生命周期对接

如果您书写了视图相关的声明周期方法，那么对应的方法会在视图的特定周期被调用。支持的生命周期函数在《阿里巴巴中后台前端搭建协议规范》中被定义，包含：

{
  componentDidMount(): void;
  constructor(props: Record<string, any>, context: any);
  render(): void;
  componentDidUpdate(prevProps: Record<string, any>, prevState: Record<string, any>, snapshot: Record<string, any>): void;
  componentWillUnmount(): void;
  componentDidCatch(error: Error, info: any): void;
}

设置器面板对接

书写完了函数 / state 后，您可以在右侧的设置器面板中配置对代码的部分。

通常书写代码是为了对接低代码配置中的“变量绑定”、“事件回调”、“条件判断”和“循环”部分的。

变量绑定

{
  "componentName": "NextBlockCell",
  "id": "node_ockzmje8tf5",
  "props": {
    "bodyPadding": {
      "type": "JSExpression",
      "value": "this.state.text",
      "mock": ""
    }
  }
}

事件回调

{
  "componentName": "Filter",
  "id": "node_ockzmj0cl11w",
  "props": {
    "__events": {
      "eventDataList": [
        {
          "type": "componentEvent",
          "name": "onSearch",
          "relatedEventName": "closeDialog"
        }
      ]
    },
    "onSearch": {
      "type": "JSFunction",
      "value": "function(){this.onSearch.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
    }
  }
}

条件判断

{
  "componentName": "Filter",
  "id": "node_ockzmj0cl11w",
  "condition": {
    "type": "JSExpression",
    "value": "this.state.text",
    "mock": true
  }
}

循环

{
  "componentName": "Filter",
  "id": "node_ockzmj0cl11w",
  "loop": {
    "type": "JSExpression",
    "value": "this.state.text",
    "mock": true
  }
}

面板功能拆解​

代码编辑面板​

全局变量引用​

局部变量引用​

读、写与异常处理​

样式编辑面板​

对接代码​

生命周期对接​

设置器面板对接​

变量绑定​

事件回调​

条件判断​

循环​