推荐一款制作H5页面的可视化工具

最新推荐文章于 2024-04-07 09:50:12 发布

d676015863

最新推荐文章于 2024-04-07 09:50:12 发布

阅读量9.3k

点赞数 5

文章标签： H5

本文链接： https://blog.csdn.net/d676015863/article/details/100930418

版权

无需写代码，可视化H5页面制作编辑器。使用JS写的，直接谷歌浏览器打开即可使用。

下面是截图：

代码另存为HTML文件即可打开：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>H5DS</title>
    <link rel="stylesheet" href="https://cdn.h5ds.com/umd/editor/style.css" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_157397_ze6q8vjbeme.css"
    />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_1160472_ybl2xl0ao8.css"
    />
    <link
      href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.css"
      rel="stylesheet"
    />
    <!-- 编辑器所需第三方资源库 -->
    <script src="https://cdn.h5ds.com/lib/plugins/swiper.min.js"></script>
    <script src="https://cdn.h5ds.com/lib/plugins/jquery.min.js"></script>
    <script src="https://cdn.h5ds.com/lib/plugins/h5ds.vendor.min.js"></script>
    <!-- 外部引入antd --->
    <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.js"></script>
    <!-- es6语法支持 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- H5DS资源 -->
    <script src="https://cdn.h5ds.com/umd/editor/index.js"></script>
  </head>
  <body></body>
  <script type="text/babel">
    $(async function() {
      // 使用编辑器
      class Editor extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            data: null
          };
        }

        /**
         * 保存APP
         */
        saveApp = async data => {
          console.log("saveApp ->", data);
        };

        /**
         * 发布 app
         */
        publishApp = async data => {
          console.log("publshApp ->", data);
        };

        componentDidMount() {
          // 模拟异步加载数，设置 defaultData 会默认加载一个初始化数据
          setTimeout(() => {
            this.setState({ data: "defaultData" });
          }, 100);
        }

        /**
         * 使用编辑器部分
         */
        render() {
          const { data } = this.state;
          const { H5dsEditor } = H5DS_GLOBAL.editor;
          return (
            <H5dsEditor
              plugins={[
                "h5ds-form",
                "h5ds-video",
                "h5ds-map",
                "h5ds-button",
                "h5ds-save-to-image",
                "h5ds-drawer-menu",
                "h5ds-css-effect",
                "h5ds-count-time",
                "h5ds-chart",
                "h5ds-qrcode",
                "swiper-cube",
                "swiper-overflow",
                "swiper-flip",
                "swiper-slide",
                "threejs-360",
                "threejs-obj-loader"
              ]} // 第三方插件包
              data={data}
              debugger={false} // debugger=true用于调试插件
              options={{
                noServer: true, // 开启无后台模式
                pluginsHost: "https://www.h5ds.com",
                publishApp: this.publishApp,
                saveApp: this.saveApp, // 保存应用
                appId: "test_app_id" // 当前appId
              }}
            />
          );
        }
      }

      // 使用
      ReactDOM.render(<Editor />, document.querySelector("body"));
    });
  </script>
</html>

d676015863

关注关注

5
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
3
评论
推荐一款制作H5页面的可视化工具

推荐一款制作H5页面的可视化工具无需写代码，可视化H5页面制作编辑器。使用JS写的，直接谷歌浏览器打开即可使用。无需写代码，可视化H5页面制作编辑器。使用JS写的，直接谷歌浏览器打开即可使用。下面是截图：代码另存为HTML文件即可打开：<!DOCTYPE html><html lang="en"> <head> <meta char...
复制链接

扫一扫