项目中接入 micro-app---微前端基座应用和子应用之间的数据通信(详细）

i @micro-zoe/micro-app --save

2.在入口文件中引入

import microApp from '@micro-zoe/micro-app'
()

异步函数importModule来导入图标字体样式表，避免可能的样式冲突。

之后判断是否在微信小程序基座下运行。如果不在基座下运行则导入模块。如果在基座下运行，则会添加一个数据监听器，监听基座下发的数据变化。当数据中的path字段发生变化时（即用户可能需要跳转到新的页面），就会通过方法进行页面跳转。

async function importModule() {

const module = await import('./iconfont/');

return module;

}

let oldPath = null;

if (!window.__MICRO_APP_BASE_ROUTE__) {

importModule();

} else {

// 监听基座下发的数据变化

((data) => {

// 当基座下发跳转指令时进行跳转

if ( && !== oldPath) {

oldPath = ;

({path:, query:});

}

});

}

4 路由配置

//router

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "home",
    component: () => import("@/components/"),
    children: [
      {
        path: "/",
        name: "hello",
        component: () => import("@/views/"),
      },
      // react-app 子应用路由
      {
        path: "/reactApp/:page*",
        name: "reactApp",
        component: () => import("@/views/MicroApp/"),
      },
    ],
  },
];
 
const router = createRouter({
  history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ ||.BASE_URL),
  routes,
});
const microPushAndReplace= (target, prop) => {
    return (to) => {
        if (window.__MICRO_APP_ENVIRONMENT__) {
            // 判断处于微前端环境
            const baseRouter = ().router; // 获取主应用路由
            let microPath = '';
            if (typeof to === 'string') {
               
            } else if (typeof to === 'object' && ) {
              
            } else if (typeof to === 'object' && ) {
               
            }
            target[prop](to);
            setTimeout(() => {
                ({
                    path: microPath,
                    query: ,
                });

            }, 0);
        } else {
            return target[prop](to);
        }
    };
};

// 代理router，拦截push和replace方法，如果是微前端环境则触发主应用跳转
const routerProxy = new Proxy(router, {
    get(target, prop, receiver) {
        if (prop === 'push' || prop === 'replace') {
            return microPushAndReplace(target, prop);
        }
        return (target, prop, receiver);
    },
});

export default routerProxy;

export default router;

5接入子应用

//也可以在通过 = window.__MICRO_APP_ENVIRONMENT__;区分子应用


<router-view v-slot="{ Component }" v-if=“isMicroApp”>
<!-- 微前端的默认缓存 -->
 <keep-alive><component :is="Component" /></keep-alive>
 </router-view>

 setup() {
        const isMicroApp = ref(false);
        //获取url路径判断是否隐藏页签(1)
        const hideMenu = ('hideMenu') === 'true';
        onMounted(() => {
             = window.__MICRO_APP_ENVIRONMENT__;
            const DefaultSystem = getLocal(`#项目标识1#/${}`) || {};
            if ((DefaultSystem) === '{}' && !hideMenu) {
            }
            // hideMenu 隐藏菜单，顶部栏
            if (hideMenu) {
                ('.app-header'). = 'none';
                ('.app-side'). = 'none';
            }
        });
        const aiUrl = ;
        const keepLive = computed(() => {
            return ;//获取路由页签
        });

        return {
            aiUrl,
            locale,
            keepLive,
            hideMenu,
            warehouseChange,
            lotsHeader,
            isMicroApp,
        };
    },

//可以新建vue文件

//  <h1>react-app 子应用</h1>
//  <!-- name(必传)：应用名称
//  url(必传): 应用地址
//  baseroute(可选)：基座应用分配给子应用的基础路由
<template>
  <micro-app
    name="react-app"
    url="http://localhost:3000/"
    baseroute="/reactApp"
  ></micro-app>
</template>

//6.在路由或者登录页面获取相关系统信息存在store

export default {
    state: {
        user: {},
        authority: '',
        appId: ,
        currentTenant: {},
        currentWarehouse: {},
        ...,
        ...,
    },
    getters: {
        user: state => ,
        appId: state => ,
        authority: state => ,
        menus: state => {
            if () {
                return ;
            }
            return [];
        },
        lang: state => ,
        locale: state => ,
        langInfo: state => ,
        isShowLang: state => ,
        tenantInfo: state => ,
        currentTenant: state => ,
        currentWarehouse: state => ,
        applicationCode: state => {
            const currentPath = (item => {
                if () {
                    return () >= 0;
                }
                return false;
            });
            return currentPath ?  : '';
        },
        supplier: state => ,
        ...,
        ...,
        ...,
        ...,
        ...,
    },
    mutations: {
        updateUserInfo(state, user) {
             = user;
        },
        updateAuthority(state, authority) {
             = authority;
        },
        updateTenant(state, _tenantInfo) {
             = _tenantInfo;
        },
        ...,
        ...,
        ...,
        ...,
        ...,
    },
    actions: {
        initTenantsData({ dispatch, commit }) {
           
        },
        initMicro({ commit }) {
            const data = ();
            commit('updateUserInfo', );
            commit('updateTenant', );
            commit('updateCurrentWarehouse', );
        },
        initSources({ commit, state }) {
            const applicationCode = '';
            commit('updateCurrentApplicationCode', applicationCode);
          
        },
        ...,
        ...,
        ...,
        ...,
    },
};

一、基座应用向子应用发送数据
方式1：通过 data 属性发送数据

<template>
  <micro-app
    name='appname-vue3'
    :url='url'
    baseroute='/app-vue3'
    :data='microAppData' // data只接受对象类型，数据变化时会重新发送
  />
</template>
 
<script>
export default {
  name: 'vue3',
  data () {
    return {
      url: 'http://localhost:4009/',
      microAppData: {msg: '来自基座的数据'}
    }
  },
 methods: {
        initPage() {
            ('report', { path: this.$ });
            const {
                user,
                appId,
                authority,
            } = this;
            = {
                user,
                authority,
            };
        },
    },

    watch: {
        $route() {
            ();
        },
        immediate: true,
    },
    mounted() {
        ();
    },
}
</script>

方式2：手动发送数据

手动发送数据需要通过 name 指定接受数据的子应用，此值和 <micro-app> 元素中的 name 一致。

import microApp from '@micro-zoe/micro-app'
 
// 发送数据给子应用 appname-vue3，setData第二个参数只接受对象类型
('appname-vue3', {msg: '新的数据'})

二、子应用获取来自基座应用的数据
micro-app 会向子应用注入名称为 microApp 的全局对象，子应用通过这个对象和基座应用进行数据交互。

方式1：直接获取数据
const data = () // 返回基座下发的data数据

方式2：绑定监听函数
function dataListener (data) {
  ('来自基座应用的数据', data)
}
 
/**
 * 绑定监听函数，监听函数只有在数据变化时才会触发
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 * !!!重要说明: 因为子应用是异步渲染的，而基座发送数据是同步的，
 * 如果在子应用渲染结束前基座应用发送数据，则在绑定监听函数前数据已经发送，在初始化后不会触发绑定函数，
 * 但这个数据会放入缓存中，此时可以设置autoTrigger为true主动触发一次监听函数来获取数据。
 */
(dataListener: Function, autoTrigger?: boolean)
 
// 解绑监听函数
(dataListener: Function)
 
// 清空当前子应用的所有绑定函数(全局数据函数除外)
()

三、子应用向基座应用发送数据

// dispatch只接受对象作为参数
({type: '子应用发送的数据'})

四、基座应用获取来自子应用的数据

方式1：直接获取数据

import microApp from '@micro-zoe/micro-app'
 
const childData = (appName) // 返回子应用的data数据
方式2：监听自定义事件 datachange

<template>
  <micro-app
    name='appname-vue3'
    :url='url'
    baseroute='/app-vue3'
    :data='microAppData' // data只接受对象类型，数据变化时会重新发送
    @datachange='handleDataChange' // 数据在事件对象的  字段中，子应用每次发送数据都会触发 datachange
  />
</template>
 
<script>
export default {
  name: 'vue3',
  data () {
    return {
      url: 'http://localhost:4009/',
      microAppData: {msg: '来自基座的数据'}
    }
  },
  methods: {
    handleDataChange (e) {
      ('来自子应用的数据：', )
    }
  }
}
</script>

方式3: 绑定监听函数

import microApp from '@micro-zoe/micro-app'
 
function dataListener (data) {
  ('来自子应用的数据', data)
}
 
/**
 * 绑定监听函数
 * appName: 应用名称
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 */
(appName: string, dataListener: Function, autoTrigger?: boolean)
 
// 解绑监听my-app子应用的函数
(appName: string, dataListener: Function)
 
// 清空所有监听appName子应用的函数
(appName: string)

五、全局数据通信
全局数据通信会向基座应用和所有子应用发送数据，在跨应用通信的场景中适用。

1、发送全局数据

基座应用：

import microApp from '@micro-zoe/micro-app'
 
// setGlobalData只接受对象作为参数
({type: '全局数据'})
子应用：

// setGlobalData只接受对象作为参数
({type: '全局数据'})
2、获取全局数据

基座应用：

import microApp from '@micro-zoe/micro-app'
 
// 直接获取数据
const globalData = () // 返回全局数据
 
function dataListener (data) {
  ('全局数据', data)
}
 
/**
 * 绑定监听函数
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 */
(dataListener: Function, autoTrigger?: boolean)
 
// 解绑监听函数
(dataListener: Function)
 
// 清空基座应用绑定的所有全局数据监听函数
()

子应用：

// 直接获取数据
const globalData = () // 返回全局数据
 
function dataListener (data) {
  ('全局数据', data)
}
 
/**
 * 绑定监听函数
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 */
(dataListener: Function, autoTrigger?: boolean)
 
// 解绑监听函数
(dataListener: Function)
 
// 清空当前子应用绑定的所有全局数据监听函数
()

秒客网

项目中接入 micro-app---微前端基座应用和子应用之间的数据通信(详细）

相关文章