前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >快速上手微前端框架 icestark (二)

快速上手微前端框架 icestark (二)

作者头像
草帽lufei
发布2022-07-29 09:40:05
5560
发布2022-07-29 09:40:05
举报
文章被收录于专栏:程序语言交流

思考

微前端中都需要哪些通信
  • 主应用与子应用通信
  • 子应用之间的通信

主应用与子应用通信

主应用传参到子应用
store

使用 @ice/stark-data 包,需要单独安装

代码语言:javascript
复制
npm install @ice/stark-data --save

在主应用中设置全局用户信息,主应用中更新数据

代码语言:javascript
复制
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);

子应用中获取用户信息,监听主应用数据变化

代码语言:javascript
复制
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)
event

主应用监听子应用数据变化,接收子应用发送的数据

主应用设置监听事件

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

子应用触发事件

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

子应用主应用之间互相跳转

appHistory

子应用跳转主应用 about 页, 跳转子应用 react

注意 在本地添加完对应的代码后需要重新刷新页面,否则路由跳转会出现页面白屏的情况

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

使用JS原生功能实现通信

对于主应用和微应用,运行时都共享了当前页面的 location、Cookie、LocalStorage、window 等全局信息,因此应用间的通信,也可以通过这些方案

总结

到目前为止,icestark 的微前端框架的基本能力都已经上手了,在实际业务开发中,还需要基于业务需求进行相应的优化调整

GitHub 案例代码

https://github.com/gywgithub/icestark-examples

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-03-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 参谋总长萨博 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 📷
  • 思考
    • 微前端中都需要哪些通信
    • 主应用与子应用通信
      • 主应用传参到子应用
        • store
        • event
    • 子应用主应用之间互相跳转
      • appHistory
      • 使用JS原生功能实现通信
      • 总结
      • GitHub 案例代码
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档