Welcome to H5-Dooring 👋

让H5制作像搭积木一样简单!

Welcome to H5-Dooring 👋

H5-Dooring是一款功能强大，专业可靠的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主，后台采用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

📦 doc(文档) H5-Dooring Document

视频教程 | Video tutorial

相关产品: V6.Dooring | 大屏可视化编辑器

Author

👤 徐小夕

Website: http://h5.dooring.cn
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://h5.dooring.cn/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 主流的react应用状态管理工具，基于redux
less css预编译语言，轻松编写结构化分明的css
umi 基于react的前端集成解决方案
antd 地球人都知道的react组件库
axios 强大的前端请求库
react-dnd 基于react的拖拽组件解决方案，具有优秀的设计哲学
qrcode.react 基于react的二维码生成插件
zarm 基于react的移动端ui库，轻松实现美观的H5应用
koa 基于nodejs的上一代开发框架，轻松实现基于nodejs的后端开发
@koa/router 基于koa2的服务端路由中间件
ramda 优秀的函数式js工具库

预览功能 | Preview features

预览功能这块比较简单, 我们只需要将用户生成的json数据丢进H5渲染器中即可, 这里我们需要做一个渲染页面单独用来预览组件. 先来看看几个预览效果:

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

具体代码可以参考笔者的另一篇全栈开发文章

基于nodeJS从0到1实现一个CMS全栈项目

模式基本一致.

wiki(参考文档)

已完成功能 | The functionality is complete

组件库拖拽和显示 | Component library drag and display
组件库动态编辑 | Component library dynamic editing
H5页面预览功能 | H5 page preview feature
保存H5页面配置文件 | Save the H5 page profile
保存为模版 | Save as a template
移动端跨端适配 | Mobile cross-end fit
媒体组件 | The media component
在线下载网站代码功能 | Download the website code feature online
添加typescript支持 | Add typescript support
表单设计器/自定义表单组件 | Form designer/custom form components
可视化组件Chart实现 | Visual component Chart implementation
在线编程模块(Mini Web IDE) | Online programming module
新增图表组件面积图，折线图，饼图 | Added chart component area chart, line chart, pie chart
添加图片库,支持用户在线选择图片素材 | Add a picture library to allow users to select picture footage online
升级图片组件为图文组件 | Upgrade the picture component to the picture component
添加模版库 | Add a template library
添加可视化组件(基于g2)如折线图, 饼图, 面积图等 | Add visualization components (based on g2) such as line charts, pie charts, area charts, etc
form组件文本框字段修改 | The form component text box field is modified
清空按钮添加确认框 | Empty the button to add a confirmation box
表单组件中添加展示型文本,用来对字段说明 | Add presentation text to the form component to describe the field
支持组件复制, 右键删除 | Support for component replication, right-click deletion

正在完成功能 | 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 ?

可以将压缩包解压直接放到服务器根目录, 访问根目录地址即可
vscode安装Live 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:

yarn dev
or
cnpm run dev

前提是先安装http-server模块.

Partner project

更新日志 | Update the log

添加在线编程模块（在执行代码前先启动node服务 npm run server）
添加客服机器人模块chatbot-antd
添加数据可视化模块
添加表单定制模块

持续升级 | Continuous upgrades

正在升级1.5版本，敬请期待...

赞助 | Sponsored

开源不易, 有了您的赞助, 我们会做的更好~

技术反馈和交流群 | Technical feedback and communication

微信：beautifulFront

Name		Name	Last commit message	Last commit date
Latest commit History 337 Commits
.github		.github
.vscode		.vscode
doc-dist		doc-dist
doc		doc
public		public
src		src
website		website
.DS_Store		.DS_Store
.editorconfig		.editorconfig
.eslintrc		.eslintrc
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc		.prettierrc
.umirc.ts		.umirc.ts
Dockerfile		Dockerfile
LICENSE		LICENSE
SECURITY.md		SECURITY.md
code.png		code.png
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md
server.js		server.js
tsconfig.json		tsconfig.json
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Welcome to H5-Dooring 👋

🏠 Homepage

✨ Demo

📦 doc(文档) H5-Dooring Document

视频教程 | Video tutorial

Author

声明

🤝 Contributing

Show your support

⭐️ dooring-sdk使用

1. 如何引用js-sdk | How to use js-sdk

2. 自定义选项 | Custom options

技术栈 | The technology stack

预览功能 | Preview features

实现在线下载功能 | Enable online download

后端部分 | The back-end section

wiki(参考文档)

已完成功能 | The functionality is complete

正在完成功能 | The functionality is being completed

Install(安装)

Usage

How to run the downloaded code ?

Partner project

更新日志 | Update the log

持续升级 | Continuous upgrades

赞助 | Sponsored

技术反馈和交流群 | Technical feedback and communication

About

Releases

Packages

Languages

License

Super-Pig/h5-Dooring

Folders and files

Latest commit

History

Repository files navigation

Welcome to H5-Dooring 👋

🏠 Homepage

✨ Demo

📦 doc(文档) H5-Dooring Document

视频教程 | Video tutorial

Author

声明

🤝 Contributing

Show your support

⭐️ dooring-sdk使用

1. 如何引用js-sdk | How to use js-sdk

2. 自定义选项 | Custom options

技术栈 | The technology stack

预览功能 | Preview features

实现在线下载功能 | Enable online download

后端部分 | The back-end section

wiki(参考文档)

已完成功能 | The functionality is complete

正在完成功能 | The functionality is being completed

Install(安装)

Usage

How to run the downloaded code ?

Partner project

更新日志 | Update the log

持续升级 | Continuous upgrades

赞助 | Sponsored

技术反馈和交流群 | Technical feedback and communication

About

Resources

License

Security policy

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages