@flyriselink/pai-micro-app

介绍

@flyriselink/pai-micro-app是基于@micro-zoe/[email protected]，针对flyriselink项目实践的封装与增强，主要增强了子应用的认证授权、启动状态、标题传递、样式的计算与传递。同时，api明确划分了基座（base）、子应用（child），避免使用时的混淆，不影响原有的api使用。

依赖

• @micro-zoe/micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。

• @flyriselink/vue-router是flyriselink基于[email protected]，针对在二级目录下使用@micro-zoe/micro-app的路由支持。

• @flyriselink/pai-auth-api是flyriselink基于认证中心的相关api封装。

命令

安装

npm install

启动示例

# 启动基座 -> http://localhost:91/main
npm run main:dev

# 启动子应用 -> http://localhost:92/child/apps/a
npm run child:dev

部署示例

# 构建基座 -> ./demo-main
npm run main:demo

# 构建子应用 -> ./demo-child
npm run child:demo

nginx.conf 示例

server {
    listen 91;
    server_name  localhost;
    index index.php index.html index.htm index.jsp;

    location /main {
        alias   X:/xxxxx/pai-micro-app-ui/demo-main;
        try_files $uri $uri/=403 /main/index.html;
    }

    # 代理前缀为“/xxx-api”的请求
    location ~* ^\/[^\/]+-api {
        rewrite ^\/([^\/]+-api)\/(.*) http://39.108.55.230:31000/$1/$2;
    }
}

server {
    listen 92;
    server_name localhost;
    add_header Access-Control-Allow-Origin *;

    location /child {
        alias   X:/xxxxx/pai-micro-app-ui/demo-child;
        try_files $uri $uri/=403 /child/index.html;
    }
}

构建库文件

# 构建库文件 -> ./dist
npm run prod

# 分析库文件
npm run an

使用说明

基座：初始化

/* 可以参考 src\website\entry\main.js */

import Vue from 'vue'

// 初始化路由
import VueRouter from '@flyriselink/vue-router'
Vue.use(VueRouter)

// 初始化微应用
import PaiMicroApp from '@flyriselink/pai-micro-app'
Vue.use(PaiMicroApp, /* { microApp: {} } */)
// microApp相当于microApp.start(options)中的options
// 唯一差别是options.tagName默认为"micro-app-pai"（原始tagName为"micro-app"）

基座：组件使用

p-micro-app 保留了原 micro-app 的api，增加了以pai-开头的api。

<!-- 为了代码整洁，示例把原有api用v-bind、v-on定义 -->
<!-- 具体使用的时候，根据个人习惯定义即可 -->
<p-micro-app
    v-bind="{ name: microAppName, url }"
    v-on="{ created: appCreated, mounted: appMounted, datachange: appDataChange }"
    :pai-top="top"
    :pai-bottom="bottom"
    :pai-header-height="headerHeight"
    :pai-footer-height="footerHeight"
    :pai-title="title"
    :pai-auth="auth"
    @pai-launched="paiLaunched">
</p-micro-app>

{
    data() {
        // 相关api，文档后面会详细说明
        return {
            microAppName: 'child', // 子应用：名称
            url: 'http://localhost:92/xxxx', // 子应用：地址
            //
            top: 53, // 子应用：内容顶端的距离（内置累加计算），将影响相关CSS变量
            bottom: 53, // 子应用：内容底端的距离（内置累加计算），将影响相关CSS变量
            headerHeight: 53, // 子应用：顶栏高度，将影响相关CSS变量
            footerHeight: 53, // 子应用：底栏高度，将影响相关CSS变量
            //
            title: '基座标题', // 基座页面标题，子应用可以通过api同步获取
            // @flyriselink/pai-auth-api的实例对象，或者满足@flyriselink/pai-auth-api的AuthApiInterface定义的对象
            auth: {}, // 用于支持子应用调用pai获得认证中心相关信息
        }
    },
    methods: {
        appCreated() {
            console.log('appCreated')
        },
        appMounted() {
            console.log('appMounted')
        },
        appDataChange() {
            console.log('appDataChange')
        },
        // 由子应用调用api，通知基座页面已经装备好。
        // 主要可以用于防止：子应用路由未处理完毕，此时操作基座路由，会产生路由冲突（基座、子应用路由实例目前是互相独立的存在）。
        paiLaunched() {
            console.log('paiLaunched')
        }
    },
}

子应用：CSS变量继承

使用CSS变量，记得定义默认值，以免样式出错。例如，“var(--pai-micro-app-top-total, 0px)”

• --pai-micro-app-top - 子应用：内容顶端的距离
• --pai-micro-app-bottom - 应用：内容底端的距离
• --pai-micro-app-top-total - 子应用：内容顶端的距离（嵌套累加）
• --pai-micro-app-bottom-total - 子应用：内容底端的距离（嵌套累加）
• --pai-micro-app-height - 子应用：最佳（满屏）内容高度（嵌套累加），相当于“calc(100vh - var(--pai-micro-app-top-total, 0px) - var(--pai-micro-app-bottom-total, 0px))”
• --pai-micro-app-header-height - 子应用：顶栏高度，主要用于对全局交互（例如提示框）样式调整
• --pai-micro-app-footer-height - 子应用：底栏高度，主要用于对全局交互（例如返回顶部按钮）样式调整

基座：API

// 若使用过Vue.use(PaiMicroApp)，PaiMicroApp将同时会挂载到Vue.prototype
// 则组件内可以用过this.$paiMicroApp访问PaiMicroApp
import PaiMicroApp from '@flyriselink/pai-micro-app'

// PaiMicroApp.base.microApp.xxx 相当于 
// microApp.xxx（import microApp from '@micro-zoe/micro-app'）

子应用：API

// 若使用过Vue.use(PaiMicroApp)，PaiMicroApp将同时会挂载到Vue.prototype
// 则组件内可以用过this.$paiMicroApp访问PaiMicroApp
import PaiMicroApp from '@flyriselink/pai-micro-app'

// PaiMicroApp.child.microApp.xxx 相当于 
// window.microApp.xxx

// 在上述基础上增加下面这些api：
// 通知基座页面已经装备好，主要可以用于防止：子应用路由未处理完毕，此时操作基座路由，会产生路由冲突（基座、子应用路由实例目前是互相独立的存在）。
PaiMicroApp.child.launched()
// 获取基座页面标题
PaiMicroApp.child.getTitle()
// 代理@flyriselink/pai-auth-api实例对象的api，主要用于子应用没有使用@flyriselink/pai-auth-api的情况。
// 若子应用初始化了@flyriselink/pai-auth-api，直接只用其实例对象api即可，无需使用下面的api。
PaiMicroApp.child.login()
PaiMicroApp.child.logout()
PaiMicroApp.child.getToken()
PaiMicroApp.child.getUserInfo()
// 基座定义子应用的appName
PaiMicroApp.child.appName

基础API

// 若使用过Vue.use(PaiMicroApp)，PaiMicroApp将同时会挂载到Vue.prototype
// 则组件内可以用过this.$paiMicroApp访问PaiMicroApp
import PaiMicroApp from '@flyriselink/pai-micro-app'

// 当前是否运行在微前端的子应用
// 相当于返回了window.__MICRO_APP_ENVIRONMENT__的值
PaiMicroApp.isMicro()

// 相当于返回了window.__MICRO_APP_BASE_ROUTE__的值
PaiMicroApp.baseroute()

开发日志

v0.0.9

• 修复异常

v0.0.8

• 修复异常
• 路由同步（改为单向：子应用同步基座）

v0.0.7

• 调整install的配置项
• 实现路由同步
• 增加Api：baseroute

开发计划

• 路由阻止（待定）