@blueking/bk-weweb NPM

BlueKing Bk-Weweb

Release

English | 简体中文

Overview

️🔧 BlueKing bk-weweb 是一款跨框架、无依赖、可伸缩的无任何侵入的支持微应用、微模块统一的轻量微前端框架工具

Features

Basic 支持多应用、多模块、及混合应用
Basic bk-weweb webcomponent
Basic 丰富简单的hooks
Basic 支持预加载资源
Basic 主应用与子应用、子模块之间共享缓存资源

Getting started

Installation

$ npm install @blueking/bk-weweb

Usage

更多用法参考：使用文档

基础用法

import '@blueking/bk-weweb'

// 微应用
<bk-weweb url='http://www.baidu.com' />

// 微模块
<bk-weweb mode='js' url='http://xxx.xx.x.js' />

自定义微应用容器

1. 自定义微应用容器

<template>
  <div class="bk-weweb">
    <div ref="instanceWrap"/>
  </div>
</template>
<script lang="ts">
import {defineComponent, onBeforeUnmount, onMounted, ref} from 'vue'
import {loadApp, mount, unmount} from '@blueking/bk-weweb'
export default defineComponent({
  setup() {
    const instanceWrap = ref<HTMLElement>(null)
    const appKey = 'testApp'
    onMounted(async () => {
        await loadApp({
          url: 'http://localhost:8002/',
          id: appKey,
          showSourceCode: true,
          scopeCss: true,
          scopeLocation: true,
          setShodowDom: true,
          keepAlive: false,
          data: {
            
          }
        })
      mount(appKey, instanceWrap.value)
    })
    onBeforeUnmount(() => {
      unmount(appKey)
    })
    return {
      instanceWrap
    }
  }
})
</script>
<style lang="scss">
  .bk-weweb {
    display: flex;
    width: 800px;
    height: 200px;
  }
</style>

2. 自定义微模块容器

<template>
  <div class="bk-weweb">
    <div ref="instanceWrap"></div>
  </div>
</template>
<script lang="ts">
import {defineComponent, onBeforeUnmount, onMounted, ref} from 'vue'
import {activated, deactivated, loadInstance} from '@blueking/bk-weweb'
export default defineComponent({
  setup() {
    const instanceWrap = ref<HTMLElement>(null)
    const id = 'test-instance'
    onMounted(async () => {
      await loadInstance({
        //   initSource: [
        //     'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js',
        //     'https://cdn.jsdelivr.net/npm/echarts@4.8.0/dist/echarts.min.js'
        // ],
          url: 'http://localhost:8004/index.js',
          mode: 'js',
          id: 'test-instance',
          container: instanceWrap.value!,
          showSourceCode: true,
          scopeCss: true,
          scopeJs: true,
          keepAlive: false,
        })
      activated(id, instanceWrap.value)
    })
    onBeforeUnmount(() => {
      deactivated(id)
    })
    return {
      instanceWrap
    }
  }
})
</script>
<style lang="scss">
  .bk-weweb {
    display: flex;
    flex-direction: column;
    width: 800px;
    height: 800px;
  }
</style>