MicroApp 借鑒了 WebComponent 的思想账嚎，通過(guò) CustomElement 結(jié)合自定義的 ShadowDom芍殖，將微前端封裝成一個(gè)類 WebComponent 組件咕缎，從而實(shí)現(xiàn)微前端的組件化渲染
基應(yīng)用修改
安裝插件
npm install @micro-zoe/micro-app --save
引入依賴
import microApp from '@micro-zoe/micro-app'
// 可以傳入一個(gè)對(duì)象進(jìn)行全局配置
microApp.start()
添加組件
<template>
<div>
<micro-app
name='child'
url='http://localhost:3000/'
baseroute='/my-page'></micro-app>
</div>
</template>
name應(yīng)用名稱黍衙，每個(gè)應(yīng)用的值全局唯一泥畅；必傳url應(yīng)用地址，可以在地址欄訪問(wèn)到琅翻；必傳-
baseroute子應(yīng)用的基礎(chǔ)路由
地址拼接方法let href = window.location.href, hrefs = href.split(baseroute) let realUrl = `${url}${baseroute}${hrefs.length === 2 ? hrefs[1] : ''}`例：地址欄值為 http://localhost:80/my-page/home 時(shí)位仁，該子應(yīng)用訪問(wèn)的地址為 http://localhost:3000/home
destory卸載時(shí)是否強(qiáng)制刪除緩存資源，子應(yīng)用在卸載后會(huì)清空緩存資源方椎，再次渲染時(shí)重新請(qǐng)求數(shù)據(jù)
子應(yīng)用修改
靜態(tài)資源路徑
設(shè)置 webpack 的公共路徑 publicPath
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ || '/'
項(xiàng)目入口文件
let app
/** 掛載函數(shù) */
function mount () {
app = new Vue({
el: '#app',
template: '<App/>',
components: { App },
})
}
/** 卸載函數(shù) */
function unmount () {
app.$destroy()
app.$el.innerHTML = ''
app = null
}
// 微前端環(huán)境下聂抢，注冊(cè)mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__)
window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
else
mount()
預(yù)加載
子應(yīng)用
通過(guò) microApp.start 配置項(xiàng)的 preFetchApps 屬性設(shè)置子應(yīng)用的預(yù)加載，或者通過(guò) microApp.preFetch 方法設(shè)置
/** 子應(yīng)用列表 */
const apps = [{ name: 'child', url: 'http://localhost:3000' }]
// 方式一
microApp.start({ preFetchApps: apps })
// microApp.start({ preFetchApps: () => apps })
// 方式二
microApp.preFetch(apps)
// microApp.preFetch(() => apps)
靜態(tài)資源
-
資源共享
通過(guò)microApp.start配置項(xiàng)的globalAssets屬性設(shè)置全局共享資源棠众，子應(yīng)用加載相同地址的資源時(shí)琳疏，會(huì)直接從緩存中讀取數(shù)據(jù)/** 靜態(tài)資源列表 */ const assets = { js: ['/static/js/vendor.dll.js'], css: [] } microApp.start({ globalAssets: assets })通過(guò)在打包后的
link、script標(biāo)簽上設(shè)置global屬性，micro-app 會(huì)在第一次加載該文件后放入公共緩存空盼，其他應(yīng)用加載相同地址的資源時(shí)书幕，會(huì)直接從緩存中讀取數(shù)據(jù)<link rel="stylesheet" href="xx.css" global> <script src="xx.js" global></script> -
資源過(guò)濾
exclude
通過(guò)在打包后的link、script我注、style標(biāo)簽上設(shè)置exclude屬性過(guò)濾這些資源加載按咒，micro-app 會(huì)刪除帶有exclude屬性的元素；和資源共享搭配使用提升子應(yīng)用的渲染速度<link rel="stylesheet" href="xx.css" exclude> <script src="xx.js" exclude></script> <style exclude></style>
組件通信
基應(yīng)用向子應(yīng)用傳遞
基應(yīng)用通過(guò) data 屬性向子應(yīng)用傳遞數(shù)據(jù)但骨，子應(yīng)用通過(guò) window.microApp.addDataListener 添加數(shù)據(jù)監(jiān)聽(tīng)方法
<!--基應(yīng)用文件-->
<template>
<micro-app :data="micro.data"></micro-app>
</template>
<script>
export default {
data() {
return {
micro: {
data: { name: '' }
}
}
}
}
</script>
<!--子應(yīng)用文件-->
<template>
...
</template>
<script>
export default {
methods: {
dataListener(data) {
console.log(data)
}
}
, created () {
/** 綁定數(shù)據(jù)監(jiān)聽(tīng)事件 */
window.microApp && window.microApp.addDataListener(this.dataListener)
}
, destroyed () {
/** 移除數(shù)據(jù)監(jiān)聽(tīng)事件 */
window.microApp && window.microApp.removeDataListener(this.dataListener)
}
}
</script>
子應(yīng)用向基應(yīng)用傳遞
子應(yīng)用通過(guò) window.microApp.dispatch 向外拋出一個(gè)數(shù)據(jù)励七，基應(yīng)用通過(guò) datachange 事件接收子應(yīng)用拋出的數(shù)據(jù)
<!--基應(yīng)用文件-->
<template>
<micro-app @datachange='handleDataChange'></micro-app>
</template>
<script>
export default {
methods: {
handleDataChange(event) {
console.log(event.detail.data)
}
}
}
</script>
<!--子應(yīng)用文件-->
<template>
<div>
<button @click="send">向基應(yīng)用發(fā)送數(shù)據(jù)</button>
</div>
</template>
<script>
export default {
methods: {
send() {
window.microApp && window.microApp.dispatch({ message: '子應(yīng)用發(fā)送' })
}
}
}
</script>
生命周期函數(shù)
基應(yīng)用定義
基應(yīng)用可以定義 created、beforemount奔缠、mounted掠抬、unmount、error 五個(gè)生命周期函數(shù)
<template>
<micro-app
@created='created'
@beforemount='beforemount'
@mounted='mounted'
@unmount='unmount'
@error='error'
></micro-app>
</template>
<script>
export default {
methods: {
created () {
/**標(biāo)簽初始化后校哎，加載資源前觸發(fā) */
console.log(`created`)
}
, beforemount () {
/**加載資源完成后两波，開(kāi)始渲染之前觸發(fā) */
console.log(`beforemount`)
}
, mounted () {
/**子應(yīng)用渲染結(jié)束后觸發(fā) */
console.log(`mounted`)
}
, unmount () {
/**子應(yīng)用卸載時(shí)觸發(fā) */
console.log(`unmount`)
}
, error () {
/**子應(yīng)用渲染出錯(cuò)時(shí)觸發(fā)，只有會(huì)導(dǎo)致渲染終止的錯(cuò)誤才會(huì)觸發(fā)此生命周期 */
console.log(`error`)
}
}
}
</script>
子應(yīng)用定義
子應(yīng)用可以定義 mount闷哆，unmount 兩個(gè)生命周期函數(shù)
window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
執(zhí)行順序
組件加載
created腰奋、beforemount、mount(child)抱怔、mounted組件卸載
unmount(child)劣坊、unmount組件異常
error
環(huán)境變量
window.__MICRO_APP_BASE_ROUTE__
由基應(yīng)用下發(fā)的路由前綴，即<micro-app>標(biāo)簽的 baseroute 值屈留，用于區(qū)分子路由window.__MICRO_APP_PUBLIC_PATH__
在子應(yīng)用中通過(guò)獲取應(yīng)用地址局冰，即<micro-app>標(biāo)簽的 url 值window.__MICRO_APP_NAME__
在子應(yīng)用中通過(guò)獲取應(yīng)用的 name 值，即<micro-app>標(biāo)簽的name值灌危。window.__MICRO_APP_ENVIRONMENT__
判斷子應(yīng)用是否在微前端環(huán)境中window.__MICRO_APP_BASE_APPLICATION__
判斷應(yīng)用是否為基應(yīng)用康二，在microApp.start()后有效
原文鏈接：MicroApp初步使用
