免费制作h5页面的软件,怎样制作网页新手自学入门

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

免费制作h5页面的软件,怎样制作网页新手自学入门

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 */  seApp = async data => {    console.log('seApp ->', 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,          seApp: this.seApp, // 保存应用          appId: 'test_app_id' // 当前appId        }}      />    );  }}export default Editor;

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

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

https://animate.style/

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

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

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

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

版权声明:《免费制作h5页面的软件,怎样制作网页新手自学入门》文章主要来源于网络,不代表本网站立场,不承担相关法律责任,如涉及版权问题,请发送邮件至[dcseo8@163 。com]举报,我们会在第一时间进行处理。本文文章链接:https://www.dcseo.cn/38954.html
(0)

相关推荐