In addition to providing users with simple and convenient operation mode, visual platform also needs to provide rich component support and component expansion, so as to meet the business requirements of more users.

In the early days of H5-Dooring, the main consideration was user convenience, that is, to minimize user operation costs. Therefore, intelligent layout, namely the library of React-Grid-Layout, was adopted. Before that, completely free layout was considered. A set of free layout scheme (using React-Draggable and React-Resizable) was also implemented, but the design philosophy of advocating less is more was still firmly followed by intelligent layout.

I’ll show you how to customize your own components in the H5 page editor and how to develop components that make the H5 more presentable: maps and calendars.

If you are interested in the implementation of visual drag and drop platform, you can refer to my previous article and Github. More technical implementation of Lowcode and NOcode and analysis of domestic and foreign solutions will be updated later.

Demonstration effect


A process for implementing custom component development

As front-end engineers, we are not unfamiliar with developing vUE components or React components. For a scalable reusable component, we only need to do the following:

  • semantic: Component names are readable, such asantd.elementComponent style of
  • Reuse – Release equivalence principle (REP) : All classes in a component are either reusable or not
  • The principle of common reuse (CRP): All classes in a component should be reused together, and if you reuse one class in a component, you should reuse all classes in the component
  • Common Closure Principle (CCP): All classes of a component are collectively closed to change of the same nature without affecting the outside, that is, closed to modification, but open to extension
  • The Stable Abstraction Principle (SAP): A component should be as abstract as it is stable

Almost any component design follows these principles to a greater or lesser extent, so we often need to consider internal and external abstractions when implementing custom components.

We defineDooringThe following steps are taken when customizing components:

Component shapes are the exposed properties and methods of components to implement user-level configuration, that is, the props of vUE/React components. Since the project is written in typescript, we need to define the corresponding TS type to achieve robustness and traceability of components. Finally, we define the init Shape of the component, and then we implement the component. The advantage of this step is that we can define the boundary of the component, which naturally fits the component design principles described above.

The above process will produce the following three files:

  • Componet component implementation code
  • schemaThe component’sshapeandtype
  • Type mapping template for the template component

Develop a calendar component

Let’s implement the drag-and-drop platform calendar component. Calendar Component We took zARM’s Calendar component directly and packaged it as a controlled component of Dooring.

For the calendar component, we can expose the following props to the user for self-configuration:

  • Time Indicates the time displayed in the calendar
  • Range Indicates the time range in which the calendar is selected. It is used for schedule management
  • Color Calendar default text color
  • SelectedColor Specifies the color of the selected region
  • Round the rounded corners of the calendar

The correspondingviewAs follows:

Since the implementation of the component only needs to process the data passed in, here’s a simple code implementation:

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;
Copy the code

This is a basic prototype of the Dooring component, followed by the Schema section. This section contains the component’s Shape type definition and basic editable properties as follows:

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: 'Calendar time'.type: 'Text'.placeholder: 'Format such as 2020-01 or 2020-11'
    },
    {
      key: 'range'.name: 'Calendar selection range'.type: 'Text'.placeholder: 'Format 01-12(number to number)'
    },
    {
      key: 'color'.name: 'Text color'.type: 'Color'
    },
    {
      key: 'selectedColor'.name: 'Select color'.type: 'Color'
    },
    {
      key: 'round'.name: 'rounded'.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;
Copy the code

If we want to add attributes, we simply add the corresponding attributes and types to the file.

Template defines the partition and initial height of the component as follows:

const template = {
  type: 'Calendar'.h: 185.displayName: 'Calendar Component'};export default template;
Copy the code

With these three parts, we can render a drag-and-drop, editable component on the canvas. Of course, this part also needs the help of FormRender, which I will introduce later.

Now that’s basically a drag-and-drop and configurable calendar component, let’s move on to the map component.

Developing map components

With the above component development experience we develop map component is very convenient. We use @uiw/ react-Baidu-map, which is the React version of Baidu Map. You can also use Audeamap.

Because the react-Bidu-map component needs to read the corresponding documentation in advance, I won’t introduce it here. Let’s see how to implement it.

Also, we need to define props for the map to be exposed to the outside world. Here, I simply define several configurable properties:

  • Ak Baidu map using credentials, we suggest you in the production environment to replace their own
  • Location Latitude and longitude of a location, convenient for quick location
  • Position The name of the location, which we can customize

The diagram below:

The basic code implementation is as follows:

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;
Copy the code

The last

At present, the h5-Dooring visual platform is still being updated. The main updates are as follows:

  • List component adds search capability
  • Icon component adds link interaction, custom text, text color, text size configuration
  • The chart component supports custom third-party APIS for one-click import of third-party data sources

(H5 editor) H5 – Dooring | building block structures, H5 page

Phase to recommend

13+ FaQs and solutions encountered in the Recovery Node project

How to build building blocks to quickly develop H5 pages?

Handlift an online CSS triangle generator

Front-end efficient development of the necessary JS library comb

Think it works? Like to collect, by the way point like it, your support is my biggest encouragement! Wechat search “interesting talk front-end”, found more interesting H5 games, Webpack, Node, gulp, CSS3, javascript, nodeJS, Canvas data visualization and other front-end knowledge and actual combat.