Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

microapp-plugin-apploader

1.0.1 • Public • Published

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 获取当前应用名

Keywords

Install

npm i microapp-plugin-apploader

DownloadsWeekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

12 kB

Total Files

5

Last publish

Collaborators

  • avatar
  • avatar