Démarrage rapide du micro framework front-end icestark (2)

L'offre arrive, creusez des amis pour ramasser! Je participe à l'événement de vérification du recrutement du printemps 2022, cliquez pour voir les détails de l'événement .

Démarrage rapide du cadre micro frontal icestark (1)

pense

Quelle communication est requise dans les micro-interfaces

L'application principale communique avec la sous-application
Communication entre les sous-applications

L'application principale communique avec la sous-application

Passer des paramètres de l'application principale à la sous-application

boutique

Utilisez le @ice/stark-datapackage , qui doit être installé séparément

npm install @ice/stark-data --save
复制代码

Définir les informations utilisateur globales dans l'application principale et mettre à jour les données dans l'application principale

import { store } from '@ice/stark-data'
console.log(store)
const userInfo = { name: 'Sabo', age: 29 }
store.set('user', userInfo)

store.set('language', 'CH') // 设置全局语言

setTimeout(() => {
  store.set('language', 'EN');
}, 3000);
复制代码

Obtenir des informations sur l'utilisateur dans la sous-application et surveiller les modifications de données de l'application principale

import { store } from '@ice/stark-data'
const userInfo = store.get('user')
console.log('userInfo: ', userInfo)

// 监听变化
store.on('language', (lang) => {
  console.log(`current language is ${lang}`)
}, true)
复制代码

un événement

L'application principale surveille les changements de données de la sous-application et reçoit les données envoyées par la sous-application

L'application principale définit l'événement d'écoute

import { event } from '@ice/stark-data'
event.on('freshMessage', (res: string) => {
  console.log('App ', res)
})
复制代码

Événement déclencheur de sous-application

import { event } from '@ice/stark-data'
setTimeout(() => {
  event.emit('freshMessage', 'vue message')
}, 1000)
复制代码

Les sous-applications sautent entre les applications principales

appHistory

La sous-application saute à la aboutpage , saute à la reactpage de la sous-application

Notez que la page doit être rafraîchie après avoir ajouté le code correspondant localement, sinon le saut de route provoquera un écran blanc sur la page

import appHistory from '@ice/stark-app/lib/appHistory'
appHistory.push('/about')
appHistory.push('/react')
复制代码

Communication à l'aide de fonctions natives JS

Pour l'application principale et la micro-application, le runtime partage les informations globales telles que l'emplacement, le cookie, LocalStorage et la fenêtre de la page en cours. Par conséquent, la communication entre les applications peut également être réalisée via ces solutions.

Démonstration de la fonction de page locale

Résumer

Jusqu'à présent, les capacités de base du framework micro-frontend d'icestark ont été utilisées.Dans le développement commercial réel, il est nécessaire de procéder aux ajustements d'optimisation correspondants en fonction des besoins de l'entreprise.

Code de cas GitHub

github.com/gywgithub/i…