Introduction to the

  • The demo address
  • Github:github.com/lx544690189…

Technology stack

  • The react, antd
  • Debugging package tools: umijs, parcel
  • Form schema: form-render
  • Iframe communication: postmate
  • Back-end: MidwayJs2, MongoDB

Component drag and drop:

Component configuration functions:

For visual scaffolding, see this article: Page visual scaffolding tools past and present.

1. Target group

For developers and ordinary users, quickly generate H5 pages. Sometimes low code is more productive than no code at all, away from copy-and-paste component reuse. For the operation personnel can quickly build a marketing page, for the development can be convenient to add, combine components, combined with a small amount of code to reuse the previous components.

2. Accurately restore the design draft

Most of the H5 pages built are based on PX units, and most of them are for ordinary users without paying attention to pixel restoration. If the design is 750px in width and rem or VW is used, the page will be displayed consistently under different resolutions. Here the minimum granularity of our component is block, and the developer restores the component from the draft and exposes configurable items such as colors, backgrounds, and copywriting for non-developers to configure. It also provides some basic components: images, rich text, video, etc., as well as the ability to build a simple page without design.

3. Friendly component development experience

While most open source visualization projects focus on the user experience, the Materials development section gives a passing mention. If you’ve used storybook, the following component development section is very similar to this one, eliminating the need to write props to form mapping code and allowing you to drag and drop. Of course Storebook was designed to be easy to write, organize, and test components, and some of the ideas in the project were borrowed from Storebook.

4. Volume and version control of output pages

Reaching the online standard rather than the demo phase involves thinking about things like “how the published page will handle dependent components after component updates.” At present, version control has not been implemented, mainly considering several implementation methods:

  • For each page generated, build files are generated separately for each project, with ci triggering the build of the H5 base, and subsequent component updates and published pages are not affected.
  • After each component revision, type a version number and save it in the database, and publish it to the static resource server. Components used on the corresponding page are pulled according to the version number, which is similar to the concept of NPM package version
  • Completely breaking up the component parts, sending packages according to the NPM version, and installing the corresponding component libraries on the H5 base is too complicated for development.

The main technical points

Layout mode: Top-down layout

There is also usually an absolute placement layout that is flexible but not conducive to composition and extension of components. The smallest component unit here is a block-level element that occupies a row, and you can add components on or below it, adjust the order, and arrange and combine them into larger components.

Canvas: Use iframe

Component units that use VW are destined to use only iframe. Fortunately, element drag and drop events can cross iframes, and iframes don’t need to sandbox variables and styles to avoid contamination, especially in multi-person projects like building pages.

Iframe communication can be achieved through PostMessage. A library postmate is recommended to facilitate the use of asynchronous promises to deliver messages and method calls.

Technical point

How do you develop and use a component that logs in to collect coupons

1. Create a component in the corresponding category, and the system assigns an ID to identify the component

2. Create components in the local H5lib directory and export them

Here the CSS is restored as the 750px design

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

export default function(props:any) {
  // Write components normally, here we accept 3 configurable properties
  const {mainColor, fontColor, imgUrl} = props;
  return (
    <div className={style.loginContainer}>
      <img className={style.img} src={imgUrl}/>
      <div className={style.formItem}>
        <div className={style.lable}>Mobile phone no.</div>
        <input className={style.input1} placeholder="Please enter your mobile phone number."/>
      </div>
      <div className={style.formItem}>
        <div className={style.lable}>Verification code</div>
        <input className={style.input2} placeholder="SMS verification code"/>
        <button className={style.codeBtn} type="button" style={{backgroundColor: mainColor.color: fontColor}} >Obtaining verification code</button>
      </div>
      <button
        className={style.submit}
        type="button"
        style={{backgroundColor: mainColor.color: fontColor}}
      >Immediately to receive</button>
    </div>
  );
}
Copy the code
// Use the just-assigned ID as the key when exporting, and use the import() syntax to facilitate asynchronous loading of subsequent components
export default {
  '6045ca8adf8e607d29d0bffb': import('.. /h5Lib/business/LoginCoupon'),};Copy the code

3. Drag the configuration component initial value

In the previous step, the component accepts three props: mainColor, fontColor, imgUrl, and can directly drag and drop the color picker and image upload control to generate the form item.

The form part is implemented with form-render, which generates a schema describing the form items:

If you compare this step to StoreBook, you write the knobs part of the mapping code by hand

4. Now you can happily drag and drop to generate a complete page

5. The mobile phone accesses the generated page

Previews of components and pages, automatically generated by HTML2Canvas.

A built page can also be set as a template, using the template can quickly generate similar structure of the marketing page:

Qr code scanning experience on mobile phone:

As you can see in Chrome, components are loaded asynchronously, so you don’t have to worry about slow loading due to component library expansion. The login component needs to accurately restore the design draft, using VW units.

// Asynchronous loading component example (first packaged as an asynchronous component, this project uses parcel with import() syntax) :
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(` components:${component._id}Load failed '); }}); tasks.push(load); }); });try {
    const loadedComponents = Promise.all(tasks);
    return loadedComponents;
  } catch (error) {
    throwerror; }};Copy the code

The project structure

The project is divided into two parts: H5 building and H5 base.

Some good libraries have been tried in the project (the code can be confusing) :

  • Forms solution for complex scenes in the background: Formily
  • State management for React Hooks: unstated

At present, some functions are still under development, and the back-end project is not open source. Add a star if you feel good about it and focus on subsequent iterations. Github.com/lx544690189…

H5 build:

  • Use umi for dev and build
  • Responsible for component development, management, drag and drop, page generation projects
  • .umirc.tsPxToViewPort is configured inh5libPx to VW (750px design draft)
  • The H5 canvas (IFrame) for page design is not implemented by the following “H5 pedestal “. They do most of the same things, but one is for development and design and the other is for production. There are functional and functional differences, so separate.

dev

npm run dev:design
Copy the code

build

npm run build:design
Copy the code

H5 base:

  • Dev and build use ParcelJS
  • Responsible for the final page rendering
  • Dynamically loading components
  • TODO: You can type the JSON schema of the page directlyindex.htmlOr to CDN, shorten the first screen rendering time

dev

npm run dev:mobile
Copy the code

build

npm run build:mobile
Copy the code

Looking forward to

Although the react project is written using react, only the react component is supported. In theory, there is no language or framework limit in the process of “schema -> components”. Vue and small programs can support it, just need to replace the middle layer of “schema -> Components” on the H5 canvas.