# my-micro-app

**Repository Path**: willwong/my-micro-app

## Basic Information

- **Project Name**: my-micro-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-18
- **Last Updated**: 2022-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# micro-app 微前端

参考：[micro-app](https://zeroing.jd.com/)

## 起步


|基座|内嵌子应用|
|----|----|
|<img src="./README-img/1.png">|<img src="./README-img/2.png">|
## 路由

### 路由配置

- 1、基座是hash路由，子应用也必须是hash路由
- 2、基座是history路由，子应用可以是hash或history路由

### url和子应用路由
micro-app的url属性只是html的地址，它的作用就是加载html资源和子应用的路由没有关系。

![p3](./README-img/3.png)


## 数据通信

参考：[数据通信](https://zeroing.jd.com/docs.html#/zh-cn/data?id=%e6%95%b0%e6%8d%ae%e9%80%9a%e4%bf%a1)

（1）子应用通过环境变量判断当前所处环境是否是嵌入环境，通常可用于子应用做一些模块的显示隐藏处理。

```js
if (window.__MICRO_APP_ENVIRONMENT__) {
  console.log('我在微前端环境中子应用')
}
```
（2）基座应用向子应用发送数据

- 方式1：通过data属性发送数据

```Vue
<template>
  <micro-app
    name='my-app'
    url='xx'
    :data='dataForChild' // data只接受对象类型，数据变化时会重新发送
  />
</template>

<script>
export default {
  data () {
    return {
      dataForChild: {type: '发送给子应用的数据'}
    }
  }
}
</script>
```

- 方式2：手动发送数据

手动发送数据需要通过name指定接受数据的子应用，此值和<micro-app>元素中的name一致。

```js
import microApp from '@micro-zoe/micro-app'

// 发送数据给子应用 my-app，setData第二个参数只接受对象类型
microApp.setData('my-app', {type: '新的数据'})
```

（3）子应用获取来自基座应用的数据

- 方式1：```getData()``` 直接获取

```js
const data = window.microApp.getData() // 返回基座下发的data数据
```

- 方式2：绑定监听函数

```js
function dataListener (data) {
  console.log('来自基座应用的数据', data)
}

/**
 * 绑定监听函数，监听函数只有在数据变化时才会触发
 * dataListener: 绑定函数
 * autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
 * !!!重要说明: 因为子应用是异步渲染的，而基座发送数据是同步的，
 * 如果在子应用渲染结束前基座应用发送数据，则在绑定监听函数前数据已经发送，在初始化后不会触发绑定函数，
 * 但这个数据会放入缓存中，此时可以设置autoTrigger为true主动触发一次监听函数来获取数据。
 */
window.microApp.addDataListener(dataListener: Function, autoTrigger?: boolean)

// 解绑监听函数
window.microApp.removeDataListener(dataListener: Function)

// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.microApp.clearDataListener()
```

……