# 自定义页面

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183913284441620566`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件_其它
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

# 自定义页面

## 一、功能背景及价值用途

随着业务场景的日益复杂和多样化，开发者常常需要引入外部页面资源或复用内部已有的页面模块，以快速丰富应用功能。为了满足开发者在低代码环境下灵活嵌入各类页面内容、高效复用页面资源的需求，自定义页面组件应运而生。它基于低代码平台，允许用户通过简单配置，以 iframe 形式或组件形式渲染指定页面，实现页面内容的快速集成与展示。

## 二、功能概述

自定义页面可通过配置链接地址渲染三方或内部页面， eb表单、表格及页面支持组件化展示，提高性能。支持条件控制功能动态渲染页面。

## 三、使用说明

### 1、功能入口

设计器左侧“基础组件/其他”分类下选中自定义页面组件，在右侧配置面板操作相关配置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329717976875010&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、基础配置

#### **2.1****、链接地址**

地址分为自定义地址和链接地址。

1、自定义地址

用户可自行输入url， 可通过下方问号增加动态参数（表单设计器中会增加字段相关选项，可选择表单字段）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329718049112074&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

当用户输入地址被判断为eb表单、表格或页面地址时，下方会出现是否组件化选项，开启后会组件方式渲染目标页面

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329722318913541&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

（250901新增）当用户输入ecode单页地址，即含'/sp/custom' 或'/mobile/custom' 时，下方会出现是否组件化选项（默认开启），以组件形式渲染，关闭后则以iframe形式渲染

问题1：如何获取路由参数  
     方案： ecode组件需包裹withRouter，可从props.location.search 中获取路由上的参数  

问题2： 无法渲染移动端ecode路由

答：内部组件有设备类型校验逻辑，pc端路由下只能渲染pc端ecode路由， 移动端只能渲染移动端ecode路由，否则会引起路由冲突。设计器属于pc端路由，移动端效果需在预览移动端查看或运行页面查看

![](https://weapp.eteams.cn/papi/file/preview?fileId=1203676735394856963&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、链接地址

用户可以通过链接地址弹窗选择相关页面，避免了手动输入的繁琐

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329722372505609&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、ecode组件(250901新增)

用户可以输入ecode应用的AppId及路径，直接渲染对应文件抛出的组件

![](https://weapp.eteams.cn/papi/file/preview?fileId=1203677667344039948&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

AppId可在应用右击下复制，如下图

![](https://weapp.eteams.cn/papi/file/preview?fileId=1203678835623649287&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

路径即组件文件所在路径（例： Demo文件下的Todo.js文件为需要渲染的组件， 则路径为 Demo/Todo , 以此类推）

 

#### **2.2、****自定义属性**

自定义属性包括了id和name， 供用户增加自定义属性，方便二开

#### **2.3、****条件控制**

用户可添加多个条件， 并配置条件控制， 当条件满足时会渲染对应页面， 当有多项同时满足时按顺序渲染首个满足条件的页面

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329726566809605&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

 

 

### 3、刷新组件

自定义页面支持其他组件通过事件配置-【刷新组件】刷新自定义页面，支持配置链接地址、组件化及动态参数，满足动态刷新自定义页面的需求

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329726687281200&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 四、上下游关联功能点

[ _事件配置参考文档_](https://weapp.eteams.cn/ecode/playground/doc/share/view/1011798190977867776#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6%E4%BA%8C%E5%BC%80%E5%8F%A3%E5%AD%90%E6%96%87%E6%A1%A3)

[ _组件二开口子参考文档_](https://weapp.eteams.cn/ecode/playground/doc/share/view/1011798190977867776#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2%E7%BB%84%E4%BB%B6%E4%BA%8C%E5%BC%80%E5%8F%A3%E5%AD%90%E6%96%87%E6%A1%A3)

[ _数据集参考文档_](https://www.e-cology.com.cn/sp/doc/docEdit/1133941125198325506)

##  五、常见问题

### 1、表单设计器中自定义页面如何设置高度

自定义页面外层套容器, 在自定义页面的样式设置中设置高度

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329726569013383&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 2、如何传递参数

1.1

自定义链接类型

在链接后通过?params=value形式传参， 可通过下方问号中的字段相关选择表单中的字段值

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329730979217449&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1.2

链接地址类型（20250401基线支持）

通过参数配置传递

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329730931089455&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 3、自定义页面高度如何自适应

开启组件化，当用户输入地址后， 会判断当前地址是否为eb页面、eb表单或eb表格视图地址，满足后下方会出现是否组件化开关，开启后会议组件化方式展示，高度会由内容撑高。（下方不出现开关即为当前地址不支持组件化）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329735251222533&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 4、自定义页面嵌入三方地址后不显示或显示拒绝连接

方案一（常用）： 一般为三方地址拒绝其他页面以iframe方式嵌入，需找三方页面相关人员将当前域名纳入白名单，即修改被嵌入页面的服务器配置，更新 Content-Security-Policy 响应头，把当前域名添加进去

方案二： 配置ng代理（联系运维）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163329735101055006&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

### 

### 5、自定义页面嵌入三方地址，实现高度自适应

思路： 三方页面内部需动态发送高度（需三方页面调整），接收到高度后给到自定义页面组件（代码块调整）

具体方案（仅供参考）：https://weapp.eteams.cn/ecode/playground/doc/share/view/1217030750774386689

### 6、表单中字段赋值后自定义页面未刷新

场景： 自定义页面中地址配置了表单字段参数，对应字段手动修改会触发自定义页面组件刷新，但其他方式如字段联动等给字段赋值不会刷新自定义页面组件

方案： 1.通过表单sdk 监听字段变化 （设计器源码中有）

  2.监听到字段变化后刷新自定义页面组件， 方法见（[ _https://weapp.eteams.cn/ecode/playground/doc/share/view/1011798190977867776#2.1%20%E4%BD%BF%E7%94%A8%20API%20%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%AE%9A%E4%B9%89%E9%93%BE%E6%8E%A5%E5%8F%82%E6%95%B0%E6%9B%BF%E6%8D%A2_](https://weapp.eteams.cn/ecode/playground/doc/share/view/1011798190977867776#2.1%20%E4%BD%BF%E7%94%A8%20API%20%E5%AE%9E%E7%8E%B0%E8%87%AA%E5%AE%9A%E4%B9%89%E9%93%BE%E6%8E%A5%E5%8F%82%E6%95%B0%E6%9B%BF%E6%8D%A2)）

### 7、嵌入三方系统页面后展示的是登录页（单页访问正常）

1\. 首先确认三方页面和当前oa地址协议是否一致， 即都为https或http开头， 若不同（一个为https，一个为http），浏览器安全规则直接阻断 Cookie 传递，需保持协议一致

2.要实现自定义页面中三方地址免登，需要能够将cookie等登录信息传递给三方页面，有两种方案

一、通过单点登录，如借助Oauth2，实现免登

二、通过参数将三方页面需要的登录信息给到三方（需要和三方沟通具体需要什么，如何传递）
