【泛微低代码开发平台e-builder】使用HTML组件实现页面中部分区域自定义开发

使用HTML组件实现页面中部分区域自定义开发

业务需求

很多业务场景中，无论是PC端还是移动端，都会存在很多自定义功能页面的需求。这些自定义页面往往包含一些复杂的业务逻辑，和组件间的联动关系限制等。常见包括e9移动建模场景中的案例等。

功能描述

实际使用和开发过程中，这些页面通常无法全部使用页面设计器中的现有组件去覆盖掉，但是很多区域的功能又是现有组件所能够支持的，或者相比ecode原生开发使用页面设计器API接口能够更方便实现功能。这种场景下可以使用页面设计器中的自定义HTML元素，配合代码块进行开发。代码块中可以通过react加载渲染的方式定义react写法的组件，同时组件内部也是可以使用公司组件库进行开发。开发完的html元素可以直接基于页面设计器的api与其他组件或元素交互。实现快速构造页面。

实现方式

在页面设计器中新建一个页面

新建后的页面中添加需要的元素（导航、按钮、列表等）

添加一个自定义HTML元素

打开页面设计器代码编辑页面，按照如下格式去复写html元素内容，实现使用REACT形式复写html组件元素内容。

typescript 复制代码

const ebSdk = window.ebuilderSDK;  //全局SDK
const pageSdk = ebSdk.getPageSDK();  //当前页面SDK
const React = window.React;
const ReactDom = window.ReactDOM;

class CustomComp extends React.PureComponent{
  state={
    customStore: new FormStore(),
  }
  componentDidMount(){
    customStore.initForm({...............})
  }
  render(){
    const { customStore } = this.state;
    return(
      <>
        <Form 
          store={customStore}
          isMobile={true}
          className="form-custom-style"
        />
      </>
    )
  }
}
pageSdk.on("compLoad", "b4e7bf72dc644bcc81cd183c7f3d808c", function(comp) {
  console.log("指定的组件加载完成后回调，组件实例为：", {...comp}, );
  ReactDom.render(<CustomComp />, document.getElementsByClassName('document-content-main')[0]); 
});

缺点：目前无法支持到分离式的写法或者函数式的写法，只能把所有的逻辑定义到同一个组件中

相关场景

标准化方向

扩展更多的加载方式。

1.能够使用html元素组件去唤起一个ecode单页，实现非iframe形式的加载。

2.能够支持在ecode中调起页面设计器所提供的api