Объяснение

Данный проект больше не поддерживается и используется в основном как справочный материал. Чтобы лучше предоставлять решения для настройки, мы сделали обновление на основе этого проекта и предоставили улучшенную версию. Подробнее см. на сайте https://saas.mlml.design/home.html.

Сайт

Сайт: https://godspen.ymm56.com/.

Руководство пользователя: https://godspen.ymm56.com/doc/cookbook/introduce.html.

Онлайн-демонстрация: https://godspen.ymm56.com/admin/#/home.

Частная установка: https://godspen.ymm56.com/doc/cookbook/install.html.

Магазин компонентов: https://godspen.ymm56.com/shop/.

• Примечание: «Нравится? Не забудьте поставить звёздочку, чтобы поддержать нас. Ваша поддержка — это наша движущая сила».

Что такое «Код-Лян»?

«Код-Лян» — это онлайн-платформа для создания H5-страниц и управления ими, а также для редактирования страниц. Она позволяет пользователям создавать красивые страницы без необходимости владения сложными навыками программирования. Пользователи могут легко создавать страницы с помощью простого перетаскивания и минимальной конфигурации. «Код-Лян» также предоставляет разработчикам полный набор возможностей для программирования, позволяя им получать мощные возможности компонентов и взаимодействия через скрипты и компоненты.

«Код-Лян»: для кого он создан?

Как упоминалось выше, «Код-Лян» может использоваться операционными сотрудниками для создания простых маркетинговых страниц, но его полный набор функций программирования также делает его полезным инструментом для разработчиков, которые хотят быстро создавать итерации проектов. Первоначальной целью «Кода-Ляна» было создание открытой и бесплатной платформы. Мы надеемся, что талантливые люди смогут внести свой вклад в виде компонентов, скриптов и шаблонов дизайна на платформе. Если потребуется, мы также готовы предоставить платные или бесплатные услуги разработки компонентов или скриптов. Конечно, платформа также подходит для внутренней установки компаниями.

Текущее состояние «Кода-Ляна»

«Код-Лян» был запущен в марте 2018 года и к июлю 2020 года уже поддерживает более 4100 активных страниц. За это время мы получили множество отзывов, предложений и отчётов об ошибках. Основываясь на этом, мы продолжаем улучшать эффективность работы и удобство использования. Путь ещё долог, и нам предстоит приложить немало усилий. В настоящее время все функции, доступные на нашем сайте, полностью открыты и доступны.

Поддерживаемые функции

1. Редактор:

   • Поддержка различных ролей пользователей и возможность перетаскивать компоненты самостоятельно;
   • Компоненты и комбинированные компоненты;
   • Редактирование анимации в реальном времени;
   • Пошаговое редактирование анимации с возможностью перетаскивания кадров в реальном времени;
   • Функциональность скриптов, позволяющая гибко расширять панель свойств редактора (очень просто добавить дополнительные свойства и методы к компонентам, полностью контролируя код);
   • Стилистическое редактирование, включая базовый режим и режим кода. Удобно для разработчиков и операционных сотрудников;
   • Онлайн-предпросмотр;
   • Предпросмотр QR-кодов;
   • Возможность импорта PSD;
   • Поддерживает ПК и мобильные устройства.

2. Магазин компонентов:

   • Более 25 компонентов. Приглашаем разработчиков вносить свои компоненты. Просмотреть все компоненты;
   • Можно загружать и скачивать компоненты других людей;
   • Можно продавать собственные компоненты;
   • Можно покупать компоненты других разработчиков.

3. Управление бэкендом и данными:

   • Управление страницами по группам, подобно управлению проектами в GitLab. Рациональное управление правами доступа;
   • Сбор данных форм и совместное использование данных;
   • Поддержка статистики посещений, уникальных посетителей и настраиваемых точек данных;
   • Удобное управление ресурсами и компонентами.

Магазин компонентов

Мы предоставляем возможность быстрого импорта сторонних компонентов в наши системы или возможность загрузки собственных компонентов в наш магазин для использования другими пользователями бесплатно или за плату.

Простое подключение компонентов

Если сторонние компоненты не удовлетворяют вашим потребностям, мы предлагаем удобный конструктор для создания компонентов. Вы можете превратить небольшую функцию, страницу или проект в компонент и предоставить параметры другим пользователям в редакторе. Документация по разработке компонентов.

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

Расширение функциональности компонентов с помощью скриптов

Каждый специфический функциональный компонент можно расширить с помощью комбинации различных функциональных возможностей (таких как переходы по клику, отслеживание событий и т. д.), предоставляя параметры для удобного ввода в редактор пользователями компонентов. В настоящее время каждый скрипт является объектом Vue, что очень удобно для разработчиков, знакомых с Vue. Для получения более подробной информации посетите Вики «Как разработать высокорасширяемую онлайн-платформу для создания веб-страниц».

На рисунке показана область работы редактора.

Демонстрация анимации компонентов

Для некоторых простых анимаций, таких как вход и выход, анимация может быть предоставлена для повышения интерактивности мероприятий. Мы используем Animate.css для предоставления набора анимаций CSS. Также предоставляется пошаговая настройка предварительного просмотра для удобства использования. Ниже представлена простая демонстрация.

Компоненты демонстрации

Компоненты синтеза — это выбор существующих узлов для сохранения в качестве универсальных компонентов для будущего прямого использования. Ниже представлены простые демонстрации.

Использование составных компонентов

Экспорт составных компонентов

Демонстрация шаблонных страниц

Цель шаблонных страниц аналогична составным компонентам — предоставление готового контента для ускорения выбора и использования операторами при запуске мероприятий. Ниже представлена простая демонстрация.

Установка зависимостей

Здесь следует помнить, что для установки зависимостей следует использовать команду yarn install, а не npm install. Это гарантирует согласованность версий.

// yarn install == yarn
yarn

Разработка

npm start

Сборка

Сборка редактора:

npm run editor:build

Сборка рендерера:

npm run client:build

Техническая реализация и учебные пособия

• Введение: правильный способ запуска «Кода-Ляна»;
• Как разработать высокорасширяемую онлайн-платформу для создания веб-страниц. Как использовать «Божественное перо»

[Божественное перо открыто, как мне его использовать?]

Компонентная разработка

Расширение функциональности компонентов с помощью скриптов

Часто задаваемые вопросы

Необходимо контролировать версию Node.js на уровне 10.x. Использование версий вроде 11.x или 12.x может привести к ошибкам при установке зависимостей.

Зависимости проекта следует устанавливать с помощью yarn. Не рекомендуется использовать npm, так как это может вызвать проблемы с версиями зависимостей.

При установке зависимостей в системе Windows, если отсутствует среда компиляции C++, могут возникнуть ошибки.

Можно попробовать глобально установить windows-build-tools. windows-build-tools — это пакет npm, который позволяет одним щелчком мыши установить необходимые компоненты для компиляции: Python 2.7, Visual Studio и C++ Build Tools. Обе установки не конфликтуют друг с другом, то есть они не влияют на существующие установки Visual Studio, C++ Build Tools или Python.

Если установка модуля Sass завершается неудачно, можно установить его отдельно.

Лицензия

MIT

Группы общения

WeChat	DingTalk
Рекомендуется присоединиться к группе WeChat	Если QR-код WeChat выше истёк, нажмите здесь, чтобы увидеть последний QR-код и добавьте примечание «Код хороший», тогда я приглашу вас в групповой чат

Поддержите нас

Вы можете поддержать нас, заказав нам чашку кофе