一个简单易用的电商活动页面生成系统作为一个前端搬砖工，是否把80%的时间花在了活动专题页面的编码上？在电商行业，每一个节
本文介绍了电商活动页面制作平台的搭建思路，分析现有平台痛点，提出理想工具特点，包括组件化与模板生成页面、平衡易用性与灵活性、处理 APP 内嵌套点击跳转、按需生成小体积页面等，还列举了组件实例，并给出项目开源地址。
关联问题: 此系统开发难吗？ 如何优化页面加载？ 能生成特定页面吗？
作为一个前端搬砖工，是否把80%的时间花在了活动专题页面的编码上？在电商行业，每一个节日前都是前端搬砖工的加班时间周期，甚至上线前一秒还能收到领导或运营发来修改文案和图片的邮件。
本文将介绍一个移动端专题活动页面制作平台的搭建思路。
一个典型的电商专题活动页
没错，你看到的就是把你当兄弟的某东的一个活动主场页，现在你可以去把各大电商平台的活动页面浏览一遍，不难看出以下共同点：
页面展示图片为主 点击必须兼容app 商品列表的样式固定几个 运营特别喜欢使用楼层导航菜单 倒计时肯定少不了 底部菜单栏跳转到分会场 少量的动画效果 tabs切换增加页面展示内容 图片懒加载提升页面的呈现速度 回到顶部这种通用的必不可少 微信分享除了淘宝其他项目痛点分析：页面功能大同小异、需求急、时间紧、下线快、研发性很比低，前端工程师无法持续开发无穷无尽的活动页面，需要采用活动页面可视化搭建工具， 由运营人员/产品人员直接生成/修改活动页面，研发人员的工作转变为提供满足活动页面业务需要的活动模板。
现有页面制作平台
或许你也体验过现有其他页面制作平台，是否觉得自己一个前端开发人员都不会使用？如下图是某一个在线页面制作工具，是不是觉得比ps还复杂？
当然，他们这些平台都是从通用性考虑，类似一个基础性平台，把前端技术以界面的方式呈现出来。不可否认，技术很强大，同时也很庞大，离普通人很遥远，一般人使用不了。有句话说（具体我也不知道谁说的）：不能把技术落地成大家都能使用的东西就不是好技术。没错，我现在就是要把技术落地成小朋友都会使用的东西。
其他可视化搭建工具举例阿里云凤蝶
支持页面 Data 编辑, 面向运营、产品人员, 编辑自由度为无嵌套的组件 目前制作运营、活动页面功能上最好的工具 提供页面搭建的模板, 并支持自定义模板 配置表单基于 Schema 生成，配置表单操作功能完善ice 阿里飞冰
支持 Component Tree 编辑, 面向中后台开发人员 编辑自由度为无嵌套的组件，使用“物料-区块” 非前端开发人员可以快速搭建出可用、符合规范的页面 页面以源码方式输出，前端服务化的一种方式百度H5
支持 HTML Tree 编辑, 面向前端小白, 编辑自由度为 HTML 元素 做 H5 的好工具, 功能上很强大, 对动画的编辑功能做到细致美团外卖前端可视化界面组装平台 —— 乐高
支持 Dynamic Logic 编辑, 面向中后台开发人员, 编辑自由度为可嵌套的组件 前端服务化的一种方式 在美团内部支持了许多业务页面, 没有公网服务, 了解该系统只能通过其介绍文章gaea-editor
支持 Component Tree 编辑, 面向中后台开发人员, 编辑自由度为可嵌套的组件 页面的拖拉生成, 实现得很完整 用于页面设计, 所以偏向页面元素的样式控制 技术文章对可视化搭建工具数据流有深刻理解: 可视化在线编辑器架构设计Vue-Layout
基于UI组件的Vue可视化布局、生成vue代码的工具 支持 Component Tree 编辑, 面向中后台开发人员, 编辑自由度为可嵌套的组件 工具的使用体验效果不错组件开发的思考
以上开源/非开源的可视化页面制作平台，无一例外都存在使用门槛高，专业术语多，操作复杂等。
我理想的可视化运营页面生成工具特点： 采用组件化和页面模板实现快速生成页面 采用不嵌套的组件层级简化样式布局和配置操作 开发参数式配置数据, 自动生成配置表单 采用后台渲染或生成静态文件, 使编辑系统与组件前端框架解耦 在遵循编辑系统约定下, 组件可以自由拓展, 前端框架可以自由选择 一、平台的易用性与展示的灵活性之间的平衡 利用 vuejs 的 mvv* 特性可以轻松实现配置即可见，大幅降低用户使用难度和项目的开发难度； 页面只做横向切割划分组件（组件宽度100%），放弃 absolute 布局方式的通用组件，组件内部的absolute布局采用用户拖拉定位的交互； 少量页面全局的 absolute/fixed 组件（如底部导航，回到顶部等），采用特殊处理 + 预定义的方式； 组件设计尽量考虑使用背景图出样式，或者以多种固定样式提供给用户选择。如下图所示分割组件：
二、APP内嵌套如何处理点击或跳转统一定义页面点击事件，针对不同的环境做不同跳转方式，处理APP内跳转的兼容。另外还可以特定的组件定义特定的事件：例如商品列表组件，动态获取商品数据，点击事件默认跳转到商品详情页。
var url = JSON.parse(target.dataset.url) var type = target.dataset.type // 系统内部页面 if (type === 'inside') { if ('isAPP') { openApp(url) } else { location.href = url } } if (type === 'ouside') { location.href = url } if (type === 'tel') { location.href = 'tel:' + url } if (type === 'mail') { location.href = 'mailto:' + url } // 领取优惠券 if (type === 'coupon') { getCoupon(url) } 三、按需（css和js的按需）生成小体积页面
随着组件的增加，防止页面资源太大影响页面呈现速度，这里除了公共代码，根据用到的组件，加载该组件使用的css和js代码。
// 按需生成script标签 <script src="http://example.com/??swiper.min.js,timeout.min.js,form.min.js"><script> // 根据用到的组件添加style，或者直接打包到html头部 <link ref="stylesheet" href="http://example.com/??form.min.css,swiper.min.css,timeout.min.css"/> 四、楼层导航菜单和图片懒加载需要组件预定义高度
在实现楼层导航菜单和图片懒加载的过程中发现需要预定义页面高度，这就要求所有组件必须撑开自身的高度，禁止出现加载动态内容后才撑开高度的组件。
<div style="height:6.85vw;"> <img data-src="http://img.o" class="lazyload"> </div> 五、缓存和非缓存之间的平衡
生成静态页面的缓存时间不能太长，必须可以在短时间内或支持用户手动推送更新页面，这里可以配合平台使用的CDN系统进行处理。
六、 配置信息与后端接口解耦组件会随着系统迭代大幅增加，且每个组件配置不统一，采用配置信息生成json字符串的方式保存到数据库。解耦后端的存储和接口逻辑，后端只需要提供一个增删改接口即可。
七、页面生成系统与前端h5的框架解偶h5消费端可以采用原生、jQuery、vuejs等任何技术方案。 个人偏向使用原生（我的应用项目方案），jQuery在移动端存在的意义不大，vuejs等框架增加了消费的复杂度，活动专题页这种纯展示性的页面没有必要引入 mvv* 框架。
八、是否可以扩展到生成商城首页系统设计是一个数据生产平台，不负责消费（所见和预览也算是消费的两种），可以生成自定义格式的配置信息，供web或app消费使用。自行脑补：APP端需要预定义组件样式。
九、开发难度与使用难度之间的平衡这个还是以系统的使用简单为主，在我这个系统上，开发多做几个功能类似的组件并没有太大难度，例如轮播图组件，是否把swiper的所有功能集成到一个组件上，我的想法就是分开吧，运营人员喜欢直观易用的，他想要的组件功能可能就是那么简单。
组件举例
图片组件：如上图组件分割第一个组件，我们使用一个图片组件即可，上传切割好的图片，然后定义点击区域（类似热区area，用户拖拉生成）实现点击跳转即可（PS：实际上图片组件已经可以满足页面80%的布局要求）：
倒计时组件：上图有一个倒计时功能，如何尽量覆盖平时使用要求？我采用图片出样式的原则，内部用用户随意定义各个倒计时数字样式，设计如下：
其他组件就不一一列举了，感兴趣的小伙伴可以自己尝试封装组件，还可以分装从后端获取数据的组件，比如我在实际项目中封装的“商品列表”组件等，但是别忘记组件的封装原则：图片出样式，高度要撑开。
项目开源地址： github地址
References
【第1282期】页面可视化搭建工具前生今世
【第1524期】页面可视化搭建工具技术要点
相关知识
花卉礼品电商的创意营销
电商后台之库存系统
解构电商产品——订单系统（一） – 人人都是产品经理,
花卉电商产业发展前景大
电商技术解密之库存系统 – 人人都是产品经理,
抖音电商——鲜花园艺行业的新花路
花加王柯：如何打造一个一天生产80万束的鲜花电商
鲜花电商花加带你探寻鲜花电商行业的优势
鲜花电商为何玩不转“她经济”？鲜花电商为何玩不转“她经济”，谁的锅？
卖鲜花，电商很上瘾
网址: 一个简单易用的电商活动页面生成系统作为一个前端搬砖工，是否把80%的时间花在了活动专题页面的编码上？在电商行业，每一个节 https://m.huajiangbk.com/newsview838859.html
| 上一篇: Magento/Adobe co |
下一篇: 【计算机毕业设计】“花鸣”B2C |
