...
组件开发主要是由几4大模块构成，每个模块负责不同的分工，相互搭配构建成一个完整的可编辑组件。
1、default-setting模块 模块，组件基础信息配置。
2、template模块 模块，负责编辑器舞台的组件注册、渲染。
3、setting模块 模块，负责编辑器舞台组件相关设置面板注册、渲染。
4、main模块 模块，负责渲染引擎组件注册、渲染。
2、模块介绍
| 锚 | ||||
|---|---|---|---|---|
|
1、default-setting模块
...
元素的配置分为元素的公用配置信息，私有元素配置。
1、元素配置列表
| 元素名称枚举 | |||||||||||
import ElementTypes from "@fe-plugin/components/lib/constants/element-types"; | |||||||||||
| 元素名称 | ComponentElementModel 元素公用设置 | BaseCmp<T> 私有元素配置 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
按钮 ElementTypes.BTN |
| ||||||||||
可编辑元素类型包括 'btn' | 'text' | 'image' | 'choose' | 'input' | 'textarea' | 'submit' | 'fileUploader' | 'select' | 'dialog' | 'shape' | 'wxportrait' | 'wxnickname'
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文本 ElementTypes.TEXT | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
图片 ElementTypes.IMAGE | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
表单选项 ElementTypes.CHOOSE | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
表单输入框 ElementTypes.INPUT | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
表单文本域 ElementTypes.TEXTAREA | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
表单提交 ElementTypes.SUBMIT | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文件上上传 ElementTypes.FILEUPLOADER | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
表单下拉框 ElementTypes.SELECT | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
弹窗 ElementTypes.DIAGLOG | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
形状 ElementTypes.SHAPE | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
微信头像 ElementTypes.WXPORTRAIT | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
微信昵称 ElementTypes.WXNICKNAME |
default-setting 配置示例
| 代码块 | ||||
|---|---|---|---|---|
| ||||
//包含一个按钮 和 一个内置页的组件
const defaultSetting = {
name: "testCmp",
title: "测试组件",
inlinePages:[
{
name: "INLINE_PAGE_A",
title: "这是内置页",
style: {},
cover:
"https://static.h5no1.com/rp/plugin/assets/a19e096f-89b8-4f15-8187-09db7a3c86f0",
}
],
elements:[
{
key: "BTN_A",
name: "按钮",
type: "btn",
label: "确定",
style: {
position: "absolute",
left: 42,
top: 353,
width: 235,
height: 39,
backgroundColor: "rgba(224,47,36,1)",
borderRadius: 20,
fontSize: 15,
fontWeight: 600,
color: "rgba(255,255,255,1)",
},
parentName: "testCmp",
},
],
cover:"https://static.h5no1.com/rp/plugin/assets/85becc30-ccb4-41b2-ad75-9bfa9447e587",
style: {
width: 293,
height: 408,
backgroundColor: "#fff",
},
hasComponentSetting: true,
}; |
...