百度360必应搜狗淘宝本站头条
网站建设网页制作教程百度搜索推广苏州网站建设外贸网站建设
当前位置：网站首页 > SEO教程 > 正文

超优秀 H5可视化制作编辑器H5DS

gaoyangw 2024-11-24 15:12 8 浏览 0 评论

今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。

h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。

技术栈

  • 前端：React+Mobx+Less+jQuery
  • 后端：NodeJs+Ngnix+Mysql
  • 工具：Babel+Webpack+Gulp

项目模块架构

项目结构

安装

$ npm i h5ds -S

快速使用

import React, { Component } from 'react'
import H5dsEditor from 'h5ds/editor'
import 'h5ds/editor/style.css'

class Editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }
  
  /* 保存app */
  saveApp = async data => {
    console.log('saveApp ->', data);
  };
  
  /* 发布app*/
  publishApp = async data => {
    console.log('publishApp ->', data);
  };
  
  componentDidMount() {
    // 模拟异步加载，设置 defaultData 会默认加载一个初始化数据
    setTimeout(() => {
      this.setState({ data: 'defaultData' });
    }, 100);
  }
  
  /**
   * 使用编辑器
   */
  render() {
    const { data } = this.state;
    return (
      <H5dsEditor
        plugins={[]} // 第三方插件包
        data={data}
        options={{
          publishApp: this.publishApp,
          saveApp: this.saveApp, // 保存应用
          appId: 'test_app_id' // 当前appId
        }}
      />
    );
  }
}
export default Editor;

h5ds编辑器通过时间轴控制动画进度。

动画效果使用的是如下CSS3动画库。

https://animate.style/

通过简单拖拽操作，就可实现h5代码编辑功能。

确实是非常棒的一款类似易企秀、MAKA的H5制作编辑工具，大家不要错过哟~~

# 官网地址
https://www.h5ds.com/

# 仓库地址
https://github.com/h5ds/h5ds

ok，今天就分享到这里。如果大家有其它优秀的H5可视化编辑工具，欢迎交流讨论！

相关推荐

美国站群16C8C多a利于网站seo优化建站的优势

　站群服务器有什么优势?1、有丰富的IP资源站群服务器拥有丰富的IP资源，尤其是百度对于独享IP更为友好，并且网站内容也有利于收录，因此这也是可以更好的做站群优化，让网站排名更好。2、稳定性高它采用先...

如何布局资料，引导AI抓取信息以实现推荐和广告投放

通过布局文章和资料引导元宝、豆包、DeepSeek等AI工具抓取信息以实现推荐和广告投放，从技术逻辑和实际案例来看是可行的。以下是具体分析及实施方案：...

软文SEO作用

软文SEO，即搜索引擎优化软文，是指通过优化文章的内容、关键词布局等因素，使其更容易被搜索引擎收录并排名靠前的一种文章形式。龙新网编辑告诉您软文SEO的作用主要体现在以下几个方面：一、提升网站排名软文...

小微企业找外包做网络营销合适吗?

#小微企业找外包做网络营销合适吗?#小微企业找外包做网络营销，可以是一个合适的选择，但必须谨慎、策略清晰。以下是详细分析：...

做销售硬气一点，没必要舔客户

大家做生意卖产品，不管是国学老师也好，知识博主也罢，一律不要去跪舔客户。...

元器件电商客户运营04-潜在客户

在元器件电商领域，客户运营不仅需要关注现有客户，更要积极拓展潜在客户群体，这是企业获取新客户、实现增长的关键环节。本文将深入探讨元器件电商如何通过制造“羊毛”机会、持续广告刺激以及定期投入产出分析等策...

新版Google PMax广告指南免费领，仅限前50名!速来~

在过往较长的一段时期内，我投入了大量时间进行深入研究和测试，发现这种形式的广告还是极具潜力且回报率非常可观的——GooglePerformanceMax（PMax）广告。...

全网营销推广必备!这130个网站你用过几个?附效率提升技巧

嘿，各位互联网营销推广的小伙伴们！今天给大家整理了130个超实用的网站，涵盖了学习平台、推广平台、引流平台、数据分析平台等多个方面，绝对是干货满满，快来看看吧！...

开发一个特色网站需要哪些技术加持

1、前端开发前端开发是使用HTML、CSS和JavaScript等前端语言进行网页开发的技术。通过编写这些代码，可以实现网页的布局和用户界面(UI)。...

应用软件开发与网站开发区别

1、操作理论不同网站开发是制作一些专业性强的网站，比如说动态网页。ASP、PHP、JSP网页。主要用到的开发技术是web开发。网站是必须要在浏览器上打开的，依附于浏览器才会生存。它不但需要根据软件开发...

如何用Google站长工具确认外贸网站的外链

外贸公司网站要快速排名，其中一个重要的工作是做外链，那么当我们找外包公司做好外链之后，如何确认：做好的外链是否被Google认可？我们做好一些外链之后，如何确认到底有哪些？我们自己网站一共有多少外链？...

高级SEO人员需了解的八大搜索引擎命令

一般情况下，站长们通常都比较喜欢直接用站长工具或爱站的一些SEO工具去分析网站数据，而直接用命令去搜索引擎的搜索框查询的相对比较少，但这些常用的指令大家也可以熟悉和了解一下：1、SiteSite是最常...

SEO 干货!网站快速收录的 3 个实用技巧，新手站长必看

各位SEO新手们，是不是经常遇到这样的烦恼：网站都辛辛苦苦做了一两个月了，可搜索引擎就像完全不知道它存在一样，迟迟不收录？要知道，网站不收录，咱们做的关键词优化、内容更新等所有工作都相当于白忙活！...

豆包网页版的“视频生成”和豆包APP的“照片动起来”有什么不同

在视频制作方面，豆包网页版和电脑版提供了“视频生成”功能，而豆包APP提供了“照片动起来”功能，那么二者有什么不同呢？操作平台o豆包网页版和电脑版的“视频生成”：在电脑上操作，通过访问豆包官方网站，...

适合新手的电子画册制作工具全攻略

第一次做电子画册，担心不会设计？别怕！2025年这些工具让零基础也能轻松上手。无需PS技能，不用学习复杂排版，跟着这篇攻略，10分钟就能做出专业感满满的电子画册！...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表