vivo商品中台如何实施可视化微前端技术？

本文共计4722个文字，预计阅读时间需要19分钟。

使用微前端和uni-render技术，提升商品中台前端系统的活力和可观测性。首先，背景：在电商领域，商品是核心组成部分，与商品管理系统紧密关联，负责商品的生命周期管理。

运用微前端和 uni-render 技术，让商品中台的前端系统变的更加灵活、更加具有可观察性。 一、背景

在电商领域内，商品是一个重要组成部分，与其对应的商品管理系统，则负责商品的新建、编辑、复制等功能。随着商品管理系统的成熟稳定和业务上的扩展需求，催化出了商品中台的诞生。它可以将现有商品功能最大效率的复用在很多业务上（公司内业务、公司外业务等）。而不是仅限于当前团队的业务使用。

在设计商品中台的前端系统时，我们使用了微前端和可视化技术，其可以达到如下效果：

• 可视化技术可以让各个业务方的运营等相关人员，直观的看到其配置的数据在页面上的展示效果；

• 微前端可以帮助商品中台更快更好的适配到各个业务方的项目中。

至此，本篇文章的背景介绍完毕，下面将会阐述如何在商品中台前端系统中做微前端和可视化。

二、可视化技术

目前商品中台的页面如下图所示：

图中左侧内容，就是商品可视化，它的核心能力如下：

• 图中右侧所有的变动，都能在左侧得到实时更新和展示，如主图、 sku 组合、价格、图文详情、商品参数等功能。

• 图中左侧的可视化区域是一个标准的 h5 页面，可以把它看成一个子页面，它与外层的父页面在 ui 上是完全隔离的，同时在数据上又是共享的。

下面我将会对可视化技术原理做完整阐述，请大家继续往下看。