vivo 商品中台的可视化微前端实践

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475

一、背景

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

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

• 可视化技术可以让各个业务方的运营等相关人员，直观的看到其配置的数据在页面上的展示效果；
• 微前端可以帮助商品中台更快更好的适配到各个业务方的项目中。

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

二、可视化技术

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

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

• 图中右侧所有的变动，都能在左侧得到实时更新和展示，如主图、 sku 组合、价格、图文详情、商品参数等功能。
• 图中左侧的可视化区域是一个标准的 h5 页面，可以把它看成一个子页面，它与外层的父页面在 ui 上是完全隔离的，同时在数据上又是共享的。

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

三、可视化技术原理

可视化整体技术原理图如下:

从上图可以获得以下信息：

• 子窗口用 iframe 展示；
• 子窗口用 vuex 做状态管理；
• 子窗口和父窗口通过共享状态 （ vue store ）来完成数据通信。

看到这，小伙伴可能会有以下疑问：

iframe 和父窗口的数据通信是通过 postMessage 完成的，这里为什么不使用 postMessage 呢？

使用 vuex 完成 iframe 数据通信是如何实现的呢？

回答第一个疑问：为什么不使用 postMessage

实践过的小伙伴应该深有体会，使用 postMessage 的话，数据通信架构基本如下图所示：

结合上图可以分析出 postMessage 有以下缺点：

• 父窗口含有大量逻辑：父窗口需要将 vuex 的数据进行处理，然后通过 postMessage 进行传输；
• 数据通信方式不纯粹：vuex 和 postMessage 组合在一起，互相转换，使数据通信更加复杂和难以控制；
• 不支持 Vue.set , Vue.delete 等；
• postMessage 只能同步字符串，不能 fn。

综合上面的缺点，在数据通信方面，没有使用 postMessage ，而是使用 vuex 替换掉 postMessage ，来完成 iframe 通信。

回答第二个疑问：使用 vuex 完成 iframe 数据通信是如何实现的呢？

这个问题的答案就是 uni-render 。通过它，可以做到让子窗口通过 iframe 展示的同时，父子窗口共享 store 。那这个 uni-render 是什么呢，可以继续往下读，将在下文给于第二个疑问的具体回答。

3.1 uni-render

uni-render 是一个让父子窗口可以不用 postMessage 就能共享 vue store 的技术方案。它包含以下关键内容：

• 将 iframe 当成一个 dom 节点；
• 父窗口渲染子窗口（ iframe ）暴