一个简单易用的电商活动页面生成系统

时间 2019-11-06

标签一个简单易用活动页面生成系统栏目快乐工作繁體版

原文原文链接

做为一个前端搬砖工，是否把80%的时间花在了活动专题页面的编码上？在电商行业，每个节日前都是前端搬砖工的加班时间周期，甚至上线前一秒还能收到领导或运营发来修改文案和图片的邮件。javascript

本文将介绍一个移动端专题活动页面制做平台的搭建思路。css

一个典型的电商专题活动页

没错，你看到的就是把你当兄弟的某东的一个活动主场页，如今你能够去把各大电商平台的活动页面浏览一遍，不难看出如下共同点：

页面展现图片为主
点击必须兼容app
商品列表的样式固定几个
运营特别喜欢使用楼层导航菜单
倒计时确定少不了
底部菜单栏跳转到分会场
少许的动画效果
tabs切换增长页面展现内容
图片懒加载提高页面的呈现速度
回到顶部这种通用的必不可少
微信分享除了淘宝

其余项目痛点分析：页面功能大同小异、需求急、时间紧、下线快、研发性很比低，前端工程师没法持续开发无穷无尽的活动页面，须要采用活动页面可视化搭建工具，由运营人员/产品人员直接生成/修改活动页面，研发人员的工做转变为提供知足活动页面业务须要的活动模板。html

现有页面制做平台

或许你也体验过现有其余页面制做平台，是否以为本身一个前端开发人员都不会使用？以下图是某一个在线页面制做工具，是否是以为比ps还复杂？前端

固然，他们这些平台都是从通用性考虑，相似一个基础性平台，把前端技术以界面的方式呈现出来。不能否认，技术很强大，同时也很庞大，离普通人很遥远，通常人使用不了。有句话说（具体我也不知道谁说的）：不能把技术落地成你们都能使用的东西就不是好技术。没错，我如今就是要把技术落地成小朋友都会使用的东西。

其余可视化搭建工具举例

阿里云凤蝶vue

支持页面 Data 编辑, 面向运营、产品人员, 编辑自由度为无嵌套的组件
目前制做运营、活动页面功能上最好的工具
提供页面搭建的模板, 并支持自定义模板
配置表单基于 Schema 生成，配置表单操做功能完善

ice 阿里飞冰java

支持 Component Tree 编辑, 面向中后台开发人员
编辑自由度为无嵌套的组件，使用“物料-区块”
非前端开发人员能够快速搭建出可用、符合规范的页面
页面以源码方式输出，前端服务化的一种方式

百度H5git

支持 HTML Tree 编辑, 面向前端小白, 编辑自由度为 HTML 元素
作 H5 的好工具, 功能上很强大, 对动画的编辑功能作到细致

美团外卖前端可视化界面组装平台 —— 乐高github

支持 Dynamic Logic 编辑, 面向中后台开发人员, 编辑自由度为可嵌套的组件
前端服务化的一种方式
在美团内部支持了许多业务页面, 没有公网服务, 了解该系统只能经过其介绍文章

gaea-editorweb

支持 Component Tree 编辑, 面向中后台开发人员, 编辑自由度为可嵌套的组件
页面的拖拉生成, 实现得很完整
用于页面设计, 因此偏向页面元素的样式控制
技术文章对可视化搭建工具数据流有深入理解: 可视化在线编辑器架构设计

Vue-Layout数据库

基于UI组件的Vue可视化布局、生成vue代码的工具
支持 Component Tree 编辑, 面向中后台开发人员, 编辑自由度为可嵌套的组件
工具的使用体验效果不错

组件开发的思考

以上开源/非开源的可视化页面制做平台，无一例外都存在使用门槛高，专业术语多，操做复杂等。

我理想的可视化运营页面生成工具特色：

采用组件化和页面模板实现快速生成页面
采用不嵌套的组件层级简化样式布局和配置操做
开发参数式配置数据, 自动生成配置表单
采用后台渲染或生成静态文件, 使编辑系统与组件前端框架解耦
在遵循编辑系统约定下, 组件能够自由拓展, 前端框架能够自由选择

1、平台的易用性与展现的灵活性之间的平衡

利用 vuejs 的 mvv* 特性能够轻松实现配置便可见，大幅下降用户使用难度和项目的开发难度；
页面只作横向切割划分组件（组件宽度100%），放弃 absolute 布局方式的通用组件，组件内部的absolute布局采用用户拖拉定位的交互；
少许页面全局的 absolute/fixed 组件（如底部导航，回到顶部等），采用特殊处理 + 预约义的方式；
组件设计尽可能考虑使用背景图出样式，或者以多种固定样式提供给用户选择。

以下图所示分割组件：

2、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)
}
复制代码

3、按需（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"/> 复制代码

4、楼层导航菜单和图片懒加载须要组件预约义高度

在实现楼层导航菜单和图片懒加载的过程当中发现须要预约义页面高度，这就要求全部组件必须撑开自身的高度，禁止出现加载动态内容后才撑开高度的组件。

<div style="height:6.85vw;">
    <img data-src="http://img.o" class="lazyload">
</div>
复制代码

5、缓存和非缓存之间的平衡

生成静态页面的缓存时间不能太长，必须能够在短期内或支持用户手动推送更新页面，这里能够配合平台使用的CDN系统进行处理。

6、配置信息与后端接口解耦

组件会随着系统迭代大幅增长，且每一个组件配置不统一，采用配置信息生成json字符串的方式保存到数据库。解耦后端的存储和接口逻辑，后端只须要提供一个增删改接口便可。

7、页面生成系统与前端h5的框架解偶

h5消费端能够采用原生、jQuery、vuejs等任何技术方案。我的偏向使用原生（个人应用项目方案），jQuery在移动端存在的意义不大，vuejs等框架增长了消费的复杂度，活动专题页这种纯展现性的页面没有必要引入 mvv* 框架。

8、是否能够扩展到生成商城首页

系统设计是一个数据生产平台，不负责消费（所见和预览也算是消费的两种），能够生成自定义格式的配置信息，供web或app消费使用。自行脑补：APP端须要预约义组件样式。

9、开发难度与使用难度之间的平衡

这个仍是以系统的使用简单为主，在我这个系统上，开发多作几个功能相似的组件并无太大难度，例如轮播图组件，是否把swiper的全部功能集成到一个组件上，个人想法就是分开吧，运营人员喜欢直观易用的，他想要的组件功能可能就是那么简单。

组件举例

图片组件：如上图组件分割第一个组件，咱们使用一个图片组件便可，上传切割好的图片，而后定义点击区域（相似热区area，用户拖拉生成）实现点击跳转便可（PS：实际上图片组件已经能够知足页面80%的布局要求）：

倒计时组件：上图有一个倒计时功能，如何尽可能覆盖平时使用要求？我采用图片出样式的原则，内部用用户随意定义各个倒计时数字样式，设计以下：

其余组件就不一一列举了，感兴趣的小伙伴能够本身尝试封装组件，还能够分装从后端获取数据的组件，好比我在实际项目中封装的“商品列表”组件等，可是别忘记组件的封装原则：图片出样式，高度要撑开。

项目开源地址： github地址

References

【第1282期】页面可视化搭建工具前生今世

【第1524期】页面可视化搭建工具技术要点