Recommend a visual tool for making H5 pages
No need to write code, visual H5 page creation editor. It is written in JS and can be used directly by opening it in Google Chrome.
Below is a screenshot:
The code can be saved as an HTML file and opened:
<!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>