я был занят исследованиемплатформа с низким кодоми разработать следующие два проекта:
- Редактор H5H5-Dooring ,
- Визуальный редактор для большого экранаV6.Dooring
У меня не так много времени, чтобы делать проекты для ПК, к счастью, многие принципы построения платформ являются общими, поэтому я разработал редактор для ПК еще в прошлом году.PC-Dooring, хотя некоторые недостатки в конструкции все же есть (будут упомянуты в следующем содержании) , но базовая модель реализована, а потом я поделюсь с вами конкретной реализацией.
Чтобы обеспечить общую логику и упорядоченность статьи, я разделил конкретную реализацию платформы визуального построения на следующие части:
- Отображение эффектов редактора ПК
- Общая техническая архитектура
- Метод реализации визуальной технологии строительства
- Основная идея редактора
- Модель архитектуры редактора
- Как разработать стандартные компоненты материалов
- Пост-планирование редактора
Отображение эффектов редактора ПК
В приведенной выше демонстрации способ библиотеки компонентов иH5-DooringАналогично, за исключением того, что автор библиотеки компонентов использует библиотеку компонентов для ПК.antd, поэтому мы можем интегрировать любой компонент, поддерживаемый antd, вPC-Dooring.
Общая техническая архитектура
общая техническая архитектура иH5-DooringКлассы очень похожи и следуют философии дизайна продукта автора - не заставляйте пользователей думать, уменьшите всю сложность перетаскивания, используйтеУмная сеть электроснабжения(этот метод проектирования имеет определенные ограничения, он предназначен только для справки, конечно, вы также можете использоватьV6.Dooringв режиме свободной компоновки) Общая архитектура показана на следующем рисунке:
Из приведенного выше рисунка видно, что редактор в основном разделен на следующие части:
- материал компонента
- площадь холста
- Область редактирования свойства
- Функциональная помощь
- разное
В настоящее время компоненты материалов в основном реализуютсяосновные компоненты, Визуальная составляющаяа такжемедиа-компонент, реализация компонентов других классов аналогична, и общая реализация технологии будет представлена ниже.
Метод реализации визуальной технологии строительства
Мы по-прежнему используем интерфейсный фреймворкReact, конечно, вы также можете использоватьVue3.0,принципы одинаковые,а так же предусмотрена поддержка мультифреймворка между разными плагинами.Одной из основных частей редактора является перетаскивание компонентов.Здесь автор использует относительно мощную и стабильную библиотеку от сообществаreact-dnd, его перетаскивание разделено на две части: одна — перетаскивание из области компонентов в область холста, а другая — свободное перетаскивание компонентов внутри области холста.Мы можем использовать собственный API перетаскивания H5 для реализовать функцию первой части, суть которой заключается в передаче данных, переносимых источником перетаскивания, в область настройки холста, а целевой источник прослушивает событие, чтобы получить переносимые данные и динамически визуализировать фактический компонент. следующим образом:
Конечно исследовалreact-dndДрузья, все знают, что две вышеуказанные функцииreact-dndМожет быть достигнуто, вы можете обратиться к его официальному сайтуофициальный сайт реакции-дндИзучите и исследуйте конкретный процесс внедрения, вы также можете напрямую обратиться кPC-Dooringисходный код.
Что касается библиотеки компонентов, мы можем использовать любую известную нам библиотеку компонентов, напримерantd, element, zantи т. д., материалы компонентов должны соответствовать нашим согласованнымDSL协议, Здесь вы можете ознакомиться со стандартами протоколов промышленного уровня.спецификация данных.
С определенными спецификациями мы можем упаковать стандартные материалы компонентов для интеграции сторонних библиотек компонентов.
Что касается функциональных вспомогательных модулей и управления состоянием, мы можем использовать такие функции, какmobx, redux, dvaКонечная цель — позволить различным частям редактора быть связанными друг с другом, обновлять статус компонента в режиме реального времени и иметь возможность возвращать данные.
Основная идея редактора
Основная идея реализации редактора Автор также проанализировал несколько существующих решений ранее и нашел, что идея байтового куба очень уместна.Вот схематическая диаграмма:
Ядро генерируется через редактордействительные лексические данные, чтобы средство визуализации могло анализировать и отображать пригодную для использования HTML-страницу.
Общая модель архитектуры редактора
Общая архитектурная модель редактора предназначена в основном для того, чтобы каждый имел общее представление об идеях реализации визуального редактора и будущем направлении планирования.Автор сделал базовый набросок следующим образом:
Как разработать стандартные компоненты материалов
Разработка материалов стандартных компонентов должна соответствовать протоколу данных и спецификациям разработки компонентов в нашем редакторе.PC-DooringКомпонент разработки в основном состоит из следующих частей:
- код компонента
- определение схемы
- определение шаблона
Код компонента — это конкретная реализация внутри компонента, как в следующем случае:
import React, { memo } from 'react';
import { ITextConfig } from './schema';
import logo from '@/assets/text.png';
const Text = memo((props: ITextConfig & { isTpl: boolean }) => {
const { align, text, fontSize, color, lineHeight, isTpl } = props;
return (
<>
{isTpl ? (
<div>
<img src={logo} alt=""></img>
</div>
) : (
<div style={{ color, textAlign: align, fontSize, lineHeight }}>{text}</div>
)}
</>
);
});
export default Text;
Схема определяет ограничения свойств компонента, редактируемые типы элементов и значения по умолчанию следующим образом:
import {
IColorConfigType,
INumberConfigType,
ISelectConfigType,
ITextConfigType,
TColorDefaultType,
TNumberDefaultType,
TSelectDefaultType,
TTextDefaultType,
} from '@/components/FormComponents/types';
export type TTextSelectKeyType = 'left' | 'right' | 'center';
export type TTextEditData = Array<
ITextConfigType | IColorConfigType | INumberConfigType | ISelectConfigType<TTextSelectKeyType>
>;
export interface ITextConfig {
text: TTextDefaultType;
color: TColorDefaultType;
fontSize: TNumberDefaultType;
align: TSelectDefaultType<TTextSelectKeyType>;
lineHeight: TNumberDefaultType;
}
export interface ITextSchema {
editData: TTextEditData;
config: ITextConfig;
}
const Text: ITextSchema = {
editData: [
{
key: 'text',
name: '文字',
type: 'Text',
},
{
key: 'color',
name: '标题颜色',
type: 'Color',
},
{
key: 'fontSize',
name: '字体大小',
type: 'Number',
},
{
key: 'align',
name: '对齐方式',
type: 'Select',
range: [
{
key: 'left',
text: '左对齐',
},
{
key: 'center',
text: '居中对齐',
},
{
key: 'right',
text: '右对齐',
},
],
},
{
key: 'lineHeight',
name: '行高',
type: 'Number',
},
],
config: {
text: '我是文本',
color: 'rgba(60,60,60,1)',
fontSize: 18,
align: 'center',
lineHeight: 2,
},
};
export default Text;
Шаблон в основном определяет основной способ отображения компонентов на холсте следующим образом:
const template = {
type: 'Text',
h: 20,
displayName: '文本组件',
};
export default template;
Конечно, вы также можете расширить его определение или использоватьschemaа такжеtemplateСлияние: если компонент соответствует приведенным выше соглашениям, он может использоваться нашим редактором.
Пост-планирование редактора
В редакторе для ПК все еще есть некоторые проблемы, которые не были решены должным образом.Например, из-за ограничений метода компоновки многие компоненты должны быть развернуты по горизонтали для удовлетворения индивидуальных потребностей разных пользователей.Второе - механизм компоновки компонентов. , которым должен управлять единый дата-центр, о котором речь пойдет позже.H5-DooringКонкретный метод реализации показан на , если вам интересно, вы также можете реализовать его.
В настоящее времяPC-DooringУже тутgithubнадMITПротокол полностью с открытым исходным кодом.Если вы заинтересованы, вы также можете внести свой вклад, чтобы помочь сообществу решить больше проблем.
найти его полезным? Добавьте в избранное, если вам это нравится, и, кстати, поставьте лайк Ваша поддержка - моя самая большая поддержка! Поиск в WeChat »Интересный разговор о фронтенде», откройте для себя больше интересных игр H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацию данных Canvas и другие знания о интерфейсе и реальных боях.