微前端實踐MicroApp

微前端實踐

本文主要是關於microApp的實踐過程記錄
本文主要內容如下：

1. 什么是MicroApp?
2. MicroApp的父子通訊方式以及路由介紹
3. 如何部署相關應用?

安裝

npm i @micro-zoe/micro-app --save

yarn add @micro-zoe/micro-app

1.什么是MicroApp?

MicroApp是京東開源的一款微前端框架，對新人友好，文檔特別棒ｂ(￣▽￣)ｄ，提供開箱即用的各種功能(數據通信，樣式隔離...)

2.MicroApp的通信方式常用方式如下：

1.父應用 -> 子應用 傳遞數據

<template>
  <micro-app
    name='my-app'
    url='xx'
    :data='dataForChild' // data只接受對象類型，數據變化時會重新發送
  />
</template>

<script>
export default {
  data () {
    return {
      dataForChild: {type: '發送給子應用的數據'}
    }
  }
}
</script>

這里值得一提的是，這里只有dataForChild整體變化，才會觸發事件到子應用，舉個例子

// 不會更新
this.$set(this.dataForChild,'xxx','value');

// 會更新
this.dataForChild = {}

然后子應用監聽如下：

//直接獲取
const data = window.microApp.getData() // 返回基座下發的data數據

//監聽數據變化
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()

2.子應用向父應用發射事件

// dispatch只接受對象作為參數
window.microApp.dispatch({type: '子應用發送的數據'})

父應用接收：

<template>
  <micro-app
    name='my-app'
    url='xx'
    // 數據在事件對象的detail.data字段中，子應用每次發送數據都會觸發datachange
    @datachange='handleDataChange'
  />
</template>

<script>
export default {
  methods: {
    handleDataChange (e) {
      console.log('來自子應用的數據：', e.detail.data)
    }
  }
}
</script>

其實文檔寫的特別全面：傳送門

然后路由部分：
官方推薦父應用使用history,子應用使用hash,然后如果子應用使用vite的話!!!，會很 痛苦

部署相關

自己本人嘗試部署了一個demo 傳送門
首先目錄結構如下：

我這里是把子應用就作為一個組件來用的，

部署的時候，首先需要確定你的服務器存放路徑，一般需要找后端溝通，然后配置好Nginx的代理，官網有詳細的教程
部署相關

---

總結起來就是 簡單好用，文檔優秀 o(￣▽￣)ｄ