A h5 page generator, generated by editing json, and then through the phone side of the page through a series of functions rendering Now, the editor is still missing a lot of ways, the phone side has not finished, there is a long way to go, so stay tuned
网站在线地址： https://qiuyaofan.github.io/ishowPage
文档： https://qiuyaofan.github.io/iShow/
ishow v1.0功能列表
一：字体编辑
1.普通样式：背景颜色，文字颜色，字体，对齐，透明度，边距，行高，大小，加粗，倾斜，下划线，清除格式
2.边框样式：宽度，颜色，类型，圆角
3.阴影样式：阴影颜色，大小，半径，方向
4.点击可修改文字，拖拽改变位置
二：图片编辑
基本编辑：参考字体编辑
添加图片，替换图片
拉伸改变大小，旋转
上传图片
图片选择弹层有：预览，裁切（后台未接，只提供裁切返回坐标，宽度），选择，删除等功能
三：动画效果
打字机，渐变，淡入淡出，旋转，缩放等，动画种类参考易企秀
时间，延时，添加动画，预览动画，清除动画
多个动画
次数，循环（1.0暂不实现）
四：左侧页面总预览
添加新一页，删除，排序（1.0暂不实现）
五：键盘操作
左右键移动元素
删除键删除选中元素
撤销ctrl+z(最多缓存40个操作)
六：层级调整（还需完善优化）
七：表单配置添加
目前支持表单类型：输入框，单选，多选，下拉，按钮
支持添加验证
八：h5提交配置
标题，封面等
九：保存，发布（模版，h5 json）
十：多媒体
背景添加
音频添加
视频添加（1.0暂不实现）
十一：模版管理（1.0暂不实现，需要后台配合）
编辑模版，搜索模版
十二：手机端渲染
根据json完成动画播放，翻页，音频播放，屏幕适配等
表单提交后台（未实现）
# 克隆项目
git clone https://github.com/qiuyaofan/iShow.git
# 安装编辑器依赖
cd ishow
npm install
# 安装手机端依赖
cd ..
cd ishow-mobile
npm install
//or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# ishow 编辑器端
cd ishow
npm run dev
#在浏览器打开
http://localhost:9900
# ishow 手机端
cd ..
cd ishow-mobile
gulp watch
在浏览器打开
http://localhost:9910/view/wap.html
IUI组件部分
swiper：http://www.swiper.com.cn/api/index.html
饿了么element：http://element.eleme.io/#/zh-CN/component/installation
参考的开源架子：https://github.com/PanJiaChen/vue-element-admin
编辑器最终生成的是json配置，手机端通过json配置渲染出相应的样式，动画等。
目前编辑器是用mock实现模拟接口，如果需要换回自己的接口
1.去除config.js的mock调用
2.修改utils/fetch.js代码
//mock.js
resolve(res);
//没有mock
// if (res.code === 40001) {
// // 登出
// store.dispatch('FedLogOut').then(() => {
// router.push({ path: '/login' })
// });
// } else if (res.code !== 200) {
// Message({
// message: res.msg,
// type: 'error',
// duration: 5 * 1000
// });
// reject(res);
// } else {
// resolve(res);
// }
注释掉resolve(res);
下面的取消注释即可
json格式如下所示
var JSON={
"page":[
{
"page": 1,
"json": [
{
／***
控件类型
"1":"text",
"2":"img",
"3":"textarea",
"4":"radio",
"5":"checkbox",
"6":"select",
"7":"button"
***／
"type": 2,
"content": "https://img.kxz.com/assets/kxz/fixedInputCover1_20170630/fb7bf5d8-56d6-46ea-a01b-35e6943647da_demo1-4.png",
// 位置
"position": {
"top": 360,
"left": 201
},
"width": 175,
"height": 125.2680965147453,
//基本样式属性
"text": {
"backgroundColor": "rgba(0,0,0,0)",
"opacity": 100,
"padding": 0,
"rotate": 94,
"borderWidth": 0,
"borderRadius": 0,
"borderColor": "rgba(204, 204, 204,1)",
"borderStyle": "solid",
"shadowColor": "rgba(204, 204, 204,1)",
"shadowWidth": 0,
"shadowRadius": 10,
"shadowDire": 0
},
//动画类型，支持多动画
"animate": [
{
"animationName": "fadeIn",
"animationDuration": 2,
"animationTimingFunction": "ease",
"animationDelay": 0.4,
"animationFillMode": "both",
"animationPlayState": "initial",
"isOut": false
}
],
"id": 1501745923909,
//层级
"zIndex": 6
}
],
//这一页的背景图片
"bgImage": {
"backgroundColor": "",
"coord": "",
"url": ""
}
},
],
//配置
"setting": {
//背景音乐
"bgMusic": {
"url": "ttp://192.168.1.100:8080/uploadfile/3/15/5/8765a93f-351e-4984-8a03-6ef746ea36fd_bg.mp3",
"name": "enemy2_down.mp3"
}
}
};
2018-07-13 ：完善z-index控制功能，添加动画次数控制，优化替换裁切组件
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent