@jv/ark-component

方舟组件

名词解释

主应用: 当前使用微前端的页面

子应用: 通过微前端访问的页面

install

  npm i @jv/ark-component -S

主应用

AcPreviewMain 导出/预览主应用组件

与 PreviewSub 配套使用

<template>
    <AcPreviewMain
        url="http://127.0.0.1:8080/export.html"
        :componentData="componentData"
        @xxx-event="onXxxEvent"
    ></AcPreviewMain>
</template>

<script lang="ts">

import { AcPreviewMain } from "@jv/ark-component/dist/main";

export default {
  components:{AcPreviewMain},
  data:{
    return {
      componentData:{
        name:'ComponentName', /* 组件名 */
        props:{/* 组件参数 */}
      }
    }
  },
  methods:{
    onXxxEvent(){
      // 导出组件emit的事件
      console.log('xxxEvent');
    }
  }
}
</script>

属性

| 属性名 | 描述 | 类型 | 默认值 | | ------------- | --------------- | -------- | ------------------------------------------------------------------------ | | url | 子应用 url | string | | | name | 子应用唯一 name | string | | | sync | 是否同步 url | boolean | false | | alive | 是否保活 | boolean | false | | fetch | 处理跨域 | Function | (url,options)=>window.fetch(url,{...options,credentials: "same-origin"}) | | componentData | 组件信息 | Object | {} |

useSyncMain 同步数据主应用函数

与 syncSub 配套使用

import { useSyncMain } from "@jv/ark-component/dist/main";


/**
 *  syncUrl : 同步页url
 *
 *  callback: 处理同步数据回调函数
 *
 **/

useSyncMain(syncUrl: string, callback: SyncCallBack);

子应用

PreviewSub 预览/导出子应用组件

必须要全局注册业务组件,不然会导致无法渲染组件

与 AcPreviewMain 配套使用

<PreviewSub></PreviewSub>

<script lang="ts">

import { PreviewSub } from "@jv/ark-component/dist/sub";

export default {
  components:{PreviewSub},
}
</script>

syncSub 数据同步子应用函数

在微前端子应用中使用 , 与 useSyncMain 配套使用

import { syncSub } from "@jv/ark-component/dist/sub";
/*
*
*  components: 组件列表
*
*  meta: 应用信息
*/

syncSub(components: ComponentConfig[], meta: Meta)

数据结构

export enum ProjectType {
    H5 = 'h5',
    PC = 'pc',
    WECHAT = 'wechat',
}

export interface Meta {
    name: string; // 业务名/应用名
    icon: string; // 应用图标
    desc: string; // 业务介绍
    exportUrl: string; // 输出组件微前端子应用的url
    previewUrl: string; // 模拟器的url
    appUrl: string; // 目标页面地址生成规则
    appTestUrl: string; // 目标页面测试环境地址生成规则
    type: ProjectType; // 业务类型
}

export interface ComponentConfig {
    name: string; // 组件名
    title: string; // 组件中文名
    creator?: string; // 组件作者（用账号系统上的英文名）
    // 描述
    desc?: string; // 描述、简介、备注
    group: string; // 分组名
    icon: string; // 组件图标
    config: {
        props?: JSONSchema4; // 表单数据
        style?: JSONSchema4; // 样式数据
        event?: JSONSchema4; // 事件数据
    };
    report?: {
        firstClassName: string; // 一级名，'运营'
        secondClassName: string; // 二级名， '可视化创造'
        rows: buryReportPointItem[]; // 用于同步海雀平台的数据
    };
    readme?: string; // 组件说明，markdown文件的string
    valid?: boolean; // 是否可用，不可用时，编辑器不展示
}

规划

[] 主应用指定子应用事件处理