Визуальный строительный проект H5 lowcode

React.js
Визуальный строительный проект H5 lowcode

Введение

стек технологий

  • реагировать и тд
  • Инструменты отладки упаковки:umijs,parcel
  • Схема формы:form-render
  • iframe-связь:postmate
  • задняя часть:midwayjs2, МонгоДБ

Функция перетаскивания компонентов:

Особенности конфигурации компонента:

Для визуального построения вы можете прочитать эту статью:Инструменты построения визуализации страниц в прошлом и настоящем.

1. Целевая группа

Для разработчиков и обычных пользователей быстро сгенерируйте страницы H5. Иногда low-code более продуктивен, чем no-code, отходя от повторного использования компонентов «копировать-вставить». Для операторов они могут быстро создать маркетинговую страницу, а для разработчиков они могут легко добавлять и комбинировать компоненты, а также комбинировать небольшой объем кода для повторного использования предыдущих компонентов.

2. Точно восстановить проект дизайна

Большинство построенных страниц H5 имеют единицы px, и большинство из них — обычные пользователи, которые не обращают внимания на восстановление пикселей. Если согласно текущей схеме адаптации популярного мобильного терминала H5 ширина эскиза дизайна составляет 750px, и используются единицы измерения rem или vw, страница будет отображаться одинаково на экране каждого разрешения. Здесь наименьшая степень детализации наших компонентов — это блок.Разработчики восстанавливают компоненты в соответствии с черновиком дизайна и предоставляют настраиваемые элементы, такие как цвет, фон и копирайтинг, которые могут настраивать не разработчики. В то же время он также предоставляет некоторые основные компоненты: изображения, форматированный текст, видеоэкраны и т. д., а также поддерживает создание простой страницы без дизайна.

3. Дружественный опыт разработки компонентов

Большинство проектов визуализации с открытым исходным кодом сосредоточены на пользовательском опыте, а часть разработки материалов игнорируется. если вы использовалиstorybook, вы почувствуете, что следующая часть разработки компонента очень похожа на нее, и даже избавляет от необходимости писать код сопоставления между реквизитами и формами, вы можете напрямую перетаскивать их для создания. Конечно, storebook предназначен для облегчения написания, организации и тестирования компонентов, и некоторые идеи в проекте также позаимствованы из storebook.

4. Объем страницы вывода, контроль версий

Достижение онлайн-стандарта, а не демонстрационного этапа, требует рассмотрения, например, «как обрабатывать зависимые компоненты на опубликованной странице после обновления компонента». В настоящее время контроль версий не реализован, и в основном рассматриваются несколько способов реализации:

  • Каждый раз, когда создается страница в сочетании с ci для запуска сборки базы H5, файлы сборки генерируются для каждого проекта отдельно, и последующие обновления компонентов и опубликованные страницы не будут затронуты.
  • После каждого пересмотра выпуска компонента он отмечен номером версии и сохраняется в базе данных и опубликована на статический ресурсный сервер. Компоненты, используемые на соответствующей странице, вытягиваются в соответствии с номером версии, что похоже на концепцию Версия пакета NPM.
  • Полностью разделить составные части, выпустить пакеты согласно версии npm и установить библиотеку компонентов соответствующей версии на базе H5, но этот метод слишком сложен для разработки.

Технические моменты

Режим макета: расположение сверху вниз

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

Холст: используйте iframe

Если модуль компонента использует vw, он предназначен только для использования iframe. К счастью, события перетаскивания элементов могут пересекать фреймы, а фреймам не нужно учитывать механизм песочницы, чтобы избежать загрязнения переменных и стилей, особенно для проектов с участием нескольких человек, таких как создание страниц.

Связь между IFRAME может быть реализована с помощью PostMessage, здесь рекомендуется библиотекаpostmate, который может легко использовать асинхронные промисы для доставки сообщений и вызовов методов.

технический пункт

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

1. Создайте компонент в соответствующей категории, система присвоит идентификатор для идентификации этого компонента.

2. Создайте компонент в локальном каталоге h5lib и экспортируйте его.

Здесь css восстанавливается согласно проекту дизайна 750px.

import React from 'react';
import style from './index.less';

export default function(props:any) {
  //正常编写组件，这里我们接受3个可配属性
  const {mainColor, fontColor, imgUrl} = props;
  return (
    <div className={style.loginContainer}>
      <img className={style.img} src={imgUrl}/>
      <div className={style.formItem}>
        <div className={style.lable}>手机号</div>
        <input className={style.input1} placeholder="请输入手机号"/>
      </div>
      <div className={style.formItem}>
        <div className={style.lable}>验证码</div>
        <input className={style.input2} placeholder="短信验证码"/>
        <button className={style.codeBtn} type="button" style={{backgroundColor: mainColor, color: fontColor}}>获取验证码</button>
      </div>
      <button
        className={style.submit}
        type="button"
        style={{backgroundColor: mainColor, color: fontColor}}
      >立即领取</button>
    </div>
  );
}

// 导出时使用刚才分配的id作为key，并使用import()语法方便后续组件异步加载
export default {
  '6045ca8adf8e607d29d0bffb': import('../h5Lib/business/LoginCoupon'),
};

3. Перетащите начальное значение компонента конфигурации

На предыдущем шаге наш компонент принимает три реквизита: mainColor, fontColor, imgUrl.Вы можете напрямую перетаскивать селектор цвета и элемент управления загрузкой изображения для создания элементов формы.11.gif

Этой форме частично помогаетform-renderРеализация, которая в итоге сгенерирует схему, описывающую элемент формы:

151c6eb3-ec6d-4ce7-b3bb-1b16b17a54a6.png

Если этот шаг сравнить с книгой хранения, то он заключается в ручном написании кода частичного сопоставления ручек.

4. Затем вы можете с удовольствием перетащить, чтобы создать полную страницу.

12.gif

5. Мобильный телефон посещает сгенерированную страницу

Предварительный просмотр компонентов и страниц черезhtml2canvasГенерируется автоматически.

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

fc00dc9c-a434-4def-b2e9-41850e4c9cc8.png

Мобильный телефон сканирует QR-код:

下载.png下载 (1).png下载 (2).png

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

// 异步加载组件示例（首先得打包成异步组件，本项目使用parcel结合import()语法）:
const fetchComponents = async function(pageSchema:IPageSchem){
  const tasks:any[] = [];
  pageSchema.forEach((page)=>{
    page.components.forEach((component)=>{
      const load = new Promise(async(resolve, reject)=>{
        const asyncComponent = componentList[component._id];
        if(asyncComponent){
          const timeStemp = new Date().getTime();
          const loadedComponent = (await asyncComponent).default;
          resolve({
            _id: component._id,
            name: component.name,
            component: loadedComponent,
            takeUp: new Date().getTime() - timeStemp,
          });
        }else{
          reject(`组件: ${component._id}加载失败`);
        }
      });
      tasks.push(load);
    });
  });
  try {
    const loadedComponents = Promise.all(tasks);
    return loadedComponents;
  } catch (error) {
    throw error;
  }
};

Структура проекта

Проект разделен на два: H5 Construction, Pedestal H5.

Я также пытался использовать в проекте несколько хороших библиотек (некоторая путаница):

  • Формируйте решения для сложных фоновых сценариев:formily
  • Управление состоянием для React Hooks:unstated

В настоящее время некоторые функции все еще находятся в стадии разработки, а серверный проект еще не является открытым исходным кодом. Если вы считаете, что это хорошо, добавьте звезду и обратите внимание на последующие итерации.GitHub.com/контакт 544690189…

Сборка H5:

  • Разработка и сборка с использованием umi
  • Ответственный за разработку компонентов, управление, перетаскивание, проекты генерации страниц
  • .umirc.tspxToViewPort настраивается вh5libКаталог px to vw (черновик дизайна 750px)
  • Холст H5 (iframe) при оформлении страницы не реализуется "базой H5" ниже. Большинство из них имеют одинаковые функции, но один используется только на этапе разработки и дизайна, а другой используется в производственной среде . Существуют функциональные и функциональные различия, поэтому они разделены.

dev

npm run dev:design

build

npm run build:design

База H5:

  • Разработка и сборка используют парцеллы
  • Отвечает за окончательную отрисовку страницы
  • Динамически загружать компоненты
  • TODO: вы можете напрямую ввести json-схему страницы вindex.html, или выложите на cdn, чтобы сократить время рендеринга первого экрана

dev

npm run dev:mobile

build

npm run build:mobile

Перспектива

Хотя проект написан на React, он пока поддерживает только компоненты React.Теоретически, из процесса «схема -> компоненты» нет ограничений по языку и фреймворку, и его могут поддерживать как vue, так и небольшие программы, но нужно поставить "схема -> Компоненты" средний слой можно заменить.

Категории