Слияние кода завершено, страница обновится автоматически
[toc]
Ошибки при установке с npm могут быть связаны с версией Node, но yarn работает корректно, так как проект может быть построен с использованием yarn.
H5-Dooring — это мощное, открытое и бесплатное решение для визуализации конфигурации страниц H5, которое стремится предоставить простое, удобное, профессионально надежное и бесконечное количество возможностей для оптимальной реализации H5-страниц. Технологическая стек основывается на react, а серверная часть разработана на nodejs.
Вклады, проблемы и запросы на функции приветствуются!
Не стесняйтесь проверить страницу проблем.
Добавьте ⭐️, если этот проект помог вам!## Технологическая структура
На основе вышеупомянутого gif-изображения можно сделать вывод, что визуальный редактор состоит из следующих основных частей:Для реализации перетаскиваемых компонентов можно использовать популярные в сообществе react-dnd и react-draggable. Поскольку наша панель является перетаскиваемой и масштабируемой, здесь требуется дополнительная функциональность для панели, подробное описание реализации можно найти ниже.Далее идет раздел H5-редактора, который является ключевым функционалом, и мы подробно рассмотрим его позже. Также есть функции предварительного просмотра, создания ссылки для предварительного просмотра, сохранения json-файлов и сохранения шаблонов. Эти функции в основном связаны с операциями над json-файлами и являются одним из распространенных методов визуального построения приложений. Давайте посмотрим на демонстрацию этих функций:
Наш H5-редактор визуального построения использует umi в качестве инструмента для создания проекта.
umi - это расширяемая корпоративная фронтенд-платформа, основанная на маршрутах, поддерживающая конфигурационные и соглашательные маршруты, гарантирующая полноту функций маршрутизации и расширяющая функциональность на их основе. Затем добавляется система плагинов с полным жизненным циклом, охватывающая каждый этап от исходного кода до конечного продукта, поддерживающая различные расширения функциональности и бизнес-потребностей.Таким образом, мы можем не беспокоиться о сложных деталях конфигурации проекта и сразу использовать antd и less в проекте, а также интегрировать популярные css modules, что позволяет удобно разрабатывать CSS в модульном виде. Конкретные шаги по созданию проекта с помощью umi следующие:
// Создание и переход в директорию проекта
mkdir dooring && cd dooring
// Создание umi-приложения
yarn create @umijs/umi-app
// Установка зависимостей
yarn // или npm install
Три простых шага позволяют легко создать наш проект, не правда ли? (Перед использованием этих методов убедитесь, что версия Node на вашем компьютере 10.13 или выше)После создания проекта нам также потребуются дополнительные компоненты для визуализации. После исследования сообщества и выбора лучших компонентов, мы используем следующие решения:
Вы можете самостоятельно установить эти компоненты перед запуском проекта.
После подготовки проекта, мы можем приступить к дизайну нашего H5-редактора визуального построения - Dooring.### Реализация H5 редактора
H5 визуальный редактор состоит из четырёх основных частей, которые были рассмотрены в начале статьи. Ниже приведена схема для закрепления информации:
Это базовая и самая важная модель демонстрации функциональности. Далее мы разберем каждую из этих частей по отдельности и реализуем их.
Как известно, существуют несколько популярных схем визуального построения страниц:
| Схема | Уровень кастомизации | Недостатки |
|---|---|---|
| Онлайн-редактирование кода | Самый высокий | Высокая стоимость использования, не подходит для непрофессионалов, низкая эффективность |
| Онлайн-редактирование JSON | Высокий | Требуется знание JSON, есть стоимость использования, не подходит для непрофессионалов, средняя эффективность |
| Безкодовое редактирование с помощью перетаскивания | Высокий | Низкая стоимость использования, простота использования, высокая эффективность |
На основе вышеупомянутого анализа, чтобы создать визуальный редактор, доступный для всех и не требующий специальных навыков, автор решил использовать третий метод. На рынке уже есть множество продуктов, таких как YiQixiu, Tuizhan, Baidu H5 и другие. Основной принцип реализации заключается в использовании JSON. Мы используем визуальные средства для преобразования настроек страниц в JSON-данные, а затем используем JSON-рендер для динамического создания H5-сайта.
Чтобы обеспечить возможность кастомизации компонентов, нам необходимо определить структуру данных, которая будет эффективной и удобной для поддержки изменений в компонентах.Перед тем как приступить к проектированию структуры данных, давайте разберем модули:
Разные компоненты соответствуют разным "редактируемым областям". Нам нужно разработать единые стандарты конфигурации для этих областей, что будет полезно для проектирования редактора форм. Детальное разбиение представлено ниже:
После проведенного анализа автор разработал подобную структуру данных:
"Text": {
"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
}
}
С использованием такой нормализованной структуры данных, можно легко реализовать функциональность редактирования страниц, а также легко расширять функциональность, добавляя конфигурации в editData.Что касается реализации динамического редактора форм, то существует множество подходов, и автор уже публиковал статьи на эту тему, поэтому здесь подробно останавливаться не будем. Создание универсальной платформы управления формами на основе React (и Vue)#### Проектирование библиотеки компонентов
При проектировании библиотеки компонентов одним из важных аспектов является объем и скорость рендеринга. С увеличением количества компонентов загрузка страницы может стать очень медленной. Поэтому нам необходимо реализовать возможность асинхронной загрузки компонентов и разделения кода. Umi предоставляет такие возможности, и мы можем использовать его API для реализации своих собственных компонентов по требованию.
import { dynamic } from 'umi';
export default dynamic({
loader: async function() {
// Комментарий webpackChunkName может быть использован для указания webpack, чтобы этот компонент HugeA был вынесен отдельно под этим именем
const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA');
return HugeA;
},
});
Используя вышеуказанный подход для определения каждого из наших компонентов, мы можем достичь асинхронной загрузки. Однако лучший совет заключается в том, чтобы не загружать каждый компонент по требованию и не разделять его. Для компонентов, таких как заголовок, уведомление, шапка страницы и подвал страницы, мы можем объединить их в одну группу. Это не только не повлияет на скорость загрузки, но и сократит количество HTTP-запросов.
Вот пример реализации компонента, чтобы было легче понять:```js const Header = memo((props) => { const { bgColor, logo, logoText, fontSize, color } = props return <header className={styles.header} style={{backgroundColor: bgColor}}>
var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");
```Вышеуказанный код позволяет скачивать переданные данные в виде текстового файла. Если данные представлены в виде Blob, можно ли скачивать изображения или HTML-файлы онлайн? Ответ — да, поэтому для реализации задачи скачивания мы используем этот подход.
### Реализация серверной части
Серверная часть включает в себя множество различных знаний, которые не являются основной темой данной статьи. Поэтому здесь мы упомянем лишь несколько ключевых моментов. Вы можете использовать совершенно разные технологии для реализации серверной части, например **PHP**, **Java**, **Python** или **Egg**. В данной статье используется **koa**. Основные реализованные функции:
* Сохранение шаблонов
* Хранение данных источников для реального устройства
* Функции, связанные с пользователем
* Хранение H5-страниц и статических файлов
Для более подробного изучения кода можно обратиться к статье о полном стеке разработки.
[Создание CMS с нуля до единицы на основе NodeJS](https://juejin.im/post/6844903952761225230)
Структура проекта аналогична.## Реализованные функции
* 1. Функция перетаскивания и отображения компонентов
* 2. Динамическое редактирование компонентов
* 3. Функция предварительного просмотра H5-страниц
* 4. Сохранение конфигурации H5-страниц
* 5. Сохранение в виде шаблона
* 6. Кросс-платформенная адаптация для мобильных устройств
* 7. Компоненты для работы с медиа
* 8. Функция онлайн-скачивания кода сайта
* 9. Добавление поддержки TypeScript
* 10. Конструктор форм/визуализация форм## В разработке
* Добавление модуля библиотеки шаблонов
* Увеличение количества компонентов в библиотеке и добавление визуализации
* Добавление функции взаимодействия с конфигурацией
* Разделение компонентов и оптимизация кода
* Добавление юнит-тестов
## Установка
1. Клонирование кода
```sh
git clone https://github.com/MrXujiang/h5-Dooring.git
cd ./h5-Dooring
yarn install
Запуск приложения
yarn run start
В разработке версия Yöntem 1.3, ожидайте...
В разработке версия 1.3, ожидайте...
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )