# h5-factory
**Repository Path**: sync-github/h5-factory
## Basic Information
- **Project Name**: h5-factory
- **Description**: h5专题页面可视化编辑工具，拖拽编辑，灵活切换，一键生成html文件
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://github.com/yangyuji/h5-factory
- **GVP Project**: No
## Statistics
- **Stars**: 14
- **Forks**: 4
- **Created**: 2019-09-25
- **Last Updated**: 2024-12-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# h5-factory
> h5专题页面可视化编辑工具，拖拽编辑，灵活切换，一键生成html文件
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:9999
npm run dev
# build for production with minification
npm run build
# build report
npm run build:report
```
### 组件
* 文本
* 图片
* 表单
* 轮播图
* 底部导航
* 楼层导航
* 倒计时
* 横向滚动
* 滚动新闻
* 金刚位
* ...
### 消费使用
我的消费端页面模板例子，仅供参考：
``` bash
<!--pageName-->
// 页面配置信息里的样式
// 根据用到的组件添加style
// 优先执行的js
// 异常或错误显示的dom
// 回到顶部等预置的dom
goTop
// 按需生成script标签
```
我的app内点击兼容处理：
```bash
// 拨打电话
if (type === 'tel') {
if (common.isApp()) {
var app = {
actionName: 'callphone',
phoneNumber: config
};
common.openApp(app);
} else {
location.href = 'tel:' + tel;
}
}
// 系统内部页面
if (type === 'inside') {
if (common.isApp()) {
var app = {
actionName: 'appLogin',
params: obj
};
common.openApp(app);
} else {
location.href = url;
}
}
// 外链页面，也可以直接渲染到a[href]，但是不方便自己写统计代码
if (type === 'outside') {
location.href = url;
}
// 调用后端接口（领取优惠券）
if (type === 'coupon') {
common.getCoupon(url);
}
```
根据模板由后端生成纯静态html文件，SEO友好，页面秒开，随时随地部署使用。还可以在此基础上开发业务相关的组件，例如商品列表，文章列表等。
### 发散使用
* APP和M站首页的可视化制作；
* 一键配置生成小程序页面；
* 配置即生成dom串存到数据库，后端渲染出页面；
## 文档
系统架构设计和组件拆分原则可阅读我的掘金文章：[《搭建一个简单易用的专题页面制作平台》](https://juejin.im/post/5cf328706fb9a07f042030f0)
[在线体验地址](https://yangyuji.github.io/h5-factory/)
## 许可证
[MIT](https://github.com/yangyuji/h5-factory/blob/master/LICENSE)
