Two months ago, the open source H5 editor H5-Dooring has been successfully iterated to version 1.0. From the basic page generation framework at the beginning, it now supports richer component resources, interaction capabilities and data tracking capabilities. During the process, we have done a lot of design and iteration, and also received a lot of feedback and inspiration from netizens. We also have many like-minded friends joining us to make H5-Dooring better and more powerful, so we would like to share our latest version and feature implementation here.

designed

The main purpose of the author’s initial development of this project is to improve the cost and efficiency of H5 page development for individuals and enterprises. H5 applications suitable for different scenarios can be built by building blocks using existing component libraries or external component resources (under design), and one-click code download is supported. Make it easy for technicians to deploy H5 pages on their own servers. I’ve done a lot of small code generation applications before, but they were designed for programmers to write less code, not enough to be a real open source project, so I’m going to take H5-Dooring and make it a real worthwhile project.

The author will then introduce the latest version of the H5 editor function and implementation ideas, and how to achieve what you see is what you get scheme attempt.

Preview the latest version of the editor

Form Data Kanban and Data Analysis:

Technology stack

The technology stack and infrastructure used by H5-Dooring was previously introduced in my article, and those interested in implementing an H5 page visualization editor based on React+Koa are advised

Recently, we are using Nest to refactor the back-end part of the project, and we will introduce some technical solutions later. Here is a brief introduction to the technical stack of the project implementation:

  • Umi3.0 + DVA + ANTD4.0
  • React + React ecology
  • nest + mysql + redis
  • nginx + pm2

So this project is a full-stack project, and a lot of the core functionality depends on the agreed DSL layer, page rendering layer and back-end capabilities.

Function points and implementation schemes

My previous series of articles covered specific feature points and implementation solutions, but here we focus on the new features that are already available in version 1.0.

Added rich text component, calendar component, button interaction component, column component

Rich text componentWhat the author uses is domesticbraft, the preview is as follows:Because the project usesantd4.0Development, so the author specifically encapsulated a set of adaptationantd4.0Component’s rich text editor, supportedFormControlled patterns for components. You can be interestedgithubLearn how to do it.

The calendar componentAlso recently added, mainly to achieve a richerH5The page is displayed as follows:We can set the selected time range, the main color of the selected range, the date and so on. The date component is mainly used by the authorzarmtheCalendarComponent, the core is as follows:

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

const CalendarPlayer = memo((props: ICalendarConfig & { isTpl: boolean }) = > {
  const { time, range, color, selectedColor, round, isTpl } = props;
  const realRange = range.split(The '-');

  const [value, setValue] = useState<Date[] | undefined> ([new Date(`${time}-${realRange[0]}`), new Date(`${time}-${realRange[1]}`)]);
  const [min] = useState(new Date(`${time}- 01 `));
  const [max] = useState(new Date(`${time}- 31 `));
  const boxRef = useRef<any>(null);
  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 CalendarPlayer;
Copy the code

This is also a way to implement Dooring components, and interested people are welcome to add more rich component support for Dooring.

Before, a friend asked me why the project uses so many components in the previewH5 pageWhen the speed is still very fast, here I explain the specific implementation, as shown in the following figure:Therefore, the products and resources we rely on on the mobile end are very few, and the webpack layer and server layer are optimized, so the mobile end can access the H5 page very quickly. The author will introduce this optimization in detail later, and the performance part is still being optimized.

The author has also written articles about how to implement button interaction, custom interaction code and rich text popover interaction, etc. Interested in this article, you can refer to the core function design of low-code development platform — Component Custom interaction Implementation.

The author here shows the specific interaction mode:Interactive users who open the popover can customize the content in the popover as follows:The preview effect on the mobile terminal is as follows:For customizationcodeIn this section, I integrated the code editing librarycodemirror, so that we can customize the implementation of the interaction capability, as follows:

Next up is our column component, which is a business component based on business requirements, implemented in the same way as the base component, and you can experience it online.

Added the function of importing and exporting JSON files

The main reason for this feature is to facilitate collaborative designH5 pageFor example, if a person designs an H5 page and wants others to participate in the design, they can present itH5 pageExport toJSONAnother person can import the JSON file and render it exactly the same right awayH5 page“To make modifications or improvements. As follows:How to implement the downloadjson, the author also introduced in the previous article, we can usefile-saverThis third party module to do. Upload the parsingjsonWe can fully achieve their own, the author uses isUpload + FileReader APIThe core code is as follows:

const uploadprops = useMemo(() = > ({
    name: 'file'.showUploadList: false.beforeUpload(file, fileList) {
      // Parse and extract json data
      let reader = new FileReader();
      reader.onload = function(e) {
        let data = e.target.result;
        importTpl && importTpl(JSON.parse(data)) }; reader.readAsText(file); }}), []);Copy the code

Added the function of one-click screenshot and generating hd poster

This is mainly forH5 pageProvide a quick drawing scheme, convenient operation or technical personnel to do page effect evaluation, in the front end of the realization of the point of view we mainly usecanvasDom transformation is performed on the following principles:The author has previously shared the specific implementation scheme, please refer to the following article:

How to achieve the function of one-click screenshot in front?

Here I recommend two easy to usecanvasScreenshot tool,html2canvasanddom-to-image. DooringThe screenshot process of the page is as follows:

Added right-click menu and custom keyboard shortcut function

To further improve user setupH5 pageThe author added a right-click menu, which can easily copy the made components, but also can be deleted with one key, as follows:But for keyboarders who want to do everything with their keyboard, I’ve added keyboard shortcuts that support one-click copy, paste, and delete elements, as follows:Here are a few good libraries for right-clicking menus and keyboard shortcutsreact-contexify.keymaster.

Add Page Configuration

The main part of this is to give H5 pages more freedom to customize the page title,SEOKeywords, page background and background images, etc., as follows:More page customization capabilities will be added later.

Interface design optimization

andVersion 0.1A lot of tweaks and optimizations have been made to the interface, such as our login page:Preview page:

Support for SDK introduction

This is also a previous attempt by the author to letH5-DooringCan passsdkIs implanted into anywebSystem, and provides customized functions and displaysapi, mainly as follows:The principle of implementation has been previously introduced in the article, as follows:For those interested, please refer to the following article by the author:

How to quickly encapsulate your application as JS-SDK?

In the late planning

In the later stage, I will continue to enrich high-quality business components, refactor the design architecture of the existing code on Github, do a good job in layering views, data and logic, pull out the page renderer and form renderer, provide component opening capability, enhance the capability of background services, etc., welcome interested friends to put forward valuable suggestions and issues. Continue to iterate and optimize.

Github: github.com/MrXujiang/h…

Welcome to Fork and Star.

The last

Later will continue to open source author before writing 100+ code need not worry about tools and project actual combat, welcome to wechat search interesting talk front end, learn more fun, practical front end open source projects.