Skip to content

Commit

Permalink
feat: 新增了getAllApps方法,用于获取所有已经注册的子应用
Browse files Browse the repository at this point in the history
  • Loading branch information
bailicangdu committed Nov 24, 2021
1 parent bc4fa24 commit 5fd04cc
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 107 deletions.
65 changes: 10 additions & 55 deletions README.md
Expand Up @@ -32,84 +32,41 @@ micro-app is a micro front-end framework launched by JD Retail. It renders based

It is the lowest cost framework for accessing micro front-end, and provides a series of perfect functions such as JS sandbox, style isolation, element isolation, preloading, resource address completion, plugin system, data communication and so on.

The micro-app has nothing to do with the technology stack, and can be used in any front-end framework.
micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of micro application of the framework.

# How to use
The micro front-end is divided into base application and micro application. We list the modifications required for base application and micro application respectively, and introduce the use of micro-app in detail.
The micro front end is divided into a base application (also called main application) and a micro application.

## base application
> The base application takes the vue framework as an example
Here is a common example: the base application uses the Vue framework, uses history routing, the micro application uses the react framework, and uses hash routing. We list the modifications that need to be made by the base application and the micro application, and introduce the use of micro-app in detail.

1、Install
## base application
**1、Install**
```bash
yarn add @micro-zoe/micro-app
```

2、import at the entrance
**2、import at the entrance**
```js
// main.js
import microApp from '@micro-zoe/micro-app'

microApp.start()
```

3、Assign a route to the micro application
```js
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router' // vue-router@3.x
import MyPage from './my-page.vue'

Vue.use(VueRouter)

const routes = [
{
// 👇 Non-strict matching, /my-page/xxx will be matched to the MyPage component
path: '/my-page/*',
name: 'my-page',
component: MyPage,
},
]

export default routes
```

4、Use components in `my-page` pages
**3、Use components in page**
```html
<!-- my-page.vue -->
<template>
<div>
<h1>micro application</h1>
<!-- 👇 name is the application name, globally unique, url is the html address -->
<micro-app name='app1' url='http://localhost:3000/' baseroute='/my-page'></micro-app>
<!-- 👇 name is the application name, url is the html address -->
<micro-app name='app1' url='http://localhost:3000/'></micro-app>
</div>
</template>
```

> Please refer to [Routing Chapter](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/route) for the relationship between url and micro application routing
## micro application
> The micro application takes the react framework as an example
1、Add basename for route(If the base application is history route and the micro application is hash route, it is not necessary to set the baseroute, this step can be skipped)

```js
// router.js
import { BrowserRouter, Switch, Route } from 'react-router-dom'

export default function AppRoute () {
return (
// 👇 the micro application can get the baseroute issued by the base application through window.__MICRO_APP_BASE_ROUTE__
<BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
<Switch>
...
</Switch>
</BrowserRouter>
)
}
```

2、Set cross-domain support in the headers of webpack-dev-server.
**Set cross-domain support in the headers of webpack-dev-server**
```js
devServer: {
headers: {
Expand All @@ -122,8 +79,6 @@ Then micro front-end can be rendered normally, and the react micro application i

![image](https://img10.360buyimg.com/imagetools/jfs/t1/188373/14/17696/41854/6111f4a0E532736ba/4b86f4f8e2044519.png)

The above lists the usage of react and Vue framework. They can be combined freely. For example, the base application is react, the micro application is Vue, or the base application is Vue, the micro application is react, or both the base application and the micro application are react and Vue. The micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of micro application of the framework.

More detailed configuration can be viewed [Documentation](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/start).

# 🤝 Contribution
Expand Down
61 changes: 9 additions & 52 deletions README.zh-cn.md
Expand Up @@ -30,84 +30,43 @@
# 📖简介
micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

micro-app与技术栈无关,可以用于任何前端框架
micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型框架的子应用

# 如何使用
微前端分为基座应用和子应用,我们分别列出基座应用和子应用需要进行的修改,具体介绍micro-app的使用方式。
微前端分为基座应用(也可以叫做主应用)和子应用。

这里以一种比较常见的情况举例:基座应用使用vue框架,采用history路由,子应用使用react框架,采用hash路由,我们分别列出基座应用和子应用需要进行的修改,具体介绍micro-app的使用方式。

## 基座应用
> 基座应用以vue框架为例

1、安装依赖
**1、安装依赖**
```bash
yarn add @micro-zoe/micro-app
```

2、在入口处引入依赖
**2、在入口处引入依赖**
```js
// main.js
import microApp from '@micro-zoe/micro-app'

microApp.start()
```

3、分配一个路由给子应用
```js
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router' // vue-router@3.x
import MyPage from './my-page.vue'

Vue.use(VueRouter)

const routes = [
{
// 👇 非严格匹配,/my-page/xxx 都将匹配到 MyPage 页面
path: '/my-page/*',
name: 'my-page',
component: MyPage,
},
]

export default routes
```

4、在`MyPage`页面中嵌入微前端应用
**3、在页面中嵌入微前端应用**
```html
<!-- my-page.vue -->
<template>
<div>
<h1>子应用</h1>
<!-- 👇 name为应用名称,url为html地址 -->
<micro-app name='app1' url='http://localhost:3000/' baseroute='/my-page'></micro-app>
<micro-app name='app1' url='http://localhost:3000/'></micro-app>
</div>
</template>
```

> url和子应用路由的关系请查看[路由一章](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/route)
## 子应用
> 子应用以react框架为例
1、设置基础路由(如果基座应用是history路由,子应用是hash路由,不需要设置基础路由,这一步可以省略)

```js
// router.js
import { BrowserRouter, Switch, Route } from 'react-router-dom'

export default function AppRoute () {
return (
// 👇 设置基础路由,子应用可以通过window.__MICRO_APP_BASE_ROUTE__获取基座应用下发的baseroute
<BrowserRouter basename={window.__MICRO_APP_BASE_ROUTE__ || '/'}>
<Switch>
...
</Switch>
</BrowserRouter>
)
}
```

2、在webpack-dev-server的headers中设置跨域支持。
**在webpack-dev-server的headers中设置跨域支持。**
```js
devServer: {
headers: {
Expand All @@ -120,8 +79,6 @@ devServer: {

<img src="https://img12.360buyimg.com/imagetools/jfs/t1/196940/34/1541/38365/610a14fcE46c21374/c321b9f8fa50a8fc.png" alt="result" width='900'/>

上面列出了react和vue框架的使用方式,它们是可以自由组合的,比如基座应用是react,子应用是vue,或者基座应用是vue,子应用是react,或者基座应用和子应用都是react、vue。 micro-app对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型框架的子应用。

更多详细配置可以查看[官网文档](https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/start)

# 🤝 参与共建
Expand Down
1 change: 1 addition & 0 deletions docs/zh-cn/changelog.md
Expand Up @@ -15,6 +15,7 @@
- **New**

- 🆕 新增了`getActiveApps`方法,用于获取正在运行的子应用。
- 🆕 新增了`getAllApps`方法,用于获取所有已经注册的子应用。

- **Bug Fix**

Expand Down
5 changes: 5 additions & 0 deletions src/create_app.ts
Expand Up @@ -342,3 +342,8 @@ export function getActiveApps (): string[] {

return activeApps
}

// get all registered apps
export function getAllApps (): string[] {
return Array.from(appInstanceMap.keys())
}
1 change: 1 addition & 0 deletions src/index.ts
Expand Up @@ -12,4 +12,5 @@ export {
} from './interact'
export {
getActiveApps, // version >= 0.5.1
getAllApps, // version >= 0.5.1
} from './create_app'

0 comments on commit 5fd04cc

Please sign in to comment.