Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

Quick start Micro Front-end Framework ICestARK (1)

thinking

What communications are required in the micro front end

  • The primary application communicates with its sub-applications
  • Communication between sub-applications

The primary application communicates with its sub-applications

The primary application sends parameters to the child application

store

To use the @ice/ Stark-data package, install it separately

npm install @ice/stark-data --save
Copy the code

Set global user information in the master application, and update data in the master application

import { store } from '@ice/stark-data' console.log(store) const userInfo = { name: 'Sabo', age: Set ('language', 'CH') setTimeout(() => {store.set('language', 'EN'); }, 3000);Copy the code

Obtain user information in the sub-application and monitor data changes in the master application

import { store } from '@ice/stark-data' const userInfo = store.get('user') console.log('userInfo: ', userInfo) // Listen for changes store.on('language', (lang) => {console.log(' current language is ${lang} ')}, true)Copy the code
event

The master application monitors the data changes of the sub-applications and receives the data sent by the sub-applications

The main application sets listening events

import { event } from '@ice/stark-data'
event.on('freshMessage', (res: string) => {
  console.log('App ', res)
})
Copy the code

The child application triggers the event

import { event } from '@ice/stark-data'
setTimeout(() => {
  event.emit('freshMessage', 'vue message')
}, 1000)
Copy the code

Sub-application Indicates that primary applications are redirected to each other

appHistory

The child application jumps to the About page of the main application and the react page of the rotor

Notice Refresh the page after adding the corresponding code on the local PC. Otherwise, a blank screen is displayed on the page

import appHistory from '@ice/stark-app/lib/appHistory'
appHistory.push('/about')
appHistory.push('/react')
Copy the code

Use JS native functions to achieve communication

For the master application and micro application, the runtime share the location, Cookie, LocalStorage, window and other global information of the current page, so the communication between applications can also be realized through these schemes

Local page function demonstration

conclusion

So far, the basic capabilities of icestark’s micro-front-end framework have been mastered. In actual business development, corresponding optimization and adjustment should be made based on business requirements

GitHub case code

Github.com/gywgithub/i…