microapp-plugin-apploader

微应用框架应用加载器。

安装

安装采用 npm ：

npm install --save microapp-plugin-apploader

使用

应用加载器采用 Vue 插件方式开发，使用时导入插件并加载至 Vue 即可：

import MicroAppLoader from 'microapp-plugin-apploader'

Vue.use(MicroAppLoader);

它提供了两个标签：

• <ma-link> 用于链接至应用
• <ma-loader> 用于渲染加载器并加载应用

典型用法示例：

<div class="menu">
    <ma-link :to="{name: 'vue', path: 'https://cn.vuejs.org', opened: true}">
        <button>Vue</button>
    </ma-link>
    <ma-link :to="{name: 'router', path: 'https://router.vuejs.org/zh/', keepAlive: true}">
        <button>Vue Router</button>
    </ma-link>
</div>
<ma-loader style="height: 300px"/>

另外，该插件通过注入 $apploader 实例对象，提供了一些便捷的操作函数。

1. 注册应用

如果提前注册应用，则可以在 <ma-link> 中直接指定应用名。 提前注册可以通过 <ma-loader> 的 initData 属性，也可以通过 this.$apploader.register({...}) 函数实现：

<template>
    <div style="height: 300px">
        <div class="menu">
            <ma-link to="vue">
                <button>Vue</button>
            </ma-link>
            <ma-link to="router">
                <button>Vue Router</button>
            </ma-link>
            <ma-link to="vuex">
                <button>Vuex</button>
            </ma-link>
        </div>
        <ma-loader style="height: 280px" :initData="apps"/>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 此处示例使用 initData 注册
                apps: [
                    {name: 'vue', path: 'https://cn.vuejs.org', opened: true},
                    {name: 'router', path: 'https://router.vuejs.org/zh/', keepAlive: true}
                ]
            };
        },
        mounted () {
            // 此处示例使用函数注册
            this.$apploader.register({name: 'vuex', path: 'https://vuex.vuejs.org/zh/', opened: true});
        }
    }
</script>

应用支持的配置属性有：

• type 应用类型，url 或 vue(暂不支持)
• name 应用名
• path 路径
• keepAlive 是否保活。为 true 则再次打开时不会重新加载
• opened: 初始状态下是否打开

2. 调用 API 方法

该插件提供了一些 API 方法，以便于使用者动态灵活调用。所有 API 方法都被注入 this.$apploader 中，例如：

<template>
    <div style="height: 300px">
        <div class="menu">
            <ma-link to="vue">
                <button>Vue</button>
            </ma-link>
            <button @click="onClickRouter">Vue Router</button>
        </div>
        <ma-loader style="height: 300px" :initData="apps"/>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                apps: [
                    {name: 'vue', path: 'https://cn.vuejs.org', opened: true},
                    {name: 'router', path: 'https://router.vuejs.org/zh/', keepAlive: true}
                ]
            };
        },
        methods: {
            onClickRouter () {
                // 调用 open 方法打开应用
                this.$apploader.open('router');
            }
        }
    }
</script>

支持的 API 方法有：

• register 注册应用
• unregister 注销应用
• isRegistered 检测应用是否已注册
• open 打开应用
• close 关闭应用
• refresh 刷新当前打开的应用
• getCurrent 获取当前应用名