位置: 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是什么)

  • 小米蓝牙音箱怎么连接(小米蓝牙音箱怎么用)

    小米蓝牙音箱怎么连接(小米蓝牙音箱怎么用)

  • 手机突然声音变小了怎么办(手机突然声音变小怎么办)

    手机突然声音变小了怎么办(手机突然声音变小怎么办)

  • 联想拯救者风扇太响了(联想拯救者风扇怎么开)

    联想拯救者风扇太响了(联想拯救者风扇怎么开)

  • mt6873v相当于骁龙多少(mt6875相当于骁龙多少)

    mt6873v相当于骁龙多少(mt6875相当于骁龙多少)

  • 淘宝改价是要提交订单之后吗(淘宝改价是要提前改吗)

    淘宝改价是要提交订单之后吗(淘宝改价是要提前改吗)

  • 陌生人看自己的微信朋友圈自己能知道吗?(陌生人看自己的朋友圈自己能看到访客记录不能)

    陌生人看自己的微信朋友圈自己能知道吗?(陌生人看自己的朋友圈自己能看到访客记录不能)

  • 升级云存储空间是什么意思(升级云存储空间云服务)

    升级云存储空间是什么意思(升级云存储空间云服务)

  • 手机可以建立文件夹吗(手机可以建立文件夹并压缩吗)

    手机可以建立文件夹吗(手机可以建立文件夹并压缩吗)

  • 同个订单怎样一起退款(同个订单怎样一起付款)

    同个订单怎样一起退款(同个订单怎样一起付款)

  • word不能编辑怎么办(word不能编辑怎么取消保护)

    word不能编辑怎么办(word不能编辑怎么取消保护)

  • 手机如何设置密码锁屏(手机如何设置密码)

    手机如何设置密码锁屏(手机如何设置密码)

  • 手机有内存为什么会显示空间不足(手机有内存为什么还卡顿)

    手机有内存为什么会显示空间不足(手机有内存为什么还卡顿)

  • oppoa57插件怎么设置(oppo插件怎么安装怎么设置的)

    oppoa57插件怎么设置(oppo插件怎么安装怎么设置的)

  • 手机怎么改ip

    手机怎么改ip

  • qq登不上去了怎么办(qq登不上去了怎么办手机号不用了密码也忘了)

    qq登不上去了怎么办(qq登不上去了怎么办手机号不用了密码也忘了)

  • 小米文档查看器在哪里(小米文档查看器卸载了怎么办)

    小米文档查看器在哪里(小米文档查看器卸载了怎么办)

  • vivox27支持面部吗(vivox27支持面部识别吗)

    vivox27支持面部吗(vivox27支持面部识别吗)

  • 滴滴永久封号解决办法(滴滴永久封号解封了还能用吗)

    滴滴永久封号解决办法(滴滴永久封号解封了还能用吗)

  • 拼多多许愿瓶怎么出来(拼多多心愿礼盒)

    拼多多许愿瓶怎么出来(拼多多心愿礼盒)

  • 怎样注销趣步账号(怎样注销趣步账号手机)

    怎样注销趣步账号(怎样注销趣步账号手机)

  • iqoo背光灯在哪里设置(iqoo1背面灯怎么设置)

    iqoo背光灯在哪里设置(iqoo1背面灯怎么设置)

  • 如何修改exe程序(怎么修改exe程序)

    如何修改exe程序(怎么修改exe程序)

  • qq小表情包小人在哪里(qq小人图表情)

    qq小表情包小人在哪里(qq小人图表情)

  • 微信公众平台群发消息如何删除(微信公众平台群发消息时,目前支持群发的内容包括哪些?)

    微信公众平台群发消息如何删除(微信公众平台群发消息时,目前支持群发的内容包括哪些?)

  • 小米8长宽高(小米八的长宽高)

    小米8长宽高(小米八的长宽高)

  • windows7如何查看隐藏文件(windows7如何查看配置)

    windows7如何查看隐藏文件(windows7如何查看配置)

  • react context优化四重奏教程示例

    react context优化四重奏教程示例

  • 开发票需要填银行吗
  • 绿化税票多少税率
  • 利润表第二季度本期金额填4-6月还是1-6月数
  • 金税盘显示已到锁死期,未到汇总期是什么原因
  • 税控设备抵减增值税必须当月抵减吗
  • 退回以前年度工资怎么做账
  • 研发过程中材料费计入
  • 股权转让资本公积怎么处理
  • 2018年出口总值
  • 公司注销后如何申请强制执行
  • 增值税科目设置的凭证处理方面的特殊要求
  • 安装工程开发票
  • 开票金额开多了,对公司有影响吗
  • 已付款收货未收到发票会计分录
  • 出售股票公允价值变动损益
  • 主营业务收入多计跨年调整
  • 营业外收入冲减销售费用
  • 企业预付保险费怎么做账
  • 苹果推送改不掉三全音
  • 官网下载的iso怎么用u盘安装
  • 电脑任务栏在右边怎么调回下边
  • win7为什么现在不能用了
  • linux怎么更改账户名
  • 公寓收费标准
  • elementui ts
  • fs209e是什么意思
  • 暂估纳税调增了账务怎么处理
  • php的session
  • php模板引擎类
  • thinkPHP5 tablib标签库自定义方法详解
  • 写字楼买卖办手续
  • 前端环境部署到服务器开发环境
  • 实现扩展功能的快捷键
  • 增值税系统技术维护费 减免政策
  • 销售旧货怎么填写申报表
  • 农民专业合作社名词解释
  • 房产税收特点有哪些
  • 固定资产投资入股是否缴纳增值税
  • mac怎么下载postman
  • 其他应付款转实收资本股东会决议
  • sql语句表中增加一列
  • win2008iis安装
  • 购入固定资产款项未付
  • 企业所得税表利润总额是净利润吗
  • 装修公司让客户承担税费是否合理
  • 挂靠建筑公司企业所得税怎么交?
  • 制造费用的明细账应当按照什么设置
  • 公司费用分摊给各部门
  • 购买汽车后,需要缴纳的税种有哪些
  • 本年利润每个月有余额吗
  • 审计测试会计分录怎么做
  • win8的应用商店
  • ubuntu无法安装增强功能
  • wordpress怎么安装插件
  • 安装网络设备
  • apt-get和aptitude
  • win10超级按钮
  • win10系统admin和oobe
  • es6class类用法
  • bootstrap按钮的风格有哪些?
  • jq转盘抽奖
  • android observer
  • python内置函数用来返回列表,元组,字典
  • python 数独破解器
  • easyui footer
  • mkdirs linux
  • 安卓listview控件map的用法前面每行加图片
  • Python中使用Queue和Condition进行线程同步的方法
  • jquery java
  • unity给物体添加重力
  • u3d地形编辑贴图
  • javascript如何写操作命令
  • 河南城乡居民医疗保险缴费怎么交
  • 减免所得税额怎样计算
  • 自然人办税服务平台怎么登录不进?
  • 四川税务申报如何网上申报零申报
  • 重庆市国税电子税务局
  • 政府对国税局的支持
  • 四川企业退休人员80岁高龄补贴
  • 福建省泉州市石狮市新服装城
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设