Preliminary use of MicroApp

Using the idea of WebComponent for reference, MicroApp encapsulates the micro front end into a webComponent-like component by combining CustomElement with custom ShadowDom, so as to realize the component-based rendering of the micro front end

Base application modification

Installing a plug-in

npm install @micro-zoe/micro-app --save
Copy the code

Introduction of depend on

import microApp from '@micro-zoe/micro-app'
// You can pass in an object for global configuration
microApp.start()
Copy the code

Add the component

<template>
  <div>
    <micro-app 
    	name='child' 
        url='http://localhost:3000/' 
        baseroute='/my-page'></micro-app>
  </div>
</template>
Copy the code

Name Application name. The value of each application is globally unique. Will pass
Url Application address, which can be accessed in the address bar. Will pass
Baseroute indicates the baseroute of the subapplication

Address splicing method
```
let href = window.location.href, hrefs = href.split(baseroute)
let realUrl = `${url}${baseroute}${hrefs.length === 2 ? hrefs[1] : ' '}`
Copy the code
```
Example: the address bar value for http://localhost:80/my-page/home, which application to access address to http://localhost:3000/home
Whether to forcibly delete cached resources during destory uninstallation. The subapplication will clear cached resources after uninstallation and request data again during rendering

Subapplication modification

Static resource path

Set publicPath for webPack

__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ || '/'
Copy the code

Project entry file

let app

/** Mount function */
function mount () {
    app = new Vue({
        el: '#app'.template: '<App/>'.components: { App },
    })
}

/** unload function */
function unmount () {
    app.$destroy()
    app.$el.innerHTML = ' '
    app = null
}

// Register the mount and unmount methods in the micro-front-end environment
if (window.__MICRO_APP_ENVIRONMENT__)
    window[`micro-app-The ${window.__MICRO_APP_NAME__}`] = { mount, unmount }
else
    mount()
Copy the code

preload

The child application

Set the preloading of the child application through the preFetchApps property of the microapp. start configuration item, or through the microapp. preFetch method

/** List of subapplications */
const apps = [{ name: 'child'.url: 'http://localhost:3000' }]

/ / way
microApp.start({ preFetchApps: apps })
// microApp.start({ preFetchApps: () => apps })

2 / / way
microApp.preFetch(apps)
// microApp.preFetch(() => apps)
Copy the code

Static resource

Resource sharing

Use the Microapp. start configuration item to set global shared resources. When sub-applications load resources of the same address, data is directly read from the cache
```
/** Static resource list */
const assets = { js: ['/static/js/vendor.dll.js'].css: [] }

microApp.start({ globalAssets: assets })
Copy the code
```
By setting the global attribute on the packaged link and Script tags, Micro-App will put the file into the public cache after loading it for the first time. When other applications load resources with the same address, they will directly read the data from the cache
```
<link rel="stylesheet" href="xx.css" global>
<script src="xx.js" global></script>
Copy the code
```
Resource Filtering Exclude

By setting the exclude attribute on the packaged Link, Script, and style tags to filter these resource loads, Micro-App removes elements with the exclude attribute. Used in conjunction with resource sharing to improve the rendering speed of sub-applications
```
<link rel="stylesheet" href="xx.css" exclude>
<script src="xx.js" exclude></script>
<style exclude></style>
Copy the code
```

Component communication

Base applications pass to child applications

Transfer data base application by data attribute to the child, the child application through the window. The microApp. AddDataListener add data to monitor method

<! -- Base application file --> <template> <micro-app :data=" micro-.data "></micro-app> </template> <script> export default {data() {return {  micro: { data: { name: '' } } } } } </script> <! --> <template>... </template> <script> export default { methods: { dataListener(data) { console.log(data) } } , Created () {/ * * * / binding data to monitor events window. MicroApp && window. MicroApp. AddDataListener (enclosing dataListener)}, Destroyed () {/ * * removed * / data to monitor events window. MicroApp && window. MicroApp. RemoveDataListener (enclosing dataListener)}} < / script >Copy the code

Subapplications pass to base applications

The child application throws out data through window.microapp. dispatch, and the base application receives the data thrown by the child application through the Datachange event

<! --> <template> < micro-app@datachange ='handleDataChange'></micro-app> </template> <script> export default { methods: { handleDataChange(event) { console.log(event.detail.data) } } } </script> <! </button> </div> </template> <script> export default { Methods: {send() {window.microapp && window.microapp.dispatch ({message: 'child app sends'})}} </script>Copy the code

Life cycle function

Base application definition

A base application can define five life cycle functions created, beforemount, Mounted, unmount, and error

<template> <micro-app @created='created' @beforemount='beforemount' @mounted='mounted' @unmount='unmount' @error='error'  ></micro-app> </template> <script> export default { methods: {created () {/** tags are initialized and trigger */ console.log(' created ')} before loading resources, beforemount () {/** After loading resources, */ console.log(' beforemount ')}, mounts () {/ console.log(' mounted ')}, */ console.log(' mounted ')}, Unmount () {/** triggered when child application is unmounted */ console.log(' unmount ')}, error () {/** triggered when child application rendering fails, This lifecycle is triggered only by errors that cause rendering to stop */ console.log(' error ')}}} </script>Copy the code

Subapplication definition

A child application can define two life cycle functions: mount and unmount

window[`micro-app-The ${window.__MICRO_APP_NAME__}`] = { mount, unmount }
Copy the code

Execution order

The component loading

Created, beforemount, mount(child), and Mounted
Component uninstall

Unmount to (child), unmount to
Abnormal component

error

The environment variable

window.__MICRO_APP_BASE_ROUTE__

The route prefix delivered by the base application, namely, the Baseroute value of the

tag, is used to distinguish child routes
window.__MICRO_APP_PUBLIC_PATH__

By obtaining the application address in the child app, that is, the URL value of the

tag
window.__MICRO_APP_NAME__

Get the name value of the application in the child app, that is, the name value of the

tag.
window.__MICRO_APP_ENVIRONMENT__

Determine whether the child application is in a micro-front-end environment
window.__MICRO_APP_BASE_APPLICATION__

Check whether the application is a base application, valid after microapp.start ()

Initial use of MicroApp