Open Source Ecosystems

H5-DooringH5H5react nodejs

H5-Dooring is a powerful, open source, free H5 visual page configuration solution dedicated to providing a simple, convenient, professional and reliable, unlimited set of H5 landing page best practices. The technology stack is mainly react, developed in the background using nodejs.

Homepage

Demo

| Video tutorial

Author

Website: http://49.234.61.19/h5_visible
Github: @MrXujiang

Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page.

Show your support

Give a if this project helped you!

dooring-sdk

dooring, js-sdk, API. :

1. js-sdk | How to use js-sdk

js-sdk, script, :

<script src="http://49.234.61.19/dooring-sdk.js"></script>

script, :

(function(){var b=document.createElement("iframe");var d=Date.now();var a="http://49.234.61.19";b.src=a+"/h5_plus/editor?tid="+d+"&"+c(dooringOpts)+"&isOpen=1";console.log(c(dooringOpts));b.style.border="none";b.style.width="100vw";b.style.height="100vh";if(dooringOpts&&dooringOpts.iframeStyle){b.style.border=dooringOpts.iframeStyle.border||"none";b.style.width=dooringOpts.iframeStyle.width||"100vw";b.style.height=dooringOpts.iframeStyle.height||"100vh"}document.querySelector(dooringOpts.container||"body").appendChild(b);function c(g){var e=Object.assign({gallery:false,template:false,saveTemplate:true,save:true,downCode:true,isPhoneTest:false,helpPage:true,uploadApi:"",formApi:"",screenshotsApi:""},g.controls||{});var h="";for(var f in e){h+=f+"="+encodeURI(e[f])+"&"}return h.slice(0,h.length-1)}})();

2. | Custom options

var dooringOpts = {
    container: '',  // dom
    iframeStyle: {  // iframe
        width: '',
        height: '',
        border: ''
    },
    controls: {
      gallery: false,  // 
      template: false, // 
      saveTemplate: true,  // true/false,, , 
      save: true,  // true/false,, , 
      downCode: true, // true/false,, , 
      isPhoneTest: false,
      helpPage: true,   // false/true/
      uploadApi: '',  // api
      formApi: '',  // api
      screenshotsApi: ''  // api
    }
};

: , sdk, :

<script>
  var dooringOpts = {

  }
</script>
<script src="http://49.234.61.19/dooring-sdk.js"></script>

| The technology stack

React (react,vue,angular),
dva reactredux
less csscss
umi react
antd react
axios
react-dnd react
qrcode.react react
zarm reactuiH5
koa nodejsnodejs
@koa/router koa2
ramda js

| Preview features

, jsonH5, . :

The preview function is relatively simple, we just need to throw the user-generated jason data into the H5 renderer, here we need to make a rendering page for the preview components separately. Let's take a look at a few previews:

, ,.

| Enable online download

: file-saver, . :

var FileSaver = require('file-saver');
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

txt, Blob, , html? , .

| The back-end section

, , , , PHP, Java, Python****Egg. koa. :

| Save the template
| The data source store for the real machine preview
| User-related features
H5 | H5 map bed and static file hosting

nodeJS01CMS

wiki()

| The functionality is complete

H5
H5
typescript
/
Chart
(Mini Web IDE)
,
(g2), ,
form
,
,

| The functionality is being completed

Enrich component library components
Add configuration interaction
Component segmentation and code optimization
Unit tests

Install()

| Download the code

git clone https://github.com/MrXujiang/h5-Dooring.git

| Go to the project catalog

cd ./h5-Dooring

| Install the dependency package

yarn install
or
cnpm install

Usage

| Launch the app locally

yarn start
or
cnpm run start

How to run the downloaded code ?

,
vscodeLive Server, , vscode, Live Server, index.html, /

, bug, :

If you find that the local start-up component drag encountered strange errors, is a bug that should be a third-party component in the development environment, can be resolved in a way: