The term “H5” in this article refers to “an interactive, lightweight website based on mobile transmission (not limited to video playback, page sliding, erasing, in-page animation, form collection, etc.)”. Equivalent to PPT on wechat, mainly used as a carrier for brand communication and promotion – excerpted from a geekish H5 page making tool

What is luban H5?

  1. Is based on Vue2.0 development, through the form of drag, generate page tools, similar to yiqixiu, baidu H5 and other tools
  2. Github address: github.com/ly525/luban… , welcome to pay attention and exchange!

Some screenshots

Dynamic figure

Editor module

List of works

Basic data statistics (PV and UV statistics unfinished)

The form of statistical

The purpose of the tool

  1. My own work: I spend most of my time on ToB side projects, which is generally considered as various management background and so on, which is true.
  2. Three years of experience: in the three years of work in the front-end, in the previous two years, there is no product manager, interaction designer, UI designers, most of the time are the boss said, demand, and back-end their colleagues to discuss, learn from the operation, the back-end to understand business, online, online, there are not appropriate, modify again. In the third year, when I had a product manager, there was no big difference in the process. Because I didn’t have contact with interaction designers, the product students had some requirements that they didn’t take into account at the beginning. After we made a version, we found that we had to change back to interaction on another platform, which was a bit painful.
  3. Some lingering thoughts
  4. Can do a management was generated according to JSON or drag and drop the thing of the background, in this case, have this kind of demand, we can quickly find out interaction with a prototype, let the product classmates to trial, or students themselves to make products to make a quickly out (some classmate say, why don’t have to do a axure, product 😄, Not really 😂)
  5. I can’t do it: When I was studying the drag-and-drop generation management background, I gradually found that the technical difficulty was slightly higher and my ability was not enough to support such a big architecture.
  6. Let’s shift the idea to the mobile terminal: I thought: If there is a simple demand for mobile terminal in the future, we can let the product or designer to drag and drag to generate. If there are complex requirements, technical students can provide support, and even script programming can be considered. In this way, we can directly supplement business logic on the basis of product or designer students’ work (we have studied later and found it is feasible, we can communicate with those who are interested).
  7. Up to now, I have studied in my spare time (I have found many demos on GitHub and consulted many excellent students on the Internet, which will be mentioned at the end) and found that the technology is indeed feasible. After two or three months of research, reading materials, and about two months of coding. Finally, there is a small project that can be taken care of, which is mentioned in the title: [Luban H5], an H5 development tool with open source front and back ends, which can be understood as the open source version of Yiqixiu or Renrenxiu.

Related addresses and links:

  1. GitHub address: github.com/ly525/luban…

  2. Both the front end and back end are open source. For more details and details, please read GitHub’s README. If anything is unclear, please open an issue

  3. For details on the technology stack and the steps for local development, see the README

    Technology stack (current) : front end: vue.js + back end: strapi.js (with admin background) + Storage: Sqlite (or Mysql)

  4. IO /luban-h5/

Luban H5 features list

The front end

  1. The editor

    • Reference line
    • Adsorption line, component alignment
    • Drag and drop to change the component shape
    • Element: Copy (canvas)
    • Element: Delete (canvas)
    • Element: Edit (Canvas)
    • Page: New
    • Page: Copy
    • Page: Delete
    • Quick preview
    • Undo, redo

  2. Component system

    • The text
    • Ordinary button
    • A form button
    • Form input field
    • Ordinary images
    • background
    • Video (Iframe format)

  3. enhancements

    • Upload PSD and convert it to H5 with one click (it has been investigated and can be realized)
    • The gallery
    • Third party image search without copyright
    • Custom scripts (already investigated, can be implemented)
    • Animation (already investigated, can be implemented)

The back-end

- [X] Create, save and update works - [X] Form data Collection - [X] Form data Display - [X] Online preview - [x] TWO-DIMENSIONAL code preview - [] PV, UV statistics (already investigated, can be implemented)Copy the code

Local development

See Readme for local development

At present, it is still in constant iteration. If you have any suggestions and suggestions, you can join dingdinggroup, QQ group (wechat group has two-dimensional code problems will not be put) and I feedback and communication. Of course, making an issue on GitHub is also welcome

Communication group

Because the wechat group QR code will expire, so the wechat group and QQ group qr code please go to view Luban-H5 wechat group and QQ group view

Nailing discussion Group (recommended, relatively friendly to code layout)