Схема выбора компонентов карты и компонентов календаря платформы визуального построения

JavaScript визуализация данных

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

существуетH5-dooringОсновными соображениями на начальном этапе создания являются:Удобство пользователя, то есть минимизировать эксплуатационные расходы пользователя, поэтому использованиеУмный макет, то есть,react-grid-layoutЭта библиотека была рассмотрена полностью доСвободная планировка, также реализует набор схем свободной компоновки (используяreact-draggableа такжеReact-Resizable), но отстаиваяless is moreфилософия дизайна, или иди твердоУмный макетпуть.

Далее автор расскажет, какРедактор страниц H5В индивидуальной разработке ваших собственных компонентов и как разрабатывать компоненты, которые могут сделать H5 более выразительным:картаа такжеКомпонент календаря.

Если вас интересует реализация платформы визуального перетаскивания, вы можете обратиться к моим предыдущим статьям иgithub, Подробнее будет обновлено позжеlowcodeа такжеnocodeТехническая реализация и анализ отечественной и зарубежной программы.

Демонстрационный эффект

Процесс реализации разработки пользовательских компонентов

Как фронтенд-инженеры, мыvueкомпонент илиreactКомпоненты не должны быть незнакомыми.Для расширяемого и многократно используемого компонента нам нужно сделать только следующее:

  • Семантический: имена компонентов легко читаются, напримерantd, elementСтиль компонента
  • Принцип эквивалентности повторного использования-выпуска (REP): классы в компоненте либо все повторно используемые, либо ни один из них не может быть повторно использован.
  • Общий принцип повторного использования (CRP): все классы в компоненте должны использоваться повторно вместе, если класс в компоненте используется повторно, все классы в компоненте должны использоваться повторно.
  • Общий принцип закрытия (CCP): Все классы компонента совместно закрыты для изменений одного характера, и не будут затрагивать снаружи, то есть закрыты для модификации, но должны быть открыты для расширения
  • Принцип стабильной абстракции (SAP): Уровень абстракции компонента должен соответствовать его уровню стабильности.

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

мы определяемDooringПри создании пользовательского компонента он будет разделен на следующие этапы:

компонентshapeВ основном это свойства и методы, предоставляемые компонентом, которые могут реализовать конфигурацию на уровне пользователя, то естьvue/reactкомпонентprops, поскольку в проекте используетсяtypescriptписать, поэтому нам нужно определить соответствующийtsТип, чтобы обеспечить надежность и отслеживаемость компонента Наконец, мы определим, как выглядит инициализация компонента (init shape), а затем реализовать компонент.Преимущество этого шага в том, что мы можем определить границы компонента, что естественно соответствует принципам проектирования компонентов, упомянутым автором выше.

Вышеупомянутый процесс создаст следующие три файла:

  • componetкод реализации компонента
  • schemaкомпонентshapeа такжеtype
  • templateШаблоны Typemap для компонентов

разработать компонент календаря

Далее мы реализуем платформу перетаскивания.Компонент календаря, Компонент календаря, который мы используем напрямуюzarmизCalendarкомпоненты, инкапсулированные какdooringУправляемый компонент .

Для компонента календаря мы можем предоставить пользователю следующие реквизиты для настройки:

  • timeВремя, указанное в календаре
  • rangeВыбранный временной диапазон календаря, в основном используемый для управления расписанием
  • colorЦвет текста календаря по умолчанию
  • selectedColorцвет выделенной области
  • roundзакругленные углы календаря

соответствующийviewследующим образом:

Поскольку реализация компонента требует только обработки переданных данных, здесь мы рассмотрим простую реализацию кода:

import React, { useState, memo, useEffect, useRef } from 'react';
import { Calendar } from 'zarm';
import styles from './index.less';
import { ICalendarConfig } from './schema';

const CalendarCp = memo((props: ICalendarConfig & { isTpl: boolean }) => {
  const { time, range, color, selectedColor, round, isTpl } = props;
  // ...
  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 CalendarCp;

ЭтоdooringБазовый прототип компонента, давайте посмотримschemaЧасть. Эта часть в основном содержитshapeОпределение типа и основные редактируемые свойства (редактируемые) , следующие:

export type TCalendarEditData = Array<INumberConfigType | ITextConfigType | IColorConfigType>;
export interface ICalendarConfig {
  time: TTextDefaultType;
  range: TTextDefaultType;
  color: TTextDefaultType;
  selectedColor: TTextDefaultType;
  round: TNumberDefaultType;
}

export interface ICalendarSchema {
  editData: TCalendarEditData;
  config: ICalendarConfig;
}

const Calendar: ICalendarSchema = {
  editData: [
    {
      key: 'time',
      name: '日历时间',
      type: 'Text',
      placeholder: '格式如2020-01或2020-11'
    },
    {
      key: 'range',
      name: '日历选中范围',
      type: 'Text',
      placeholder: '格式如01-12(几号到几号)'
    },
    {
      key: 'color',
      name: '文本颜色',
      type: 'Color'
    },
    {
      key: 'selectedColor',
      name: '选中颜色',
      type: 'Color'
    },
    {
      key: 'round',
      name: '圆角',
      type: 'Number'
    },
  ],
  config: {
    time: '2020-12',
    range: '05-08',
    color: 'rgba(0,0,0,1)',
    selectedColor: 'rgba(22,40,212,1)',
    round: 0
  },
};

export default Calendar;

Если мы хотим добавить свойства, нам нужно только добавить соответствующие свойства и типы в этот файл.

templateВ основном он определяет раздел и начальную высоту компонента. Код выглядит следующим образом:

const template = {
  type: 'Calendar',
  h: 185,
  displayName: '日历组件',
};
export default template;

С помощью трех вышеперечисленных частей мы можем визуализировать компонент, который можно перетаскивать и редактировать на холсте.Конечно, эта часть также нуждаетсяFormRenderПомощь этой статьи будет представлена ​​позже автором.

Вышеупомянутое в основном реализует перетаскиваемый и настраиваемый компонент календаря.Давайте продолжим рассмотрение компонента карты.

Разработка компонентов карты

Имея вышеуказанный опыт разработки компонентов, нам очень удобно разрабатывать компоненты карты.Мы используем компоненты карты здесь@uiw/react-baidu-map, то есть Baidu MapsReactверсия, вы также можете использовать карту Gaode.

потому что компонент картыreact-baidu-mapВам нужно заранее прочитать соответствующие документы, автор не будет вводить их здесь по одному, давайте посмотрим, как их реализовать непосредственно.

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

  • akКарта Baidu использует сертификат, рекомендуется заменить его на свой в производственной среде.
  • locationШирота и долгота местоположения, что удобно для быстрого позиционирования
  • positionИмя этого места, мы можем настроить настройки

Как показано ниже:

Базовая реализация кода выглядит следующим образом:

import React, { memo } from 'react';
import { Map, Marker, Label, APILoader } from '@uiw/react-baidu-map';
import styles from './index.less';
import { IMapConfig } from './schema';

const Mapcomponent = memo((props: IMapConfig) => {
  const { ak, location, position } = props;
  return (
        <div className={styles.mapWrap}>
          <APILoader akay={ak}>
            <Map widget={['NavigationControl']} zoom={13}>
              <Marker animation={2} position={{ lng: position[0], lat: position[1] }} />
              <Label 
                content={location} 
                position={{ lng: position[0], lat: position[1] }} 
                style={{color: '#000', borderColor: '#06c', padding: '3px 10px', borderRadius: '6px'}} 
              />
            </Map>
          </APILoader>
        </div>
      )
});

export default Mapcomponent;

наконец

В настоящее времяH5-DooringПлатформа визуального построения все еще обновляется, основные обновления следующие:

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

(Редактор H5) H5-Dooring | Создание страниц H5 в строительных блоках

Рекомендовано в прошлом

13+ распространенных проблем и решений, возникающих при рассмотрении проектов узлов

Как быстро разработать страницы H5 со строительными блоками?

Онлайн-генератор треугольников css вручную

js, необходимая для эффективной фронтенд-разработки

найти его полезным? Добавьте в избранное, если вам это нравится, и, кстати, поставьте лайк Ваша поддержка - моя самая большая поддержка! Найдите «Интересный интерфейс» на WeChat и найдите больше интересных знаний о интерфейсе и реальных сражениях с играми H5, webpack, node, gulp, css3, javascript, nodeJS, визуализацией данных на холсте и т. д.

Категории