【推荐】jquery开发的大型web应用—H5编辑器工具

Gu_Yan 发布于2019-08-29 13:24 / 1626人阅读

H5编辑器介绍

H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面，界面如下

制作流程

注册 -> 登录 -> 新建H5 -> 编辑H5 （添加页面，添加图层，拖动设置参数） -> 预览/保存/发布 -> end

开源地址

https://gitee.com/676015863/H5DS

官方网址

http://www.h5ds.com

功能模块：

1、首页，登录，注册

2、新建H5，删除H5，修改H5

3、页面布局之四大模块（顶部，页面列表，图层列表，操作区域，视图区域，快捷菜单）

4、基本参数（主图，名字，描述，背景，翻页动画，背景音乐，加载动画）

5、上传图片，删除图片

6、新建页面（选择模板，新建空白模板）

7、设置页面参数（背景，锁定翻页，自动翻页，修改名称，复制，删除）

8、添加图片图层（选择图片，裁剪图片，设置坐标，拖动，旋转，缩放，透明度，圆角，阴影，边框）

9、给图层添加动画效果，动画列队，排序，删除，设置参数

10、添加触发交互效果

11、添加文本图层，设置文本

12、图层列表的操作，复制，删除，排序

13、快捷菜单

14、保存，发布，手机预览

技术选型

Jquery 2x：DOM和事件的操作，目前是无任何框架能及

ES6：这个不多说，很强大，自带模板引擎，语法简洁，支持类，继承，各种新的api，构建前端大型web应用的语言不是typescript 就选 ES6了

Webpack：当前流行的不要不要的，执行效率高（最初是gulp，后来效率太低，换成webpack了）~

git:代码管理，大家都在用，都说好，不多说~

Eslint：前端代码校验，结合vscode真的好用，不黑不吹~

Node + express: 因为对其他技术不熟，我只是个前端~

Mysql: 关系型数据库比较适合当前的业务逻辑，也利于后期的多语言开发

代码规范

JS规范：

1、命名规范：变量名均以驼峰命名

2、this 做为变量的时候，统一采用 self（优先），that

3、jquery对象命名统一采用 $** 命名（eg: $box）

4、其他遵循Eslint 规范

5、有详细的注释规范

CSS规范：

1、UI组件库，CSS class 名字以 mt-** 定义，避免和其他命名冲突

2、id统一使用驼峰命名

3、CSS归属命名规范： “.模块名-功能名“ 子模块继承父模块的CSS名字，再往后面加 “父模块 – 子模块名字“

文件夹命名规范：

1、文件夹统一采用驼峰命名

2、大模块/子模块/孙子模块

作者say:

该编辑器拥有强大的拓展性，CSS3动画，canvas特效，页面种类，图层类型，交互事件等均可以后期进行拓展，可以应付各种复杂的需求，所有交互数据均在本地做了缓存，保存操作对用户来说是无感知的，图片也做了本地缓存，大大节约了性能开销！

idc机房托管超融合服务器开发工具浏览器web应用 h5应用制作工具 h5开发android应用 jquery 开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112576.html

【推荐】jquery开发的大型web应用—H5编辑器工具

H5编辑器介绍 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面，界面如下 showImg(https://segmentfault.com/img/bVUC2L?w=1147&h=643); 制作流程注册 -> 登录 -> 新建H5 -> 编辑H5 （添加页面，添加图层，拖动设置参数） -> 预览/保存/...

keithyau 2019-08-21 16:21 评论0 收藏0
【推荐】jquery开发的大型web应用—H5编辑器工具

H5编辑器介绍 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面，界面如下 showImg(https://segmentfault.com/img/bVUC2L?w=1147&h=643); 制作流程注册 -> 登录 -> 新建H5 -> 编辑H5 （添加页面，添加图层，拖动设置参数） -> 预览/保存/...

1fe1se 2019-08-05 12:01 评论0 收藏0
react+mobx 构建H5制作工具项目经验总结

摘要：三性能优化处理做工具类的项目，性能是非常大的挑战，我总结了以下几个常见的性能优化点数据缓存。防抖，节流，事件委托内存释放。内容大纲： 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明一、项目功能介绍很久没写过技术类的文章了，这次给大家分享一个近期的项目，采用react+mobx+jquery构建的大型工具类项目。查看项目网址。如果用过易企秀，maka或者...

Ilikewhite 2019-08-05 14:22 评论0 收藏0
react+mobx 构建H5制作工具项目经验总结

摘要：三性能优化处理做工具类的项目，性能是非常大的挑战，我总结了以下几个常见的性能优化点数据缓存。防抖，节流，事件委托内存释放。内容大纲： 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明一、项目功能介绍很久没写过技术类的文章了，这次给大家分享一个近期的项目，采用react+mobx+jquery构建的大型工具类项目。查看项目网址。如果用过易企秀，maka或者...

用户84 2019-08-22 18:42 评论0 收藏0
react+mobx 构建H5制作工具项目经验总结

摘要：三性能优化处理做工具类的项目，性能是非常大的挑战，我总结了以下几个常见的性能优化点数据缓存。防抖，节流，事件委托内存释放。内容大纲： 1、功能介绍 2、技术架构 3、性能优化 4、细节分享 5、开源说明一、项目功能介绍很久没写过技术类的文章了，这次给大家分享一个近期的项目，采用react+mobx+jquery构建的大型工具类项目。查看项目网址。如果用过易企秀，maka或者...

Aceyclee 2019-08-30 15:54 评论0 收藏0