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" } } };