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

  • 做公众号应该怎么选题(做公众号怎么赚钱?)

    做公众号应该怎么选题(做公众号怎么赚钱?)

  • 7p指纹突然用不了了(7p指纹突然不能用了)

    7p指纹突然用不了了(7p指纹突然不能用了)

  • 自动换行用什么键(自动换行什么键)

    自动换行用什么键(自动换行什么键)

  • 小度音箱怎么恢复出厂设置(小度音箱怎么恢复原厂设置)

    小度音箱怎么恢复出厂设置(小度音箱怎么恢复原厂设置)

  • 快手同时在线会挤掉嘛(快手可以一直在线吗)

    快手同时在线会挤掉嘛(快手可以一直在线吗)

  • 微信视频动态时长限制(微信视频动态啥意思)

    微信视频动态时长限制(微信视频动态啥意思)

  • 抖音直播放电影可以吗(抖音直播放电影怎么赚钱)

    抖音直播放电影可以吗(抖音直播放电影怎么赚钱)

  • 一个手机号只能注册一个微博吗(一个手机号只能注册一个支付宝吗)

    一个手机号只能注册一个微博吗(一个手机号只能注册一个支付宝吗)

  • 荣耀30pro出厂有贴膜吗(荣耀30pro手机出厂有贴膜吗)

    荣耀30pro出厂有贴膜吗(荣耀30pro手机出厂有贴膜吗)

  • 微信不能在电脑上登录是怎么回事(微信不能在电脑上登录是什么原因和手机号)

    微信不能在电脑上登录是怎么回事(微信不能在电脑上登录是什么原因和手机号)

  • qq怎么@别人(电脑qq怎么@别人)

    qq怎么@别人(电脑qq怎么@别人)

  • 如何把视频下载到电脑桌面(如何把视频下载到mp 3)

    如何把视频下载到电脑桌面(如何把视频下载到mp 3)

  • 只读模式怎么修改(只读设置)

    只读模式怎么修改(只读设置)

  • 三星note10+5g是单模还是双模(三星note10单模5g)

    三星note10+5g是单模还是双模(三星note10单模5g)

  • 苹果红包来了提醒功能(iphone红包来了)

    苹果红包来了提醒功能(iphone红包来了)

  • ipad可以添加应用锁吗(ipad上怎么给app加应用锁)

    ipad可以添加应用锁吗(ipad上怎么给app加应用锁)

  • 华为p30如何登录两个微信(华为p30如何登录云空间账号)

    华为p30如何登录两个微信(华为p30如何登录云空间账号)

  • 陌陌主播在哪播放歌曲(陌陌直播在哪)

    陌陌主播在哪播放歌曲(陌陌直播在哪)

  • 苹果8p访问限制找不到(苹果8p访问限制功能在哪里)

    苹果8p访问限制找不到(苹果8p访问限制功能在哪里)

  • 淘宝怎么改成女号(淘宝怎么改成女装模式)

    淘宝怎么改成女号(淘宝怎么改成女装模式)

  • xr无线充电需要设置么(苹果xr手机无线充电)

    xr无线充电需要设置么(苹果xr手机无线充电)

  • 苹果7适合ios13系统吗(iphone7用ios13哪个版本最好)

    苹果7适合ios13系统吗(iphone7用ios13哪个版本最好)

  • 苹果手机5录屏功能在哪里(苹果手机录屏时怎样才能录到声音)

    苹果手机5录屏功能在哪里(苹果手机录屏时怎样才能录到声音)

  • Sa-Token v.1.31.0 新增拦截器 SaInterceptor 功能说明,以及旧代码迁移示例

    Sa-Token v.1.31.0 新增拦截器 SaInterceptor 功能说明,以及旧代码迁移示例

  • php中安装Zend框架(php安装插件)

    php中安装Zend框架(php安装插件)

  • 珠宝饰品在什么地方买
  • 中级会计报名必须用ie浏览器吗
  • 支付短期借款利息的会计科目
  • 会计科目累计摊销是什么意思
  • 企业电子发票申请不成功原因
  • 非关联企业之间无偿借款要交税嘛
  • 社保和公积金是从工资里面扣吗
  • 新政府会计准则2019
  • 分公司亏损是否也分摊所得税
  • 货物所有权转移制度研究
  • 当月采购发票未到如何做账及结转成本?
  • 股权转让印花税税目怎么填
  • 收到客户用房抵货款怎么办
  • 应收账款多收的钱怎么写分录
  • 广告业务增值税
  • 增值税专用发票抵扣期限
  • 账本印花税税金及附加怎么入账?
  • 三证合一地税号查询
  • 公司注销资产负债表期末余额不能为0
  • 事业单位坏账怎么处理
  • 多结转成本的会计分录
  • 小规模纳税人销售自己使用过的物品
  • 财务负责人的岗位
  • 工伤保险的作用有
  • 非常损失计入
  • Win10宽带无法连接
  • php 7 8
  • php mysql数据库
  • 企业内部研究开发项目开发阶段的支出
  • 高新技术企业如何在电子税务局备案
  • php文件合并
  • php中常量与变量的区别
  • 员工报销发票怎么做账
  • 前端处理map
  • 装系统如何不安装自带软件
  • php自带的加密解密函数
  • 工程竣工决算会计账务处理
  • 印花税减半征收减免性质代码
  • 文化事业建设费税收优惠2023
  • 高新技术产业企业认定
  • webservice api接口
  • 医疗报销发票是什么样的
  • 迭代器实现原理
  • inner join用法示例
  • Yii 连接、修改 MySQL 数据库及phpunit 测试连接
  • 发票开错对方已抵扣该怎么处理?
  • 折扣折让的会计分录
  • 企业注册资本的规定
  • 小微企业免税额按1%还是3%确认收入
  • 医院哪些地方需要有明显的禁烟标识
  • 赔付支出包括
  • 原材料当废品卖可以吗
  • 工会会计有工资么
  • 所有者权益包括少数股东权益吗
  • 记账凭证必须具备的基本内容
  • 发票的几种分类
  • 生活垃圾处理费标准
  • 企业收到的应收票据应按什么作为入账金额
  • 电脑显示配置windows
  • win10 发布
  • 硬盘安装fedora35
  • freebsd wifi设置
  • xp系统如何删除用户
  • macbook air一键恢复出厂设置
  • centos源码安装软件
  • win10每周更新
  • win7装win8系统教程
  • Win7中TrustedInstaller.exe进程占用内存高该怎么解决?
  • dos批处理高级教程合编.pdf
  • 轻松掌握瓷砖铺贴技术 pdf
  • honey contil
  • js canvas绘制图片
  • python 字符
  • 项目遇到的问题及解决办法
  • jquery中validate
  • android 5.1 WIFI图标上的感叹号及其解决办法
  • javascript的介绍
  • 基本农田建设的土地
  • 陕西地方水利建设基金减免政策2023
  • 关于地税代收工会经费工作实施办法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设