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

  • 电脑反应慢的解决方法win7(电脑反应慢的解决方法)(电脑反应慢怎办)

    电脑反应慢的解决方法win7(电脑反应慢的解决方法)(电脑反应慢怎办)

  • realme电子保修卡在哪里(realme电子保修卡不显示)

    realme电子保修卡在哪里(realme电子保修卡不显示)

  • ppt录课怎么把人像录进去(ppt录课怎么把人录进去)

    ppt录课怎么把人像录进去(ppt录课怎么把人录进去)

  • 华为nova7se支不支持nfc(华为nova7se支不支持OTG)

    华为nova7se支不支持nfc(华为nova7se支不支持OTG)

  • 华为荣耀20青春版为什么发热(华为荣耀20青春版多少钱)

    华为荣耀20青春版为什么发热(华为荣耀20青春版多少钱)

  • 苹果x与11的区别(苹果x和11一样吗)

    苹果x与11的区别(苹果x和11一样吗)

  • 用q币怎么开会员(用q币怎么开qq音乐会员)

    用q币怎么开会员(用q币怎么开qq音乐会员)

  • ios12.4验证失败(ios12.4验证失败,因为您不再)

    ios12.4验证失败(ios12.4验证失败,因为您不再)

  • iwatch不连手机能用吗(iwatch不连手机能打电话吗)

    iwatch不连手机能用吗(iwatch不连手机能打电话吗)

  • wps操作权限不足(wps操作权限不足是什么意思)

    wps操作权限不足(wps操作权限不足是什么意思)

  • 通过微信支付怎么能联系到收款人(通过微信支付怎么能联系到支付人)

    通过微信支付怎么能联系到收款人(通过微信支付怎么能联系到支付人)

  • rmx1991是什么牌子手机(rmx3161是什么牌子)

    rmx1991是什么牌子手机(rmx3161是什么牌子)

  • 苹果11信号差吗(苹果11信号是不是特别差)

    苹果11信号差吗(苹果11信号是不是特别差)

  • 苹果8p怎么越来越容易发烫(苹果8p怎么越来越贵)

    苹果8p怎么越来越容易发烫(苹果8p怎么越来越贵)

  • wpa2密码是什么意思(WPA2密码是什么)

    wpa2密码是什么意思(WPA2密码是什么)

  • 无线桥接的弊端(无线桥接好吗)

    无线桥接的弊端(无线桥接好吗)

  • 微信无法直接打开word(微信无法直接打开word文档)

    微信无法直接打开word(微信无法直接打开word文档)

  • word怎么添加紫色底纹(word怎么添加紫色三磅方框边框)

    word怎么添加紫色底纹(word怎么添加紫色三磅方框边框)

  • 淘宝实名认证怎么解除绑定(淘宝实名认证怎么换绑)

    淘宝实名认证怎么解除绑定(淘宝实名认证怎么换绑)

  • iqoo如何屏蔽升级提示(如何禁止iqoopro系统升级)

    iqoo如何屏蔽升级提示(如何禁止iqoopro系统升级)

  • 小米平板4语音唤醒小爱在哪(小米平板4语音解锁屏幕怎么设置)

    小米平板4语音唤醒小爱在哪(小米平板4语音解锁屏幕怎么设置)

  • w10笔记本连不上wifi(w10笔记本连不上网络怎么办)

    w10笔记本连不上wifi(w10笔记本连不上网络怎么办)

  • Win10周二更新:移除旧版Edge浏览器(win10 20h2更新时间久)

    Win10周二更新:移除旧版Edge浏览器(win10 20h2更新时间久)

  • vue3 超好用的富文本编辑器

    vue3 超好用的富文本编辑器

  • python中string和float之间的转换(python中的string)

    python中string和float之间的转换(python中的string)

  • 企业出售土地的土地增值税计算方法
  • 小规模纳税人企业所得税2023
  • 增值税先征后退会计处理
  • 档案室图书应该做哪个会计科目
  • 公积金贷款金额少怎么办
  • 建筑工程企业人才引进可以引进医药行业吗
  • 公司支付宝收款二维码怎么弄
  • 金税盘的发票怎么作废
  • 增值税改革后增值税申报表怎么填写
  • 本期免税额怎么填写
  • 进口产品不付汇会造成什么
  • 横向转拨财政款应通过什么科目
  • 现金支票怎么支付的
  • 无形资产资本化加计扣除可抵扣暂时性差异
  • 土地增值税清算规程实施细则
  • 建安企业异地个税怎么交
  • 未开票收入怎么做账
  • 空调要买加湿器吗
  • 网上办税服务厅app下载
  • gdp等于消费加储蓄加税收
  • 增值税加计抵减账务处理
  • 代缴水电费是什么意思
  • 进项发票认证抵扣会计分录
  • 资源税计税依据含不含增值税
  • 企业的银行利息收入要交企业所得税吗
  • 辅助生产车间工人工资
  • 公司购买的车辆购置税怎么入账
  • 怎样判断事情
  • 发票是否可以作为收款依据
  • 禁止扣除项目有什么
  • php session_start
  • ai implementation
  • 狮子岩斯里兰卡
  • 税控减免怎么做账
  • 长期股权投资凭证
  • elemental ui
  • 简单的php文件
  • 阿里规则官方头条
  • 帮别人代发工资有没有风险
  • windows mongodb安装与配置
  • 出口运费怎么入账
  • 会计凭证大小写不一致
  • 加油卡充值可以开增值税专用发票吗
  • 专项应付款的核算
  • 应付账款多怎么办
  • 小企业如何进行内部创新
  • 合同权利义务包含债务吗
  • 应交税费其他收入会计分录
  • 餐厅的租金是多少钱一个月
  • 产成品和半成品需要结转嘛
  • 对公账户的钱可以花吗
  • 让渡是什么
  • 年初未分配利润在利润表怎么填
  • 一般户和基本户怎么使用最好
  • 净利润和毛利润的区别公式
  • Linux下卸载MySQL数据库
  • 删除表s
  • 解决口苦最快的方法
  • win7旗舰系统
  • win7如何开启VT
  • mac怎么删除应用保留数据
  • 怎么设置开机启动项?
  • 如何优化winxp
  • ssh 使用代理
  • jquery和原生js性能
  • jQuery插件封装时如要实现链式编程,需要
  • 常用的linux命令大全
  • 未知类型的文件怎么打开
  • css网站布局实录 pdf
  • jquery 字符串以什么开头
  • 用jQuery.ajaxSetup实现对请求和响应数据的过滤
  • python网络爬虫的流程图
  • h5实现微信分享
  • 多线程 python
  • 安徽税务发票查询入口
  • 搞农业种植
  • 转让专利权取得的所得属于财产转让所得吗
  • 小规模纳税人需要建账吗
  • 香水与香精有啥不一样
  • 买新车的注意事项有哪些比较重要的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设