Редактор H5 с открытым исходным кодом 2 месяца назадH5-DooringОн был успешно повторен дляВерсия 1.0, от исходного базового фреймворка генерации страниц до текущего, поддерживающего болееРесурсы компонента,Возможность взаимодействияа такжеВозможность отслеживания данных, я много работал над дизайном и итерациями в течение этого периода, а также получил отзывы и вдохновение от многих пользователей сети, и многие друзья-единомышленники присоединились, чтобы позволитьH5-DooringСтаньте лучше и мощнее, здесь мы специально делимся нашей последней версией и реализацией функций.
Первоначальный замысел дизайна
Основной целью авторской первоначальной разработки данного проекта является улучшение личного и корпоративного развития.H5Стоимость и эффективность страницы можно построить с помощью стандартных блоков, используя существующие библиотеки компонентов или ресурсы внешних компонентов (в стадии разработки), чтобы построить их, подходящие для различных сценариев.H5приложение и поддерживает код загрузки одним щелчком, что позволяет техническим специалистам легкоСтраница H5Развертывание на собственном сервере. Автор ранее делал много небольших приложений для генерации кода, но все они рассчитаны на то, чтобы программисты писали меньше кода, чего недостаточно, чтобы стать настоящим проектом с открытым исходным кодом, поэтому автор намерен поставитьH5-DooringСделайте хороший лендинг и сделайте действительно ценный проект.
Автор представит последнюю версиюРедактор H5Функции и идеи реализации, а также способы реализации схемы WYSIWYG.
Последняя версия предварительного просмотра эффектов редактора
Канбан данных формы и анализ данных:
стек технологий
Я также представил стек технологий и реализацию инфраструктуры, используемые H5-Dooring, в статье автора ранее, если вам интересно, вы можете обратиться к нему.Реализация визуального редактора страницы h5 на основе React+Koa
В последнее время мы рефакторим back-end часть проекта с Nest, а некоторые технические решения мы представим позже.Вот краткое введение в стек технологий, реализованный проектом:
- umi3.0 + dva + antd4.0
- реагировать + реагировать экология
- nest + mysql + redis
- nginx + pm2
Так что этот проект принадлежитполный стек проекта, выполнение многих основных функций зависит от согласованногоУровень DSL, слой рендеринга страницыа такжеВозможности серверной части.
Функциональные точки и схемы реализации
В предыдущей серии статей автора были представлены конкретные функциональные точки и планы реализации, здесь мы в основном вводимВерсия 1.0Существующие новые функции.
Добавлен компонент форматированного текста, компонент календаря, компонент взаимодействия кнопок, компонент столбца.
компонент форматированного текстаАвтор использует отечественныеbraft, предварительный просмотр выглядит следующим образом:потому что проект используетantd4.0разработан, поэтому автор специально заложил набор адаптацииantd4.0Текстовый редактор для компонентов, поддерживаетFormУправляемый режим компонента.Если вам интересно, вы можете подgithubУзнайте, как это реализовать.
Компонент календаряОн также был добавлен недавно, в основном для достижения более богатогоH5Отображение страницы выглядит следующим образом:Мы можем установить выбранный диапазон времени, основной цвет выбранного диапазона, дату и т. д. Компонент даты в основном используется авторомzarmизCalendarКомпоненты, ядро выглядит следующим образом:
import React, { useState, memo, useEffect, useRef } from 'react';
import { Calendar } from 'zarm';
import styles from './index.less';
import { ICalendarConfig } from './schema';
const CalendarPlayer = memo((props: ICalendarConfig & { isTpl: boolean }) => {
const { time, range, color, selectedColor, round, isTpl } = props;
const realRange = range.split('-');
const [value, setValue] = useState<Date[] | undefined>([new Date(`${time}-${realRange[0]}`), new Date(`${time}-${realRange[1]}`)]);
const [min] = useState(new Date(`${time}-01`));
const [max] = useState(new Date(`${time}-31`));
const boxRef = useRef<any>(null);
return <div className={styles.calenderWrap} style={{borderRadius: round + 'px', pointerEvents: isEditorPage ? 'none' : 'initial'}} ref={boxRef}>
<Calendar
multiple={!!range}
value={value}
min={min}
max={new Date(max)}
disabledDate={(date:any) => /(0|6)/.test(date.getDay())}
onChange={(value:Date[] | undefined) => {
setValue(value);
}}
/>
</div>
});
export default CalendarPlayer;
Это также достигаетсяDooringСпособ компонентов, заинтересованные друзья приветствуются какDooringДобавьте более богатую поддержку компонентов.
Друг спросил меня раньше, почему проект использует так много компонентов в предварительном просмотре.Страница H5Скорость по-прежнему очень высока, здесь я объясню конкретный метод реализации, как показано ниже:Поэтому наших мобильных продуктов и зависимых ресурсов очень мало, и мы оптимизировали уровень веб-пакета и уровень сервера, поэтому мобильный доступ к страницам H5 будет очень быстрым.Автор подробно представит эту оптимизацию позже.Непрерывная оптимизация.
Компонент взаимодействия с кнопками. Автор также написал статью, в которой подробно рассказывается о том, как реализовать взаимодействие с кнопками, настраиваемый код взаимодействия и взаимодействие с всплывающими окнами с форматированным текстом и т. д. Если вам интересно, вы можете обратиться к статье.Дизайн основных функций платформы разработки с низким кодом - реализация пользовательского взаимодействия компонентов.
Здесь автор показывает конкретный метод взаимодействия:Интерактивный пользователь, открывающий всплывающее окно, может настроить содержимое всплывающего окна следующим образом:
На данный момент эффект предварительного просмотра на мобильном телефоне выглядит следующим образом:
на заказ
codeВ этой части автор интегрировал библиотеку редактирования кодаcodemirror, чтобы мы могли настроить интерактивные возможности следующим образом:
Далее идет наш компонент столбца, который в основном представляет собой бизнес-компонент, основанный на бизнес-требованиях. Метод реализации такой же, как и у базового компонента. Вы можете испытать его в Интернете.
Добавлена функция импорта и экспорта файлов json
Причина, по которой эта функция реализована, в основном состоит в том, чтобы облегчить совместный дизайн.Страница H5Да, например, если один человек разрабатывает страницу H5 и хочет, чтобы другие участвовали в разработке дизайна, текущийСтраница H5экспортировать какJSON, другой человек может мгновенно сделать то же самое, импортировав этот файл JSON.Страница H5, а затем внесите изменения или улучшения.О том, как добиться загрузки
json, автор также представил в предыдущей статье, мы можем использоватьfile-saverЭто делает сторонний модуль.jsonМожем полностью реализовать сами, автор используетUpload + FileReader APIРеализовано, основной код выглядит следующим образом:
const uploadprops = useMemo(() => ({
name: 'file',
showUploadList: false,
beforeUpload(file, fileList) {
// 解析并提取json数据
let reader = new FileReader();
reader.onload = function(e) {
let data = e.target.result;
importTpl && importTpl(JSON.parse(data))
};
reader.readAsText(file);
}
}), []);
Добавьте снимок экрана одним щелчком мыши и создайте функцию изображения плаката высокой четкости.
Это в основном дляСтраница H5Обеспечьте быстрое картографическое решение, которое удобно для оператора или технического персонала для оценки эффекта страницы.С точки зрения внешнего интерфейса мы в основном используемcanvasПринцип преобразования DOM следующий:Автор также ранее делился конкретными схемами реализации, вы можете обратиться к следующим статьям:
Как реализовать функцию скриншота в один клик во внешнем интерфейсе?
Здесь я рекомендую два полезныхcanvasинструмент для скриншотов,html2canvasа такжеdom-to-image. DooringСкриншот процесса страницы выглядит следующим образом:
Добавлено контекстное меню и настраиваемые сочетания клавиш.
Для дальнейшего улучшения пользовательской сборкиСтраница H5Для повышения эффективности автор добавил контекстное меню, которое позволяет легко копировать созданные компоненты или удалять их одним щелчком мыши следующим образом:Но для контроллеров клавиатуры они предпочитают использовать клавиатуру для выполнения всех функций, поэтому я добавил сочетания клавиш для поддержки копирования, вставки и удаления элементов одной клавишей, как показано ниже:
Вот несколько библиотек полезных контекстных меню и сочетаний клавиш.
react-contexify, keymaster.
Добавить конфигурацию страницы
Эта часть в основном предназначена для того, чтобы дать странице H5 больше свободы, вы можете настроить заголовок страницы,SEOКлючевые слова, фон страницы и фоновое изображение и т. д., а именно:Дополнительные возможности настройки страницы будут добавлены в будущем.
Оптимизация дизайна интерфейса
а такжеВерсия 0.1Интерфейс был значительно скорректирован и оптимизирован, например, наша страница входа:Страница предварительного просмотра:
Поддержка импорта SDK
Это также попытка, предпринятая автором ранее, так чтоH5-Dooringможет пройтиsdkспособ быть имплантированным в любойwebсистемы и обеспечивает настраиваемые функции и отображениеapi, в основном следующим образом:Принцип реализации также был представлен в статье ранее, а именно:
Если вам интересно, вы можете обратиться к следующим статьям автора:
Как быстро инкапсулировать ваше приложение в js-sdk?
Позднее планирование
Главное, что нужно сделать на более позднем этапе, — продолжать обогащать качественные бизнес-компоненты и проводить рефакторинг.githubРазработайте архитектуру существующего кода, сделайте хорошую работуПосмотреть, данные, логиканаслоение, разделение средств визуализации страниц и средств визуализации форм, предоставление возможностей открытия компонентов, расширение возможностей фоновых служб и т. д. Заинтересованные друзья могут выдвигать ценные предложения иissue, непрерывная итерация и оптимизация.
адрес гитхаба: GitHub.com/Mr X U соус/Также…
приветствую всехforkа такжеstar.
наконец
Позже я продолжу открывать исходный код 100+, написанных автором ранее.Не беспокойтесь о кодеИнструменты и боевые проекты, добро пожаловать в поиск WeChatИнтересный разговор о фронтенде, Узнайте больше о забавных и практичных интерфейсных проектах с открытым исходным кодом.