临摹产品的专题上线了很久，一直没更新，感觉有点对不起关注的小伙伴了，没办法，真懒。

一般心情不好的时候，会想跑步或写文章，今天很丧，所以我来更新了（笑）。

这次来聊聊智能页面，临摹的对象是阿里巴巴。

一、什么是智能页面？

全可配置页面，我称为智能页面，这个词汇不是我发明的，看到有人怎么用，觉得逼格挺高，所以拿过来了：）

全可配置页面能力——可在后台通过简单的增删模块，调整页面模块位置及模块参数，实现免二次开发直接生成前端页面的能力。

上面说的有点绕，简单说就是类似易企秀这种H5制作，不需要你写代码，开发人员开发好后，运营人员直接在后台拖拉模块就能创建对应的页面。

哪些地方用的到？

例如运营人员做活动的时候，要根据不同的热点，节日做很多的活动运营，活动运营最终是要落地的，所以往往会东拐西绕后，最终落地到商品购买。

因为运营人员经常需要制作各种活动页面，常常让研发同事叫苦不迭，因为同样的事情经常重复做。

而运营人员也觉得很无奈，做好的页面，要调整一丢丢的东西，都需要走开发代码上线，热点来的快去的也快，但每次提都需要排期，排到后面直接放弃这个热点…

基于以上的种种痛点，所以大家都希望有个东西，让运营同事能简单快速的在后台生成活动页面，不需要找研发，不需要测试，当然，也不需要产品策划。

这样皆大欢喜。

这里可能有人疑问，为什么不用外部的H5页面制作，直接可以满足制作活动页面啊。

emmm，如果是纯页面+URL跳转是可以这么整，但是如果页面稍微一复杂，页面数据需要读取你家的数据库，你找谁去帮你做啊？

智能页面实际应用挺广泛的

1）新闻专题页面

在还是PC为王的年代，三大门户可谓威风凛凛，其中新闻的专题就用上了智能页面，毕竟专题那么多，总不能都用前端资源实现吧。（当然这里的智能页面应该属于CMS的一部分）

2）各种专题活动

在移动端看到的大量的H5活动，很多也是通过智能页面实现的，这个在上面有提到。

3）电商

电商，今天文章的主角，为什么电商也需要？

因为行业差别很大，卖奢侈品的风格和卖日用品电商的店铺风格是不同的。

类目如此之多，每家店都有自己的风格，必须提供店铺编辑器方便广大店家使用。

二、结构

来临摹学习下阿里巴巴的无线建站中心

为了方面后面讲解，先来看张结构图

1）页面

所有的内容都是通过页面来承载的，页面就是一个大容器。

基本属性

· 页面Title

· 页面URL（一般自动生成，也可以设定为可定义）

再考虑到活动属性，同时移动端活动页面要分享到微信的时候，是否需要定义页面的Title，摘要和图片，所以要考虑到

· 页面生效时间/失效时间（活动可以是有实效性的，到期生效，到期失效）

· 分享的Title

· 分享的摘要

· 分享的图片

再考虑到使用的过程中，需要对页面进行管理

· 页面状态（待审核，生效中，冻结，删除）

2）组件（模块）

重点来了（敲黑板！），页面是通过组件构成的。不同的组件负责实现不同的功能，组件是最最重要的。

1. 组件的页面排布

通过拖拽，实现组件的位置变动

拓展下，页面不仅仅可以是单一的列表结构，还可以是Tab形式

这时候就需要有Tab组件，支持切换不同的tab，但是也需要限定哪些能装进tab的，哪些是不可以的。

阿里的无线建站没有tab组件，如果有的时候，拖动组件在页面排序可以是这样

2. 组件的样式

不同的组件功能不同，样式也不一样，组件应该根据自身平台的需求设定。

出需求时，和运营同事探讨，结合产品现状，列出经常需要使用模块再开发，更有针对性。

例如横滑的运营位，在新闻类产品可以是专题，在电商可以是商品推荐，在阅读类产品可以是图书，位置内的元素还是需要结合自家产品设定。

3）组件的数据

组件样式有了，接着就是数据哪里来的问题。

不同的模块取数的方式是不同的，但是可以归纳为

1. 指定数据

例如电商，就指定这个热门推荐，只展示规定的5个商品

2. 查询数据

有数据源的时候，通过查询关键词，筛选出想要的数据展示（这种只适合是数据量很小的时候）

3. 分类数据

按照产品内不同的数据源，通过筛选一级类目，二级类目，三级类目…来取数。

例如挂号产品中，医院可以按省市分，医生可以按一级科室和二级科室细分等

4）组件的属性

最后是组件的属性，其实数据也算是组件的一个属性，但是因为比较特殊，所以在上面单独拿出来。

不同的组件的属性应该也是不一致的，一些通用的属性有

· 组件Title

· 组件Title显示控制

· 更多入口

· 更多入口URL

· 是否有纵向留白（区分不同的组件之间的间距）

· 是否有横向留白（当页面底部有底图或底色，左右留白能页面看起来更像一个整体，想想信纸和信纸背景就知道了）

其他的属性就是根据不同组件的不同功能设定的

· 轮播的切换时间（banner图，头条等）

· 列表默认展示项（数据太多，默认展示几项）

· 模块高度宽度（图片控件，banner图等）

以上，我们讲了做成一个智能页面需要的是，页面+组件+组件数据+组件属性

三、后台管理

简单讲下后台管理，和阿里巴巴店铺装修的页面大同小异

1）组件属性编辑器

不同的组件，虽然样式不同，但是可能属性是相同的，所以属性和组件样式分开管理。

组件的属性可复用，例如横滑的商品列表和纵向的商品列表，样式不同，但是属性可以是相同的。

2）组件管理

管理不同样式的组件（模板），组件可以有不同的类目进行管理，方便查找。

另外，一个组件（模板）一定需要关联一个组件属性编辑器，两者组合才是一个完整的组件

3）模板管理

自定义的页面可以转化为模板，下次有类似运营活动的时候，直接通过模板创建页面，所以需要一个地方管理模板。

4）页面管理

所有生成的页面的管理，可以对页面进行生成，编辑，冻结，删除等

END