1、概述
组件开发主要是由几4大模块构成，每个模块负责不同的分工，相互搭配构建成一个完整的可编辑组件。
组件开发主要是由几4大模块构成，1、default-setting模块、template模块、setting模块，main模块、每个模块负责不同的分工，相互搭配构建成一个完整的可编辑组件。模块
2、template模块
3、setting模块
4、main模块
2、模块介绍
| 锚 | ||||
|---|---|---|---|---|
|
1、default-setting模块
组件的默认设置，包含组件的基础设置，元素设置，内置页设置等组件基础信息。
1、元素配置
元素配置是组件构建的核心配置，所有的组件都依赖元素配置生成对应编辑器，渲染引擎的组件。
元素的配置分为元素的公用配置信息，私有元素配置。
1、元素配置列表
| 元素名称 | ComponentElementModel 元素公用设置 | BaseCmp<T> 私有元素配置 |
|---|---|---|
属性 | 说明 | 类型 |
|---|---|---|
name | 元素名称，可供编辑器显示用 | string |
key | 可编辑元素的英文标识，可用于代码编程 | string |
type | 可编辑元素类型包括 'btn' | 'text' | 'image' | 'choose' | 'input' | 'textarea' | 'submit' | 'fileUploader' | 'select' | 'dialog' | 'shape' | 'wxportrait' | 'wxnickname' | string |
style | 元素的样式 | Object | undefined |
isDisableControllable | 是否可控制显示或隐藏 | boolean | undefined |
parentName | 元素所属的组件名或内置页名 | string | string[] | undefined |
isScale | 是否可以缩放大小 | boolean | undefined |
isDisableClick | 是否有点击事件 | boolean | undefined |
isDisableDraggable | 是否可拖拽 | boolean | undefined |
isDisableRotable | 是否可旋转 | boolean | undefined |
isDisableImageReplaceable | 图片是否可替换，一些占位图是不能替换的 | boolean | undefined |
isDisableTextReplaceable | 文本是否可替换do | boolean | undefined |
isDisableAnimation | 是否禁用动画 | boolean | undefined |
isDisableTextBtn | 是否禁用文字按钮，即仅图片按钮（仅对按钮元素有效） | boolean | undefined |
isDisableFontSetting | 是否禁用字体设置（有些动态来源的文本内容，如微信昵称，无法切割字体，需要禁用掉组件面板上的字体设置） | boolean | undefined |
anchorsType | 编辑状态锚点的类型：为空则表示没有锚点，不能改变大小 'nw n ne e se s sw w' 代表组件编辑框的8个锚点 | string | undefined |
hiddenWhenNoNickname | 当获取不到微信昵称时，是否隐藏默认文字（仅对微信昵称元素有效） | boolean | undefined |
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,
}; |
...
1、ComponentDefaultSetting 默认设置
属性
说明
类型
name
元素名称，可供编辑器显示用
string
key
可编辑元素的英文标识，可用于代码编程
string
type
可编辑元素类型包括 'btn' | 'text' | 'image' | 'choose' | 'input' | 'textarea' | 'submit' | 'fileUploader' | 'select' | 'dialog' | 'shape' | 'wxportrait' | 'wxnickname'
string
style
元素的样式
Object | undefined
isDisableControllable
是否可控制显示或隐藏
boolean | undefined
parentName
元素所属的组件名或内置页名
string | string[] | undefined
isScale
是否可以缩放大小
boolean | undefined
isDisableClick
是否有点击事件
boolean | undefined
isDisableDraggable
是否可拖拽
boolean | undefined
isDisableRotable
是否可旋转
boolean | undefined
isDisableImageReplaceable
图片是否可替换，一些占位图是不能替换的
boolean | undefined
isDisableTextReplaceable
文本是否可替换do
boolean | undefined
isDisableAnimation
是否禁用动画
boolean | undefined
isDisableTextBtn
是否禁用文字按钮，即仅图片按钮（仅对按钮元素有效）
boolean | undefined
isDisableFontSetting
是否禁用字体设置（有些动态来源的文本内容，如微信昵称，无法切割字体，需要禁用掉组件面板上的字体设置）
boolean | undefined
anchorsType
编辑状态锚点的类型：为空则表示没有锚点，不能改变大小
'nw n ne e se s sw w' 代表组件编辑框的8个锚点
string | undefined
hiddenWhenNoNickname
属性 | 说明 | 类型 |
|---|---|---|
name | 组件英文名，唯一 | string |
title | 组件中文描述 | string |
cover | 组件封面图 | string |
style | 组件自身的样式 | Object | undefined |
inlinePages | 组件内置页列表 | ComponentInlinePage[] |
elements | 组件内部可编辑元素列表，能够被编辑器识别的原子组件 | ComponentElementModel[] |
hasComponentSetting | 组件是否有需要在编辑器右侧设置面板中加载的 setting 配置 | boolean | undefined |
componentBgVisible | 组件是否支持隐藏背景，当为false时才隐藏背景，undefined不隐藏 | boolean | undefined |
isDisableClientRect | 是否可以设置宽高(编辑器会禁止自适应宽高) | boolean | undefined |
2、ComponentElementModel 元素公共设置
boolean | undefined |
3、BaseCmp 可编辑元素设置
4、ComponentInlinePage 内置页设置
...
渲染模块中会有对应的render方法将组件逻辑渲染出来，最终注册到编辑器、渲染引擎使用。但组件的构建需要依赖default-setting、用户信息等数据支持，所以在构建组件之前需要创建一个上下文，提供此类数据给组件使用。
1、DependencyContext 上下文
| 上下文 | 创建 | 说明 |
|---|---|---|
| DependencyContext | React.createContext | 组件配置上下文 |
注意:
DependencyContext只能提供给template、setting模块相关组件使用(main模块为PReact构建，所以无法正常调用)。
...