让H5制作像搭积木一样简单!

Добро пожаловать в H5-Dooring 👋

Рис. 1. Заголовок страницы.

Приветствуем вас в H5-Dooring! Это мощное и надёжное решение для создания визуальных конфигураций H5, которое предлагает простой, профессиональный и гибкий подход к созданию лендингов на основе H5. Технологический стек основан на React и TypeScript, а бэкенд разработан с использованием NodeJS. В настоящее время мы исследуем решения H5 с низким уровнем кодирования.

На китайском языке | на английском

Связанные продукты:

• V6.Dooring | Визуальный редактор для больших экранов (https://github.com/MrXujiang/v6.dooring.public)
• dooring-electron-lowcode | Настольное программное обеспечение Dooring (https://github.com/MrXujjiang/dooring-electron-lowcode)

👤 Автор: Сюй Сяоси

• Веб-сайт: http://h5.dooring.cn
• Github: @MrXujiang
• Последние новости о технологии Dooring с низким уровнем кода

🤝 Вклад и поддержка

Мы приветствуем вопросы и предложения по улучшению. Если у вас есть хорошие идеи или предложения по оптимизации, мы также приглашаем вас внести свой вклад через PR. Страница вопросов.

Если вам нравится проект, поставьте звёздочку!

Список ответов на вопросы: http://h5.dooring.cn/docz/source-list/H5-Dooring/guide

Частные развёртывания документов

Адрес: http://h5.dooring.cn/docz

Особенности

1. Редактор

   • Справочные линии
   • Базовые компоненты
   • Визуальные компоненты
   • Медиакомпоненты
   • Компоненты товаров
   • Перетаскиватель
   • Панель конфигурации
   • Дизайнер форм
   • Управление несколькими страницами (копирование, редактирование, удаление, создание)
   • Анимация компонентов
   • Взаимодействие компонентов
   • Управление источниками данных
   • Быстрый предварительный просмотр
   • Предварительный просмотр на реальном устройстве
   • Отмена и повтор действий
   • Обмен в WeChat
   • Горячие клавиши
   • Библиотека шаблонов
   • Настольное ПО Dooring-Electron, поддерживающее автономное использование

2. Расширенные функции

   • Загрузка JSON и преобразование в H5 одним щелчком мыши
   • Галерея изображений
   • Возможность загрузки (загрузка исходного кода, загрузка пакета dist)

3. Бэкэнд API

   • Создание, сохранение и обновление работ
   • Управление пользователями и управление правами доступа
   • Интеллектуальный анализ одним нажатием
   • Просмотр данных
   • Сбор данных из форм
   • Отображение данных из форм
   • Анализ данных из форм, экспорт данных в Excel одним нажатием, поиск по нескольким условиям в формах
   • Онлайн-предварительный просмотр
   • Предварительный просмотр QR-кода
   • Управление шаблонами
   • Интерфейс загрузки

Журнал обновлений

1. Добавлена возможность настройки полноэкранного режима для видеокомпонентов.
2. Исправлена проблема с неработающим кликом по иконке.
3. Поддержка переключения между различными размерами экрана и настройка размера холста.
4. Исправлены проблемы с многоязычностью в анализе данных на бэкэнде.
5. Пользовательский выбор компонентов в библиотеке компонентов.

Бэкенд

Бэкенд-часть включает в себя множество технических аспектов, которые не являются основной темой этой статьи. Поэтому здесь мы рассмотрим несколько ключевых моментов, и вы можете использовать совершенно разные технологии для реализации бэкэнд-сервисов, такие как PHP, Java, Python или Egg. Автор использует Koa.

Конкретный код можно найти в статье о разработке полного стека редактора документов:

• Разработка полного стека документа с нуля с помощью Koa + React + TS

• Документация по API Dooring

• Частные развёртывания

Установка

1. Клонируйте код:

git clone https://github.com/MrXujiang/h5-Dooring.git

2. Перейдите в каталог проекта:

cd ./h5-Dooring

3. Установите зависимости (необходимо установить yarn заранее):

yarn pkg

Использование

Запустите приложение локально:

yarn start
or
cnpm run start

Модули и структура каталогов

Этот проект использует lerna для управления несколькими пакетами и объединяет модули федерации для рендерера. Он эффективно разделяет редактор и демонстрационный компонент C.

• editor

Визуальный редактор; отвечает за перетаскивание компонентов, настройку свойств и публикацию.

• ui

Библиотека компонентов и рендерер; отвечает за различные компоненты материалов и механизм загрузки холста.

• doc

Руководство пользователя и документация по разработке.

Как запустить скачанный код?

1. Вы можете распаковать сжатый пакет прямо в корневой каталог сервера и получить доступ к корневому каталогу.
2. vscode установите плагин Live Server, распакуйте загруженный сжатый пакет в папку, откройте его с помощью vscode, нажмите Live Server. Обратите внимание, что необходимо удалить путь запуска index.html и изменить его на /.

Если вы обнаружите, что после локального запуска возникают странные ошибки при перетаскивании компонентов, это может быть связано с ошибками в сторонних компонентах в среде разработки. Вы можете попробовать следующее решение:

yarn dev
or
cnpm run dev

Предварительным условием является установка модуля http-server. ## Совместные проекты

• mitu-editor — лёгкий, но мощный редактор изображений.
• powerNice — облегчённый редактор для управления документами.
• rc-drag — облегчённая библиотека компонентов для перетаскивания и масштабирования на основе React.
• Luckysheet — мощный онлайн-редактор Excel.
• Blink — библиотека настраиваемых компонентов для создания анимаций сбоев.
• frontend-developer-roadmap — сборник библиотек JavaScript для повышения эффективности работы разработчиков.
• lucky-canvas — плагин для проведения розыгрышей с поддержкой H5, мини-программ WeChat и React.
• vue-admin-box — бесплатный и открытый исходный код шаблона системы управления средним и задним фоном.
• ant-simple-pro — шаблон управления бэкендом, основанный на Ant и готовый к использованию.
• gin-vue-admin — полнофункциональная базовая платформа для быстрой разработки с использованием gin и vue.

Поддержка

Открытому исходному коду нелегко. С вашей поддержкой мы сможем сделать больше!

Личный WeChat: lowcode-dooring.

Техническая обратная связь и группа общения

WeChat: beautifulFront.