# microapp-cli

**Repository Path**: borderWusu/microapp-cli

## Basic Information

- **Project Name**: microapp-cli
- **Description**: microapp搭建的简易cli
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-12-18
- **Last Updated**: 2024-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 试用MicroApp微前端框架

#### 此示例提供了一个大体方案，主要由一个大文件包裹三个文件组成，大文件用来管理全局包，内部其中 common 是公共文件库，microapp-cli和vite-project为父子应用双系统，只处理了vite + vite项目，react项目还需要在此基础上再加处理

> 使用pnpm来管理依赖文件

### 项目结构
- microapp-parent
  - pnpm.workspace.yaml  管理 pnpm install时 需要拉取哪些项目的依赖
  - package.json  管理脚本依赖
  - nginx.conf  部署nginx配置
  - common文件  管理整体公用模块
    - node_modules 公有依赖
    - types  公有类型声明文件
    - ...
    - vite.config.ts  公有plugins和配置
  - microapp-cli  主应用
    - .vscode  vscode私有化配置
    - node_modules  应用所需依赖，由pnpm使用软链接统一处理
    - public  主应用静态文件
    - src
      - router  主应用路由模块
      - views  主应用页面存放
      - App.vue
      - main.ts  主应用入口
      - .env.development  开发环境env配置
      - .env.production  生产环境env配置
      - tsconfig.json  不耦合配置文件，防止定制化处理情况
      - vite.config.ts  引入公共模块中的配置，可以加入定制化属性处理
  - vite-project  子应用
    - .vscode  vscode私有化配置
    - node_modules  应用所需依赖，由pnpm使用软链接统一处理
    - public  主应用静态文件
    - src
      - assets  静态资源存放
      - router  子应用路由模块
      - views  子应用页面存放
      - App.vue
      - main.ts  主应用入口
      - .env.development  开发环境env配置
      - .env.production  生产环境env配置
      - tsconfig.json  不耦合配置文件，防止定制化处理情况
      - vite.config.ts  引入公共模块中的配置，可以加入定制化属性处理

### 写法
> 子应用作为页面展示时<br />
> 主应用在router中为子应用声明路由对象，如果子应用中还有子页面，在path后面拼接/:page:*<br />
> 主应用直接以iframe方式放置标签就可以了
```javascript
// vite项目JS沙箱解决方案：加入iframe
<mirco-app name="子应用自定义名称" url="子应用启动地址" iframe></mirco-app>
```

#### 路由
> microapp父应用路由正常展示，子应用路由在后面拼接子应用名字=子路由来进行query方式展示

#### 路由跳转
> 主应用和子应用都按照router.push的方式跳转当前应用的路由，两个应用相互调用时会不太一样
```javascript
// 主应用控制子应用的跳转
import microApp from "@micro-zoe/micro-app";
microApp.router.push({
  name: "子应用自定义名称",
  path: "需要跳转的子应用路由",
});

// 子应用控制主应用的跳转
// 获取主应用的路由
const baseRouter = window.microApp.router.getBaseAppRouter() 
baseRouter.主应用路由跳转方法(...)

// 控制其他子路由跳转
window.microApp.router.push({name: '子应用名称', path: '跳转地址', replace: 是否使用replace模式 })
```

#### 通讯
> 主应用和子应用相互通信时，传递信息结束后需要清除当前信息后才可以进行下次通信，除使用强制发送forceSetGlobalData，不过不管是怎样传递数据，都需要手动清除数据，不然会一直留存
```javascript
import microApp from "@micro-zoe/micro-app";
// 父应用向子应用发送消息
microApp.setData("子应用名称", 向子应用发送的数据对象, (子应用回调参数) => {});
// 子应用接收数据 监听
window.microApp.addDataListener((数据) => {
  return '向父应用返回回调参数'
})

// 子应用向父应用传递信息
window.microApp.dispatch(向父应用传递的信息对象, () => {})
// 父应用接收信息 监听
microApp.addDataListener('子应用名称', (子应用传递的参数) => {})

// 父子应用双向传递
// 父应用
microApp.setGlobalData(向子应用传递的数据对象);
microApp.addGlobalDataListener((子应用传递的数据) => {})
// 子应用
window.microApp.setGlobalData(向父应用传递的数据对象);
microApp.addGlobalDataListener((父应用传递的数据) => {})

// 强制推送数据
window.microApp.forceSetGlobalData(向父应用强制推送的数据对象)

// 清除数据
microApp.clearData('子应用名称')
```