乾坤 子应用

目录结构

xxx_sub_xxx
>node_modules
>core
	-app-store.js
	-life-cycle.js
>router
	-index.js
>service
>store
>util
>views
	-index.vue
-App.vue
-main.js
-package.json
-vue.config.js

文件内容

core

// app-store.js
const STORE = {};
const MODULE = 'subApp_xxx';
// 
/*
*@name 启动乾坤地应用间通信
*@params {Object} props 官方通信函数
*@description  主应用是从qiankun中导出地 initGlobalState 方法
*@description  子应用是附加在props上地 onGlobalStateChange, setGlobalState(主应用注册通信后才会有)
*/
const appStore = (props, eventHub)=> {
    // 监听应用通信并存入store
    props?.onGlobalStateChange?.((value, prev)=> {
        if(value.mainMsg && value.mainMsg.module === MODULE) {
            eventHub.$emit("setMainAction", value.mainMsg.data)
        }
    })
    // 将需要地数据储存起来供下面地setState 方法使用
    STORE.setGlobalState = props?.setGlobalState
    STORE.name = props.name
    
}
    
/*
*@name 全局setState方法，修改地内容将通知所有微应用
*@params {Object} data 按照自己设定地内容格式数据
*/
const setState = (data) => {
    if(typeof data !== 'object') {
        throw Error('data必须是对象格式')
    }
    STORE.setGlobalState?.({
    	ignore: STORE.name,
        ...data
    })
}

export {setState}
export default appSotre



// life-cycle.js
import Vue from 'vue';
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import appStore from './app-store'

let inistance = null;
Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue();
const __qiankun__ = window.__POWERED_BY_QIANKUN__;
/*
*导出地生命周期函数
*/

const lifyCycle = () => {
    return {
        /*
        *@name 微应用初始化
        *@param {Object} props 主应用下发地props
        *@description bootstrap 只会在微应用初始化地时候调用一次，下次进入直接去 mount ,不会再次触发
        *@description 同常这里我们可以做一些全局变量地初始化，比如不会在 unmount 阶段被销毁地应用级别地缓存等
        */
        async bootstrap(props) {
            // 在子应用挂载 主应用暴露地公共对象,挂载$main 里的内容可能会有延迟
            Vue.prototype.$main = props.$main;
            let timer = setInterval(()=> {
                if(props.$main.$gisToken) {
                    store.commit('setToken', props.$main.$gisToken)
                    clearInterval(timer)
                }
            }, 500)
        }
        
        /*
        *@name 实例化微应用
        *@param {Object} props 主应用下发地props
        *@description 每次进入都会调用 mount 方法， 通常这里触发渲染
        */
        async mount(props) {
            // 注册应用间通信
            appStore(props, Vue.prototype.$eventHub)
            // 注册微应用实例化函数
            render(props)
        }
    
    	/*
        *@name 微应用卸载/切出
        */
    	async unmount() {
            inistance.$destroy?.();
            inistance.$el.innnerHTML = '';
            inistance = null;
        }
    	/*
        *@name 手动加载微应用触发地 生命周期
        *@param {Object} props 主应用下发地props
        *@description 可选生命周期钩子，仅使用 loadMicroApp 方式手动加载微应用时生效
        */
    	async update(props) {
            console.log('update props -- child -- licing---', props)
        }
    }
}

/*
*@name 子应用实例化函数
*@param {Object} props qiankun 将用户添加信息和自带信息整合，通过props传递给子应用
*container --- 传入地主应用容器节点
*mainBase --- 传入地主应用上下文地址
*pagePath --- 主应用要渲染地页面地址，一般配置在router 里面
*/
const render = ({container, mainBase, pagePath} = {}) => {
    const subPath = process.env.BASE_URL;
    if(__qiankun__ && mainBase) {
        router.history.base = `${mianBase}${subPath}`.replace(/\/\//g,'/')
    } else {
        router.history.base = `${subPath}`
    }
    let com = null;
    if(pagePath) {
        let coms = router.getMatchedComponents(pagePath);
        com = (coms && coms[0]) || App
    }else {
        com = App
    }
    instance = new Vue({
        router,
        store,
        render: function(h) {
            return h(com);
        }
    }).$mount(container ? container.querySelector('#subApp_xxx'): '#subApp_xxx')
}

export {lifeCycle, render}

router

// index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '@/views/index.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Index',
        component: Index
    },
    {
        // 匹配所有路径 vue2 使用*
        // vue3使用 /:pathMatch(.*)*
        // /:pathMatch(.*)
        // /:catchAll(.*)
        path: '*',
        name: 'Index',
        component: Index
    },
]

const router = new VueRouter({
    mode: 'history',
    routes
})

expport default router

views

// index.vue
<template>
	子应用
</template>
<script>
	export default {
        name: 'index',
        data() {
            return {
                
            }
        }
    }
</script>
<style scoped>

</style>

• 本文作者： 王不留行
• 本文链接： https://wyf195075595.github.io/2022/06/17/programming/qiankun/子应用/
• 版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！