位置: IT常识 - 正文

无界(wujie)微前端实现及三种通信方式介绍(微无界是什么软件)

编辑:rootadmin
无界(wujie)微前端实现及三种通信方式介绍 一、对比

推荐整理分享无界(wujie)微前端实现及三种通信方式介绍(微无界是什么软件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:无界啥意思,无界啥意思,微无界2.0,无界强吗,无界简介,无界简介,微无界是什么软件,无界是啥,内容如对您有帮助,希望把文章链接给更多的朋友!

之前介绍过前段时间比较流行的微前端框架qiankun,虽然实现了微前端的理念,但是也暴露出很多缺点,比如官网上讲到的四点:

基于路由匹配,无法同时激活多个子应用,也不支持子应用保活改造成本较大,从 webpack、代码、路由等等都要做一系列的适配css 沙箱无法绝对的隔离,js 沙箱在某些场景下执行性能下降严重无法支持 vite 等 ESM 脚本运行

而wujie利用iframe来实现js沙箱能力,有效的解决了上述问题:

组件方式来使用微前端

不用注册,不用改造路由,直接使用无界组件,化繁为简

一个页面可以同时激活多个子应用

子应用采用 iframe 的路由,不用关心路由占用的问题

天然 js 沙箱,不会污染主应用环境

不用修改主应用window任何属性,只在iframe内部进行修改

应用切换没有清理成本

由于不污染主应用,子应用销毁也无需做任何清理工作

二、实现

这里主应用使用了vue3+vite,子应用使用了vue2+webpack。

​ 

1.主应用下载依赖(package.json)

yarn add wujie-vue3

2.主应用注册依赖(main.js)

import WujieVue from "wujie-vue3";

app.use(WujieVue);

3. 主应用使用wujie组件(main.vue)

<WujieVue name="micro" url="http://localhost:8087" >

4. 子应用修改跨域(webpack.dev.conf.js)

无界(wujie)微前端实现及三种通信方式介绍(微无界是什么软件)

同qiankun。如果没有产生跨域,子应用甚至无需修改。

devServer: {

    headers: {

      "Access-Control-Allow-Origin": "*" // 开启应用间的跨域访问

    },

}

 这样便实现了wujie微前端的静态使用,那如何进行主子应用之间数据通信呢?

三、通信方式

先看一下主应用和子应用的代码。

主应用👇

<script setup>import { ElMessage } from 'element-plus';import { ref } from 'vue'import wujie from 'wujie-vue3'const input = ref('')const emitInput = () => wujie.bus.$emit('input', input.value)const propsMethod = () =>{ ElMessage.success('执行主应用方法成功') console.log(1111111, window.document.querySelector("iframe[name=micro]").contentWindow.globalMicroValue)}wujie.bus.$on('microEmit', (val) => input.value = val)window.globalMainValue = '我是主应用全局变量'</script><template> <div class="container"> <h1>main-vue3</h1> <el-input v-model="input" size="large" v-on:keyup.enter="emitInput"> <template #append> <el-button @click="emitInput" icon="Promotion"> </el-button> </template> </el-input> </div> <div class="container"> <h1>micro-vue2</h1> <WujieVue name="micro" url="http://localhost:8087" :props="{data:'propsdata',method:{propsMethod}}"> </WujieVue> </div></template>

 子应用👇

<template> <div class="container"> <h1>{{data===''?'hi':data}}</h1> <el-button @click="doPropsData">获取父应用通过props传递的值</el-button> <el-button @click="doPropsMethod">执行父应用通过props传递的方法</el-button> <el-button @click="microEmit">向父应用传值</el-button> </div></template><script>export default { data () { return { data: '' }; }, mounted () { window.$wujie.bus.$on('input', (val) => this.data = val) window.globalMicroValue = '我是子应用全局变量' console.log(2222222, window.parent.globalMainValue) }, // beforeDestroy () // { // window.$wujie.bus.$off('input') // }, methods: { doPropsMethod () { window.$wujie.props.method.propsMethod() }, doPropsData () { this.data = window.$wujie.props.data }, microEmit () { window.$wujie.bus.$emit('microEmit', 'micro data') } }};</script>

1.props

通过props的方式,主应用既可以向子应用传递主应用的参数,还可以传递主应用的方法。

主应用在WuJieVue组件中使用,有点类似于vue的props。具体代码如下:

<WujieVue name="micro" url="http://localhost:8087" :props="{data:'propsdata',method:{propsMethod}}"></WujieVue>

子应用则通过如下方式接收:

window.$wujie.props.datawindow.$wujie.props.method.propsMethod()

2.window

主应用和子应用都可以通过挂载在window上定义全局变量的方式相互使用。

主应用定义全局变量:

window.globalMainValue = '我是主应用全局变量'

子应用定义全局变量:

window.globalMicroValue = '我是子应用全局变量'

主应用使用子应用全局变量,其中name为WuJieVue中定义的子应用名称:

window.document.querySelector("iframe[name=micro]").contentWindow.globalMicroValue

子应用使用主应用全局变量:

window.parent.globalMainValue

3.eventBus

bus为wujie提供的一种去中心化的通信方式,即每个应用都是一个主体,主应用与子应用处于平等地位,主应用和子应用、子应用和子应用都可以通过这种方式方便的进行通信。包括监听、发送、取消监听三种。

// 主应用监听事件bus.$on("事件名字", function (arg1, arg2, ...) {});// 主应用发送事件bus.$emit("事件名字", arg1, arg2, ...);// 主应用取消事件监听bus.$off("事件名字", function (arg1, arg2, ...) {});// 子应用监听事件window.$wujie?.bus.$on("事件名字", function (arg1, arg2, ...) {});// 子应用发送事件window.$wujie?.bus.$emit("事件名字", arg1, arg2, ...);// 子应用取消事件监听window.$wujie?.bus.$off("事件名字", function (arg1, arg2, ...) {});

四、子应用独立运行

如果不想让子应用单独运行,可以改造一下子应用的main.js文件,通过全局变量window.__POWERED_BY_WUJIE__判断该子应用是否是由主应用通过wujie启动,如果是,就执行wujie子应用的生命周期函数,完成挂载和销毁,如果不是,就不做任何操作,即可避免子应用可以单独打开的情况。

import Vue from "vue";import App from "./App";import router from "./router";import store from "./store";import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";Vue.use(ElementUI);// new Vue({// router,// store,// render: (h) => h(App),// }).$mount("#app");if (window.__POWERED_BY_WUJIE__) { let instance; window.__WUJIE_MOUNT = () => { instance = new Vue({ router, store, render: (h) => h(App) }).$mount("#app"); }; window.__WUJIE_UNMOUNT = () => { instance.$destroy(); };} else { // new Vue({ router, store, render: (h) => h(App) }).$mount("#app");}
本文链接地址:https://www.jiuchutong.com/zhishi/287995.html 转载请保留说明!

上一篇:Word下划线怎么打(word下划线怎么延长)

下一篇:answers.exe是什么进程 answers进程信息查询(wrme.exe是什么)

  • 华为nova5ipro如何录屏(华为nova5iPro如何刷机)

    华为nova5ipro如何录屏(华为nova5iPro如何刷机)

  • dbms提供的数据保护功能有(mydql数据库)

    dbms提供的数据保护功能有(mydql数据库)

  • 抖音的收藏功能是隐私的吗(抖音的收藏功能怎么打开)

    抖音的收藏功能是隐私的吗(抖音的收藏功能怎么打开)

  • 集线器和交换机有什么区别(集线器和交换机的作用)

    集线器和交换机有什么区别(集线器和交换机的作用)

  • ssd是什么意思(128gssd是什么意思)

    ssd是什么意思(128gssd是什么意思)

  • vivo手机内存越来越少怎么回事(vivo手机内存越来越少怎么清理)

    vivo手机内存越来越少怎么回事(vivo手机内存越来越少怎么清理)

  • 漫游记录删了 其他手机登录还有吗(漫游记录删了电脑看得到吗)

    漫游记录删了 其他手机登录还有吗(漫游记录删了电脑看得到吗)

  • 微信录屏功能在哪里(微信录屏功能在哪里打开)

    微信录屏功能在哪里(微信录屏功能在哪里打开)

  • 微信账号打招呼频繁,加不上人怎么办(微信账号打招呼频率过高)

    微信账号打招呼频繁,加不上人怎么办(微信账号打招呼频率过高)

  • 华为手机黑屏拍不了照(华为手机黑屏拍照怎么办)

    华为手机黑屏拍不了照(华为手机黑屏拍照怎么办)

  • 常见的存储介质有哪些(常见的存储介质有哪些?各自具有什么特点)

    常见的存储介质有哪些(常见的存储介质有哪些?各自具有什么特点)

  • 显卡代码43(amd显卡代码43)

    显卡代码43(amd显卡代码43)

  • 上传附件上传不上怎么回事(附件上传不上去)

    上传附件上传不上怎么回事(附件上传不上去)

  • 苹果x有没有3dtouch功能吗

    苹果x有没有3dtouch功能吗

  • 华为热点资讯怎么关(华为热点资讯怎么彻底删除不了)

    华为热点资讯怎么关(华为热点资讯怎么彻底删除不了)

  • 苹果手机夜拍功能在哪(苹果手机夜拍功能)

    苹果手机夜拍功能在哪(苹果手机夜拍功能)

  • mate20关闭后台

    mate20关闭后台

  • ios13怎么开启黑夜模式(苹果的ios13怎样开启黑夜模式)

    ios13怎么开启黑夜模式(苹果的ios13怎样开启黑夜模式)

  • p30pro优享版是什么意思(p30 pro 标配版 全网通版 8gb+128gb)

    p30pro优享版是什么意思(p30 pro 标配版 全网通版 8gb+128gb)

  • iphone11支持3dtouch吗(iphone11支持5g吗)

    iphone11支持3dtouch吗(iphone11支持5g吗)

  • 华为5G手机Mate30发布会时间(华为5g手机mate30pro好不)

    华为5G手机Mate30发布会时间(华为5g手机mate30pro好不)

  • 网页恶意代码通常利用什么来实现植入并进行攻击(网页恶意代码通常利用)

    网页恶意代码通常利用什么来实现植入并进行攻击(网页恶意代码通常利用)

  • 任务栏图标还原到桌面(任务栏怎样还原)

    任务栏图标还原到桌面(任务栏怎样还原)

  • 小米8otg功能如何开启

    小米8otg功能如何开启

  • Win10怎么开启移动热点的快捷方式?(win10怎么打开移动中心)

    Win10怎么开启移动热点的快捷方式?(win10怎么打开移动中心)

  • mediapass.exe 进程有什么用 是什么进程 mediapass进程查询(system-coredump进程)

    mediapass.exe 进程有什么用 是什么进程 mediapass进程查询(system-coredump进程)

  • 服务类一般纳税人无进项
  • 办税员可以购票吗?
  • 应付账款支付时需要付款申请单吗
  • 新建厂房装修费是否计入固定资产
  • 未分配利润转增股本会计处理
  • 租房子没有
  • 等线支付给劳务派遣单位的工资怎么做账
  • 注销公司详细步骤
  • 物业缴纳发票可以抵税吗
  • 个人去税务局开专票需要提供什么
  • 所有者权益变动表是什么报表
  • 退回投资款转为借款怎么记账
  • 房地产开发企业的土地使用权计入哪里
  • 金融企业贷款损失准备金税前扣除计算
  • 成本模式的投资性房地产折旧计入什么
  • 应付账款坏账处理说明
  • 银行利息回单怎么打印
  • 公司间分摊费用开票问题
  • 金税三期申报代扣代缴增值税流程步骤分析
  • 外贸过程中产生的问题
  • 增值税普通发票几个点
  • 新办企业注册资本和投资总额
  • 预收一年租金会计分录
  • 维修开票单位写什么
  • 差额征税可以开发票吗
  • 税务专用发票
  • 企业资产损失会计处理
  • windows10如何添加英文输入法
  • 怎么进入bios设置界面设置内存
  • qconsvc.exe - qconsvc是什么进程 有什么作用
  • 进口应税消费品会计分录
  • 建筑企业如何确认所得税收入
  • 政府补助退回的账务处理
  • antvl7
  • 完美解决索尼电视arc无声音
  • vue中使用jsx语法
  • 使用vue要安装什么软件
  • 遮天传官网
  • 单文件php文件列表
  • 企业怎么可以合理避税?
  • c语言内嵌汇编
  • 公司支付的广告费是什么
  • 工伤补贴如何做帐
  • 附加税扣款时做成了借税金及附加怎么办
  • 增值税无票收入税率变了
  • 购买实验材料入什么科目
  • mysql数据库查询表命令
  • 2020年申报期截止时间
  • 土地增值税的预征和清算
  • 出口退税转为免税处理有损失吗
  • 金蝶软件标准版多少
  • 金蝶k3怎么打印科目余额表
  • 过路费属于差旅费还是办公费
  • 小规模纳税人企业所得税税率
  • 待处理财产损益的账务处理
  • mysql join实现原理
  • mac怎么创建apple id
  • win7的查看方式
  • 同一个局域网中,可以有两台dhcp服务器吗?为什么?
  • 苹果官网
  • svchosl.exe - svchosl是什么进程 有什么作用
  • 微软报错是什么意思
  • centos6.10安装
  • win7无线网络连接不上怎么解决方法
  • zmweb.exe是什么进程
  • windows7的开机启动项在哪里
  • linux服务器设置dns
  • win8.1 安装ie10
  • cocos2dx官方教程
  • jq复制元素
  • Unity3D游戏开发毕业论文
  • javascript的
  • jsp实现ajax
  • ActivityManagerService 启动
  • Android roboguice 开源框架使用
  • js的eval函数
  • js 分页插件
  • 一般纳税人资格查询
  • 福建 退休
  • 会计专业有必要读博士吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设