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

  • 微信朋友圈发送失败轻触以再次发送(微信朋友圈发送失败是什么原因)

    微信朋友圈发送失败轻触以再次发送(微信朋友圈发送失败是什么原因)

  • 在下划线上输入文字怎么让下划线不会变长(在下划线上输入文字怎么让下划线不消失)

    在下划线上输入文字怎么让下划线不会变长(在下划线上输入文字怎么让下划线不消失)

  • 路由器速率怎么选择(路由器速率怎么设置最快)

    路由器速率怎么选择(路由器速率怎么设置最快)

  • ipad第一次充电多久(ipad第一次充电要充多久)

    ipad第一次充电多久(ipad第一次充电要充多久)

  • 开腾讯会议的时候可以看视频吗(开腾讯会议的时候可以打电话吗)

    开腾讯会议的时候可以看视频吗(开腾讯会议的时候可以打电话吗)

  • 拼多多人工审核导流要多久(拼多多人工审核中还能接单吗)

    拼多多人工审核导流要多久(拼多多人工审核中还能接单吗)

  • 为什么抖音内容老是一种类型(为什么抖音内容偏好设置没有帅哥)

    为什么抖音内容老是一种类型(为什么抖音内容偏好设置没有帅哥)

  • 荣耀30s和荣耀30pro区别(荣耀30s和荣耀30pro手机壳一样吗)

    荣耀30s和荣耀30pro区别(荣耀30s和荣耀30pro手机壳一样吗)

  • 探探配对的聊天消失了(探探配对聊天要收费吗)

    探探配对的聊天消失了(探探配对聊天要收费吗)

  • 手机几张图片怎么拼成一张(手机几张图片怎么弄成一个文件夹)

    手机几张图片怎么拼成一张(手机几张图片怎么弄成一个文件夹)

  • 给别人微信辅助怎么不符合要求(给别人微信辅助注册有没有风险)

    给别人微信辅助怎么不符合要求(给别人微信辅助注册有没有风险)

  • 鼠标不见了怎么恢复(鼠标不见了怎么办)

    鼠标不见了怎么恢复(鼠标不见了怎么办)

  • qq音乐的黑名单在哪(qq音乐的黑名单在哪里找)

    qq音乐的黑名单在哪(qq音乐的黑名单在哪里找)

  • 手机的数据漫游是什么 (手机的数据漫游在哪里)

    手机的数据漫游是什么 (手机的数据漫游在哪里)

  • 如何让自家的网不被蹭(如何让自家的网络变快)

    如何让自家的网不被蹭(如何让自家的网络变快)

  • 微信没有拉黑为什么发消息显示拒收(微信没有拉黑为什么打不通电话)

    微信没有拉黑为什么发消息显示拒收(微信没有拉黑为什么打不通电话)

  • 双模5g手机是什么意思(双模5g手机啥意思)

    双模5g手机是什么意思(双模5g手机啥意思)

  • oppor15有nfc功能吗(oppor15有nfc功能没)

    oppor15有nfc功能吗(oppor15有nfc功能没)

  • 手机淘宝怎么设置英语(手机淘宝怎么设置网络允许)

    手机淘宝怎么设置英语(手机淘宝怎么设置网络允许)

  • 抖音的本场音浪是什么计算的(抖音的本场音浪是什么意思)

    抖音的本场音浪是什么计算的(抖音的本场音浪是什么意思)

  • 为什么手机应用会停止运行(为什么手机应用很少,内存却满了)

    为什么手机应用会停止运行(为什么手机应用很少,内存却满了)

  • 实况照片怎么变小视频(实况照片怎么变成好几张)

    实况照片怎么变小视频(实况照片怎么变成好几张)

  • 企业所得税法允许税前扣除的费用划分为
  • 工资延期发放最多不能超过多少天
  • 旅游交什么税
  • 结转增值税会计摘要
  • 企业所得税季度预缴
  • 外购商品发放给员工 进项税额能不能抵扣
  • 通用机打发票内容可以随便写吗
  • 处置资产开啥发票
  • 税额和税款的区别
  • 微信支付算库存现金还是银行存款
  • 对外支付代扣代缴企业所得税
  • 外购固定资产账务处理
  • 如何快速整理会计凭证
  • 商品损失 进项税 确定
  • 支付专家劳务费什么意思
  • 企业所得税费用税率
  • 一般纳税人从按照简易计税方法依照3%
  • 2018购房契税税率
  • 应交税费属于什么会计要素
  • 购进免税农产品再销售免税吗
  • 进口商品合同
  • 一年期电子银行承兑汇票
  • 专用发票验旧后还领不到发票
  • 一般纳税人转让固定资产增值税税率
  • 转让费入什么会计分录
  • 桌面图标变成了白色的
  • 收到投资款怎么做记账凭证
  • 附加税享受税收减免的怎么记账
  • 怎么获取win10密钥
  • 求源代码
  • 企业低值易耗品摊销计入产品成本的方法
  • php学生管理系统设计报告
  • 如何修改python
  • 深度学习之快速实现数据集增强的方法
  • jsp连接数据库的步骤
  • 定期定额自行申报表
  • 工程提成会计分录怎么做
  • 企业附加税的税率
  • 小规模企业没有进项票能开发票吗
  • mysql数据库在使用时的常见错误号和解决方法有哪些?
  • 公允模式投资性房地产转固定资产
  • 人工费暂估怎么做分录
  • 金税四期是什么意思
  • 承租人损坏租赁物
  • ce认证所需的模块有哪些
  • 营业利润净利润利润总额的区别
  • 给员工的奖金计入什么科目
  • 所得税税率变化对已确认递延所得税资产的影响
  • 无形资产摊销账面价值
  • 房租付了没有及时取得发票怎么入账
  • 赞助支出属于什么科目
  • 企业外购的无形资产的成本包括
  • 复利现值系数和复利终值系数
  • 客运服务费发票计入什么科目
  • 按预测范围不同划分为以下几类
  • sql查询当前年份
  • ubuntu16.04命令行配置静态ip
  • win7如何设置搜索包含文件内容
  • Win10打开或关闭系统图标里开怎么灰色的
  • w8网络设置
  • win7系统开机黑屏只有鼠标且打不开任务管理器
  • android opengles2.0教程
  • cordova怎么样
  • 3d引擎开发
  • 好看的css样式代码
  • unity接sdk教程
  • sku分析的作用
  • jquery图片轮播无缝连接
  • shell按行读取文件存入数组
  • jquery mobile ui
  • 收集linux日志
  • 蓝色的css代码
  • js框架开发实例
  • 税务局核查研发费举措
  • 国家税务局福建省电子税务
  • 电子税务局个体工商户如何登陆
  • 小规模纳税人销售额怎么算
  • 2020年增值税运费税率是多少
  • 进口酒类税收
  • 余杭区税务局地址
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设