micro App 子服务发起请求调取基座页面并回传数据的方法

第一步

1.1.子应用

utils页面中的方法声明

export function e_microAppDispatch(param: any = {}) {
    // 微服务运行状态
    const microAppStatus = (window as any).__MICRO_APP_ENVIRONMENT__
    if (microAppStatus == undefined || microAppStatus == false) {
        param.success && param.success()
    } else {
        (window as any).microApp.forceDispatch(param)
    }
}

1.2 子应用页面引入并调用utils中的方法

import { E_Msg, e_microAppDispatch } from '@utils'  

 e_microAppDispatch({
            dataType: 'checkFormStatus',//用于判断是什么类型的通信
            onSuccess: (res) => { //成功回调 可以有回参也可以没有  这些函数均可以自定义 【增加删除】
                //回调成功后的一些逻辑判断
            },
            fail: () => {//失败回调 可以有回参也可以没有
                //回调失败后的一些逻辑判断
            },
        })

第二步

2.1 基座服务中

2.1.1 声明一个基座服务的页面 index.vue 及分类的方法

 <div v-loading="loading" class="ever-main-micro-app">
        <micro-app
            :name='microAppName'
            :url='microAppUrl'
            iframe
            keep-alive
            @datachange='handleDataChange'
            @created='created'
            @beforemount='beforemount'
            @mounted='mounted'
            @unmount='unmount'
            @error='error'
            class="ever-main-micro-app"
        /> 
        <SelectUser  ref="selectUserRef" @success="finishPersonChoose" />//获取子服务要调取的页面ref
    </div>

import { esiImpl } from './esi'

const handleDataChange = (e: CustomEvent): any => {
    const data = e.detail.data
    microdata.value = e.detail.data 
    //用户选择弹窗
     if (data.dataType === 'selectUser') {
        // 用户选择弹窗，把弹窗的ref传递过去
         data.selectUserRef = selectUserRef
    }
    esiImpl(data.dataType, data)
}

function finishPersonChoose(res: any) {//基座调用成功或失败的回调 传回子应用
    microdata.value.onSuccess(res)
}

2.1.2 esilmpl方法实现

import { showApproval } from './show-approval'
import { selectUser } from './select-user'
const esiConfig = { 
    /** 审批查看 */
    showApproval,
    //用户选择框
    selectUser,
}

/**
 *  通讯函数
 * @param code
 * @param data
 */
export function esiImpl(code: string, data: any) {
    if (typeof esiConfig[code] === 'function') {
        esiConfig[code](data)
    } else {
        console.error('没有此通讯函数！！！')
    }
}

2.1.3 selectUser 方法实现

export interface selectUserParam {
    isMultiple: boolean
    selectUserRef: any // 弹窗
    successInfo: any[]
    onSuccess?: (data: any) => {}

    fail?: (data: any) => {}
}
export function selectUser(data: selectUserParam) {
    data.selectUserRef.value.startChoose(data.isMultiple)
}