有货每天会为用户推送专题活动页。通过个性化推荐系统，有货每天会精挑细选一些量身定制的活动，借助 APP 消息分发能力推送给用户，为用户提供专属福利，帮助用户更快地找到自己心仪的商品。这类消息正是通过专题活动页的方式呈现的。

活动模板简介

活动模板是有货前端团队开发的一套快速生成专题活动页的工具。借助于这套工 具，业务运营人员可以根据视觉稿自行拼装页面，快速上线专题活动页面。

为什么要做

一直以来，有货的专题活动页面是安排专人开发的。要上线一个页面，从运营部门提出业务需要，到开发、调试、上线，花费大量人力、时间。极端情况下，因专题活动具有时效性的特点，页面未充分准备好就草草上线，甚至无法如期上线而错失营销机会。另外，随着业务发展，要开发的活动页面越来越多，技术部门任务越来越重。正常版本迭代任务开发过程中，也会突然插进专题活动开发任务，对版本质量也会产生影响。大体总结原有的专题活动页开发模式造成的问题如下：

• 无法满足活动时效性强的要求。
• 临时安插活动任务给技术部门，工作量突增。
• 开发人力、时间成本高，出问题概率高。
• 多人开发，造成编码风格不统一，维护困难。
• 重复开发。一有新的活动需求，就要重新开发。

改变原有的开发模式迫在眉睫。我们对以往的活动页面分析发现，大多数页面需要的功能特性一样。因此，我们可以按照功能特性将页面拆分，模块化，然后针对某个活动选择不同的模块拼装页面。如果有些活动页面当前活动模板不能很好支持，仍然需要单独开发。我们也希望一些基本功能，比如用户权限验证，领券，可以通过引入 SDK 工具包迅速实现。

我们希望，专题活动页面不再需要开发，业务运营人员根据视觉设计，可以自己完成活动页面的发布，使活动上线更加及时，运营更加高效。对于技术部门来说，一劳永逸，不再出现正常版本迭代下突然插入额外工作的情况，从而也能保证页面易维护，稳定性提高。

为了解决以上问题，我们开发了活动模板及 YOHO-JS-SDK 工具包。

实现

按照上述分析，我们将页面组件化，看做是不同类型的楼层的组合 + 常用基础功能。

基本楼层包括侧悬浮、底悬浮、普通楼层三大类型，普通楼层又包括顶悬浮、图片楼层、商品组、店铺组等类型，覆盖了活动页面常用的页面片段类型，这些楼层大都可以后端渲染直出。后面进一步做 Nginx 缓存、CDN 缓存处理，保证了页面加载效率，减轻应用服务器负担。部分需要动态呈现的个性化楼层，比如商品组，采用了不同的处理策略，后面详细说明。整个活动页面组件化处理示例如下：

活动页面组件化处理示例

商品组楼层比较特殊。商品组楼层包含多种配置类型，有些活动的商品固定，有些需要取具体类目下的商品或者取配置的活动商品池中的商品，截取一定数量展示。另外，一个活动可能配置多个商品楼层，每个商品楼层的商品数量多达 100 个。如果将商品组类型的楼层后端直接渲染输出，势必会影响页面加载速度。所以，这部分的渲染逻辑移到 YOHO-JS-SDK 工具包中，前端异步获取数据，浏览器端渲染输出页面。使用以上策略结合懒加载，实现了较高的页面加载速度和质量。

同时，商品组也是我们的个性化组件之一，其他的个性化组件还包括优惠券和有货币等。借助有货的大数据处理能力，我们现在可以根据用户在有货的消费习惯，为用户直接呈现符合其预期的商品，我们可以为用户定制优惠券，提供专属的有货币赠送福利。实际上每个用户看到的活动页面都是不同的，实现了千人千面。目前，有货 APP 的首页、商品页等都已经实现了千人千面。用户使用频率越高，手中 APP 的个性化程度就越高，就越容易找到自己想要的潮品。

下面介绍下活动模板的具体实现。

• 服务端中间层具体实现：

服务端从接口取到结构化的数据后，根据数据选取不同的楼层模板渲染，输出页面。此中间层使用 NodeJS(ExpressJS) 搭建。此处数据渲染由于与用户个人信息数据无关，所以我们可以多级缓存生成的页面，实现高并发下稳定可靠快速的页面加载。

服务端中间层从接口取到的数据片段如下所示：

接口数据片段

通过服务端进一步处理后，以上数据片段中的楼层数据对应输出的 html 代码和渲染的页面楼层如下：

页面楼层示意

H5 页面于 APP WebView 中呈现场景下的加载流程示例如下：

加载流程

• YOHO-JS-SDK 相关特性

  常用基础功能封装成了 YOHO-JS-SDK 工具包，打包成一个可以在任何工程中方便引入的 js 文件。YOHO-JS-SDK 工具包提供了以下基础功能：

  • 个性化推荐。即上文说到的商品组楼层，通过 JSONP 方式异步获取数据，浏览器端渲染页面。结合有货大数据处理，可以为用户提供个性化的商品数据。
  • 促销。领取有货币和优惠券。上部分图中的优惠券，依然是服务端直接渲染输出。领取优惠券，需要用户操作的数据交互通过此 SDK 工具包实现。
  • 权限验证。提供用户身份校验及登录功能。
  • 分享。活动页面嵌入 APP，QQ，微信 的情况下，提供分享到微信、QQ、微博等的功能，并且使用运营在后台维护的分享信息。

  任何一个活动，只要按照约定的 DOM 结构渲染页面，都可以通过引入 YOHO-JS-SDK 快速实现上述功能，无需针对功能编写代码。

现在的活动需求“开发”过程如下所示：

活动需求“开发”过程

实际使用情况及效果

• 提升了效率:

• 配合后台开发的拖曳式排版工具，业务运营同事可以根据视觉稿自主配置活动页面, 几乎无需技术部参与排期，开发，使得活动可以以最快时间上线；
• 开发工作量大幅下降。即使后来页面设计上有创新，只开发新的楼层即可，无需从头开发整个页面。节省了大量人力、时间、沟通成本。上线半年，支持了近 2000 个运营活动，市场推广页面。

• 可以对所有活动页面质量整体控制:

• 借助平台的图片处理能力，可以对图片质量做调整。双十一活动期间，我们可以通过一次代码发布，对所有相关活动页面的图片质量整体控制，以更好地平衡页面加载速度、页面质量和 CDN 流量；
• 所有活动整体缓存控制，双十一，618 期间，可以延长 Nginx 缓存时间，忽略网址查询字符串，提高缓存命中，减少 Node 服务器压力，将活动流量对整站的影响降低，保障核心业务正常运行。

总结与展望

以前的有货活动页面大部分都是内嵌 APP 使用的，在开发联调时 H5 页面与接口、与 APP 沟通交互较为复杂。逐个页面专项开发或者 APP 原生实现，费时费力。此次将页面拆分，开发活动模板，结合 H5 开发速度快的特点，很好地支持了有货线上活动专题业务。有些常用楼层多次实践沉淀之后，可考虑 APP 原生实现，以提供更好的性能。

我们也可以为其开发 PWA 应用，提供更好的浏览器端浏览体验。借助有货大数据处理和 AI 技术，我们也可以根据活动主题和活动商品，实现 Banner 图的自动生成，从而为用户提供更加个性化的视觉效果，更精准地匹配用户喜好。

对于长期活动，也可以对其做专门的 SEO 优化，提供 AMP 和 MIP 页面支持，用户可以通过搜索引擎直达活动页面，增加活动曝光率。