H5 Dooring Vue
1.0.0
H5-DOORING-это мощное, открытое и бесплатное решение для конфигурации страницы H5, приверженное предоставлению набора простых, удобных, профессиональных и надежных наилучших методов целевой страницы H5, которые просты, профессиональные и надежные и бесконечно возможно. Технологический стек в основном реагирует, и фон разработан с использованием Nodejs.
Взносы, проблемы и запросы на функции приветствуются!
Не стесняйтесь проверять страницу проблем.
Дайте ️, если этот проект помог вам!
Визуальный редактор в основном состоит из следующих частей:
Мы можем использовать React-DND и React-Dragyable , который популярен в сообществе.
Второе - часть редактора H5, которая является основной функцией, которую мы подробно проанализируем позже. Существуют также такие функции , как предварительный просмотр, генерирование предварительных ссылок, сохранение файлов JSON и сохраненные шаблоны. Давайте посмотрим на демонстрацию этих функций:
Наш визуальный редактор страницы H5 использует UMI в качестве инструмента для лесов.
UMI -это масштабируемая фронтальная структура приложения на уровне предприятия, основанная на маршрутизации, и поддерживает как настроенную маршрутизацию, так и маршрутизацию соглашения, чтобы гарантировать, что функции маршрутизации завершены и выполняется расширение функций. Затем он оснащен системой плагинов с полным жизненным циклом, охватывающей каждый жизненный цикл от исходного кода до создания продуктов, поддерживая различные функциональные расширения и бизнес-требования.
Таким образом, мы не будем обращать внимания на громоздкие детали конфигурации проекта, мы можем напрямую использовать ANTD и меньше решений в проекте и интегрировать в настоящее время популярный модуль CSS , который может способствовать модульной разработке CSS в проекте.
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm installПростая трехэтапная стратегия может легко создать наш проект, сэкономил ли он много проблем?
После создания проекта нам также необходимо установить необходимые сторонние компоненты в визуализации.
Вы можете установить вышеуказанные компоненты самостоятельно перед запуском проекта.
После лучшей подготовки к разработке проекта мы начнем проектирование нашего визуального редактора H5 -страницы - дверца .
Визуальный редактор H5 в основном требует 4 частей, которые были проанализированы в начале статьи.
Мы все знаем, что есть несколько популярных решений для визуализации страниц:
Автор сделал сравнительную диаграмму преимуществ и недостатков следующим образом:
| план | Степень настройки | недостаток |
|---|---|---|
| Редактировать код онлайн | Самый высокий | Высокая стоимость использования, недружелюбные для нетехнического персонала и низкая эффективность |
| Редактировать JSON Online | Выше | Необходимо быть знакомым с JSON, имеет определенную стоимость использования, не является дружелюбным к нетехническому персоналу и, как правило, эффективно |
| Нет реализации перетаскивания кода | высокий | Низкая стоимость использования, в основном нет порога для эксплуатации, высокой эффективности |
Согласно вышеуказанному анализу, для разработки визуального редактора, который является низким уровнем и подходящим для всех, автор примет третье решение для его реализации.
Чтобы предоставить возможности настройки компонентов, нам необходимо определить набор высокодоступных структур данных для достижения преимуществ технического обслуживания, вызванных изменениями требований компонентов.
Перед тем, как разработать структуру данных, давайте сначала разобрать модуль: различные компоненты соответствуют различным «областям редактирования».
После приведенного выше анализа автор разработал структуру данных, аналогичную следующему:
"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
}
}После этого стандартизированного структурного дизайна мы можем легко реализовать функции редактирования, которые нам нужны, и более позднее расширение очень удобно.
Создайте общую платформу конфигурации управления формой на основе React (так же, как Vue)
Важной проблемой в разработке библиотеки компонентов является проблемы с размером и рендерингом, что после того, как библиотека компонентов становится все больше и больше, означает, что загрузка страницы будет очень медленной, поэтому нам необходимо реализовать возможность загрузки компонентов и сегментации кода, а также предоставляют 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 ;
} ,
} ) ;С помощью приведенного выше метода мы определяем каждый компонент, который охватывает каждый из наших компонентов, так что мы можем загрузить по требованию, но лучшее предложение состоит в том, что нам не нужно загружать и распаковать каждый компонент по требованию.
Здесь я приведу вам краткий пример реализации компонентов, что удобно для всех, чтобы понять:
const Header = memo ( ( props ) => {
const {
bgColor ,
logo ,
logoText ,
fontSize ,
color
} = props
return < header className = { styles . header } style = { { backgroundColor : bgColor } } >
< div className = { styles . logo } >
< img src = { logo && logo [ 0 ] . url } alt = { logoText } />
</ div >
< div className = { styles . title } style = { { fontSize , color } } > { logoText } </ div >
</ header >
} )Атрибут реквизита приведенного выше компонента заголовка полностью определяется структурой JSON, которую мы разработали ранее. Последний шаг - динамически передавать эти компоненты динамическим компонентам.
Предварительная функция является относительно проста.
Чтобы загрузить этот онлайн, нам необходимо использовать библиотеку с открытым исходным кодом: файл , который специально решает дилемму сложности в фронтальных файлах загрузки.
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;Приведенный выше код может загрузить входящие данные в файл TXT.
Поскольку бэкэнд включает в себя много знаний и не является центром этой статьи, я дам здесь несколько моментов .
Для конкретного кода, пожалуйста, обратитесь к еще одной статье о разработке полной стека.
Реализуйте проект CMS Full-Stack от 0 до 1 на основе Nodejs
Образец в основном такой же.
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installНачните приложение
yarn run startОбновление версии 1.3, пожалуйста, следите за обновлениями ...
