526互联

修复微前端无界[wujie]子应用window属性值在初始化后不再变化的问题

发布时间 2023-12-19 11:13:34作者: 脆皮鸡

问题

部分的组件库（例如antd）使用到了window.innerWidth和window.innerHeight属性，可无界框架在初始化时仅将主应用的innerWidth和innerHeight属性赋值给子应用，导致后续不管主应用如何变化，子应用的这两个属性无法跟随变化，也就导致子应用使用的这些组件库表现异常。
image

解决方式

借用作者在交流群中的说明，使用Object.defineProperty重写对应属性的getter即可image

  • 故在此借助无界的插件系统，可以按照下面的方式进行属性指向修正。
  • 不只是innerWidth和innerHeight，其他属性也可以这样处理。
<script setup>
import WujieVue from "wujie-vue3";
const plugins = [
  {
    // 在子应用所有的js之前
    jsBeforeLoaders: [
      {
        callback(appWindow: typeof window) {
          // 后续只需要在这里添加需要重写的属性即可
          const propsNeedAdjust = ["innerWidth", "innerHeight"];
          const adjustPropsProxy = (prop: string) => {
            Object.defineProperty(appWindow, prop, {
              get: function () {
                if (appWindow.__POWERED_BY_WUJIE__) {
                  return appWindow.parent[prop];
                } else {
                  // 返回原始值
                  return appWindow[prop];
                }
              }
            });
          };
          propsNeedAdjust.forEach(prop => {
            adjustPropsProxy(prop);
          });
        }
      }
    ]
  }
];
</script>

<template>
  <WujieVue :plugins="plugins" />
</template>