HTML 组件是支持通过「HTML 语法」定制个性化展示界面的一种标准页面组件，具有在线编辑、实时预览、轻量便捷的特点。 目前 HTML 组件可在页面搭建中直接拖入使用。
250px|700px|reset
适用场景
HTML 组件适合开发轻交互重展示的前端展示界面，通过 HTML 组件，可以实现类似这样的页面元素
同时，不建议复制粘贴大量第三方库源码作为 HTML 组件的代码。
场景示例
- 轮播图
00:00
/
00:00
不支持的音频/视频格式
请试试刷新
播放
进入全屏
点击按住可拖动视频
跳动的爱心
00:00
/
00:00
不支持的音频/视频格式
请试试刷新
播放
进入全屏
点击按住可拖动视频
一些限制
- JS 代码仅支持写在 <script> 标签中
- 不支持引入第三方包，仅支持基于平台提供的官方 SDK 及部分 Web APIs 进行开发
- 设计态暂不支持 JS 脚本的编译和执行
支持的标签及属性
标签
- 样式：style
- 内容分区：address、article、aside、footer、header、h1 - h6、main、nav、section
- 文本内容：blockquote、dd、div、dl、dt、figcaption、figure、hr、li、ol、p、pre、ul
- 内联文本语义：a、abbr、b、bdi、bdo、br、cite、code、data、dfn、em、i、kbd、mark、q、rb、rp、rt、rtc、ruby、s、samp、small、span、strong、sub、sup、time、u、var、wbr
- 图片和多媒体：area、audio、img、map、track、video
- 内嵌内容：iframe、object、param、picture、source
- 脚本：canvas、noscript、script
- 编辑标识：del、ins
- 表格：caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr
- 表单：button、datalist、fieldset、form、input、label、legend、meter、optgroup、option、output、progress、select、textarea
- 交互元素：details、dialog、summary
属性
除以下内容外，其余均支持
- 不支持 <script> 标签中的 src 属性
- 不支持所有事件属性，如 onclick / onload / onkeydown / onkeyup 等
- iframe 标签不支持 srcdoc 属性
- 所有的属性值不支持 javascript: 开头
支持的 SDK 能力
Web APIs
- 支持以下 Web 全局变量 & 全局函数，以及所有 Web API 构造类
支持的 Web 全局变量&全局函数
├── isSecureContext
├── speechSynthesis
├── speechSynthesis
├── atob(data: string)
├── btoa(data: string)
├── clearInterval(handle?: number)
├── clearTimeout(handle?: number)
├── createImageBitmap(image: ImageBitmapSource, options?: ImageBitmapOptions)
├── createImageBitmap(image: ImageBitmapSource, sx: number, sy: number, sw: number, sh: number, options?: ImageBitmapOptions)
├── fetch(input: RequestInfo, init?: RequestInit)
├── setInterval(handler: TimerHandler, timeout?: number, ...arguments: any[])
├── setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[])
├── getComputedStyle(elt: Element, pseudoElt?: string | null)
├── getSelection()
├── matchMedia(query: string)
├── requestIdleCallback(callback: IdleRequestCallback, options?: IdleRequestOptions)
├── cancelIdleCallback(handle: number)
├── cancelAnimationFrame(handle: number)
├── requestAnimationFrame(callback: FrameRequestCallback)
使用示例
<script>
// 全局变量
console.log('isSecureContext', isSecureContext);
console.log('speechSynthesis', speechSynthesis);
// 全局函数
setTimeout(()=>{
console.log("定时器")
}, 2000);
</script>
- 支持以下 Document APIs
Key | 分类 |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
属性 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
方法 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 | |
事件 |
使用示例
<div id="htmlNode">HTML组件示例</div>
<script>
// Document 属性
console.log('docType', document.docType);
console.log('location', document.location);
// Document 方法
const node = document.getElementById("htmlNode");
console.log("node", node);
// GlobalEventHandlers类方案可挂在在任意HTML节点上
const htmlNode = document.getElementById("htmlNode");
htmlNode.onclick = ()=>{
console.log("触发点击事件")
}
</script>
平台 SDK
在 HTML 组件内，提供了两个全局工具对象模块：kunlun 、context可供调用。
context
上下文对象，可通过此对象获取上下文相关变量的信息，其结构与类型如下所示：
.context
├── app # 当前租户信息
│ ├── apiName
│ ├── label
│ ├── createdAt
│ ├── createdBy
│ ├── updatedAt
│ └── updatedBy
│
├── currentUser # 当前用户信息
│ ├── id
│ └── name
│
├── page # 当前页面信息
│ ├── label
│ ├── apiName
│ ├── type
│ ├── subPages
│ ├── currentSubPage
│ ├── objectApiName
│ ├── description
│ ├── setPageVar # 设置页面变量
│ └── pageVars # 获取页面变量
│
├── previewing # 当前组件处于设计态还是运行态页面中
│
├── scene # 当前组件的应用场景
│ ├── type
│ ├── objectApiName
│ ├── actionApiName
│ ├── recordId # 当前记录页 ID
│ ├── appApiName
│ └── recordPageApiName
│
└── tenant # 当前组件所在的租户
├── id
├── name
├── type
└── createdAt
context.app
类型 |
export interface App { apiName: string; label: { language_code: 2052 | 1033; text: string; }[]; createdAt: number | null; createdBy: { id: string; avatar?: Avatar; name: string; i18n_name: { language_code: 2052 | 1033; text: string; }[]; is_deleted: boolean; } | null; updatedAt: number | null; updatedBy: { id: string; avatar?: Avatar; name: string; i18n_name: { language_code: 2052 | 1033; text: string; }[]; is_deleted: boolean; } | null; } |
context.currentUser
类型 |
export interface CurrentUser { id: string; name: { language_code: 2052 | 1033; text: string; }[]; } |
context.page
当前页面信息，作用范围是同一个页面里的组件信息共享，例如可以共享页面变量
类型 |
export interface SubPage { key: string; type: string; label: Partial<{ zh_CN: string; en_US: string; }>; children?: SubPage[]; } export interface Page { label: Partial<{ zh_CN: string; en_US: string; }>; apiName: string; type: 'recordPage' | 'standard'; subPages?: SubPage[]; currentSubPage?: SubPage; objectApiName?: string; description?: Partial<{ zh_CN: string; en_US: string; }>; } |
context.previewing
当前组件处于设计态还是运行态，设计态该值为 true，运行态则为 false
context.scene
当前组件所处的页面的应用场景。
类型 |
// 标准页 export interface AppPageSceneContext { type: 'AppPage'; appApiName: string; } // Record 记录页 interface RecordPageSceneContext { type: 'RecordPage'; objectApiName: string; recordPageApiName: string; recordId: string; } export type Scene = AppPageSceneContext | RecordPageSceneContext; |
context.tenant
当前租户信息
类型 |
export interface Tenant { id: number; name: string; type: number; createdAt: number; } |
kunlun
全局对象，可通过此对象模块实现数据请求，获取全局变量等。
.kunlun
├── getVar # 获取全局变量
│
└── dataService # 数据服务
kunlun.getVar
// 假设开发者已创建了一个 key 为 test_total 的全局变量
<div>123</div>
<script>
async function getGlobalVar(){
const aa = await kunlun.getVar('test_total');
console.log('globalVar',aa);
}
getGlobalVar();
</script>
kunlun.dataService
dataService 提供了对平台元数据如对象
使用示例
<div id="htmlNode">123</div>
<script>
// 查询 _user 对象元数据信息
const loadUserMeta = async () => {
const meta = await kunlun.dataService.kObject("_user").describe({fields: ["*"]});
console.log('meta', meta);
}
// 查询 _user 对象所有记录
const loadUserRecords = async () => {
const records = await kunlun.dataService.kObject("_user").record.search({fields: ["*"]});
console.log('records', records);
}
// 触发一个 api_alias 为 _editBook 操作，触发前需提前在开发后台=>操作页面配置
const triggerAction = () => {
kunlun.dataService.kAction("_editBook").trigger({behavior: 'modal'});
}
// 触发一个 api_alias 为 myfun 的全局函数，需提前在开发后台=>低代码开发页面配置
const triggerKFunction = async () => {
const params = {
foo: 'bar'
}
const result = await kunlun.dataService.kFunction('myfun').invoke(params);
}
loadUserMeta();
loadUserRecords();
triggerAction();
triggerKFunction();
</script>
支持的 UI 样式类
HTML 组件内置了一些样式，比如文本样式、图片样式、按钮样式，开发者可通过 class 引用，详细class 列表如下：
分类 | 样式说明 | 使用方式及类名 | 效果示例 |
文本 | 普通文本 | <p class="kunlun-text"> 普通文本 </p> | 250px|700px|reset |
| 禁用文本 | <p class="kunlun-text-disabled"> 禁用 </p> | |
| 引导文本 | <p class="kunlun-text-placeholder"> 引导 </p> | |
| 告警文本 | <p class="kunlun-text-danger"> 告警 </p> | |
| 信息文本 | <p class="kunlun-text-info"> 信息 </p> | |
图片 | 圆角图片 | <img src="..." class="kunlun-img-rounded"> | 250px|700px|reset |
| 圆形图片 | <img src="..." class="kunlun-img-circle"> | |
button | 主要按钮 | <button class="kunlun-btn-primary" ... >...</button> | 250px|700px|reset |
| 次要按钮 | <button class="kunlun-btn-secondary" ... >...</button> | |
| 文字按钮 | <button class="kunlun-btn-text" ... >...</button> | |
Q&A
Question | Answer |
Q：为 buttion 标签配置 onclick 事件属性时为何报错？ | A：JS 脚本仅支持在 script 标签中编写，不再支持在常规标签中编写 onclick 等属性。如果需要给 DOM 绑定事件，可用 element.onclick = handlerFunc 或 element.addEventListener("click", handlerFunc) 中的任意一种写法。 |
Q：为什么在设计态我的 js 代码没有执行？ | A：目前设计态（包括 app builder 和 html 代码编辑器内的预览）暂不支持执行 js 代码。 |
推荐阅读：
