微前端:无界wujie简单上手

这篇具有很好参考价值的文章主要介绍了微前端:无界wujie简单上手。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

之前用过了微前端框架 qiankun 并剖析了其原理,今天我们来试试另一个同样厉害的微前端框架无界,本文只是讲如何使用,原理部分后面再更新。

无界支持多种项目的接入,如 react、vue 等

普通项目

如果你项目是 react、vue 可以直接用 wujie-vue2、wujie-vue3、wujie-react,但是这些也是基于下面的内容封装的,所以建议看一下,我后面都会讲到

1、安装

npm i wujie -S
import { bus, setupApp, preloadApp, startApp, destroyApp } from "wujie";

2、初始化(非必须)

在项目入口处设置子应用的参数,更多参数请看 这里

setupApp({
	name: "唯一id",
	// 子应用地址
	url: "//localhost:9001",
	//	子应用将被挂载在该容器上 HTMLElement | string
	el: "#app1"
})

为什么这一步是非必须的,因为接下来的预加载和启动都是和这一步的参数想同,但是如果你这一步有设置,那么接下来只需要设置这一步的 name 就好。

3、预加载

preloadApp({ name: "唯一id"});

4、启动子应用

startApp({ name: "唯一id" });

子应用将会在第 2 步设置的容器中启动。

vue项目

1、下载

# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S

2、初始化

// vue2
import WujieVue from "wujie-vue2";
// vue3
import WujieVue from "wujie-vue3";

const { bus, setupApp, preloadApp, destroyApp } = WujieVue;

Vue.use(WujieVue);
// 这里如果设置了,底3步可以直接通过name值来使用,
setupApp({
  name: "app1",
  url: "//localhost:9001/",
  ...lifecycles,
});

3、启动子项目

<WujieVue width="100%" height="100%" name="app1"></WujieVue>

原理

可以看到 wujie-vue 也只是简单的对基本操作进行了封装。

import Vue from "vue";
import { bus, setupApp, preloadApp, startApp, destroyApp } from "wujie";
import { createApp, h, defineComponent } from "vue";
const vue3Flag = !!createApp;

const wujieVueOptions = {
  name: "WujieVue",
  props: {
    width: { type: String, default: "" },
    height: { type: String, default: "" },
    name: { type: String, default: "" },
    loading: { type: HTMLElement, default: undefined },
    url: { type: String, default: "" },
    sync: { type: Boolean, default: false },
    prefix: { type: Object, default: undefined },
    alive: { type: Boolean, default: false },
    props: { type: Object, default: undefined },
    replace: { type: Function, default: undefined },
    fetch: { type: Function, default: undefined },
    fiber: { type: Boolean, default: true },
    degrade: { type: Boolean, default: false },
    plugins: { type: Array, default: null },
    beforeLoad: { type: Function, default: null },
    beforeMount: { type: Function, default: null },
    afterMount: { type: Function, default: null },
    beforeUnmount: { type: Function, default: null },
    afterUnmount: { type: Function, default: null },
    activated: { type: Function, default: null },
    deactivated: { type: Function, default: null },
    loadError: {type: Function, default: null}
  },
  data() {
    return {
      destroy: null,
      startAppQueue: Promise.resolve(),
    };
  },
  mounted() {
    bus.$onAll(this.handleEmit);
    this.execStartApp();
    this.$watch(
      () => this.name + this.url,
      () => this.execStartApp()
    );
  },
  methods: {
    handleEmit(event, ...args) {
      this.$emit(event, ...args);
    },
    execStartApp() {
      this.startAppQueue = this.startAppQueue.then(async () => {
        try {
          this.destroy = await startApp({
            name: this.name,
            url: this.url,
            el: this.$refs.wujie,
            loading: this.loading,
            alive: this.alive,
            fetch: this.fetch,
            props: this.props,
            replace: this.replace,
            sync: this.sync,
            prefix: this.prefix,
            fiber: this.fiber,
            degrade: this.degrade,
            plugins: this.plugins,
            beforeLoad: this.beforeLoad,
            beforeMount: this.beforeMount,
            afterMount: this.afterMount,
            beforeUnmount: this.beforeUnmount,
            afterUnmount: this.afterUnmount,
            activated: this.activated,
            deactivated: this.deactivated,
            loadError: this.loadError
          });
        } catch (error) {
          console.log(error);
        }
      });
    },
  },
  beforeDestroy() {
    bus.$offAll(this.handleEmit);
  },
  render(c) {
    const createElement = vue3Flag ? h : c;
    return createElement("div", {
      style: {
        width: this.height,
        height: this.height,
      },
      ref: "wujie",
    });
  },
};

const WujieVue = vue3Flag ? defineComponent(wujieVueOptions) : Vue.extend(wujieVueOptions);

WujieVue.setupApp = setupApp;
WujieVue.preloadApp = preloadApp;
WujieVue.bus = bus;
WujieVue.destroyApp = destroyApp;
WujieVue.install = function (Vue) {
  Vue.component("WujieVue", WujieVue);
};

export default WujieVue;


React项目

基本和 vue 相同

效果

微前端:无界wujie简单上手
微前端:无界wujie简单上手
微前端:无界wujie简单上手

可以看到,我在这个页面加载了两个子应用,在 dom 上的表现形式为 web component 的形态,而 js 部分则是用 iframe 来加载的。

总结

看下来比 qiankun 的接入方式简单了许多,后续使用我会在记录文章来源地址https://www.toymoban.com/news/detail-513363.html

到了这里,关于微前端:无界wujie简单上手的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微前端(无界)

    前言:微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微

    2024年02月02日
    浏览(41)
  • 无界简单使用

    底层使用requestIdleCallback函数 window.requestIdleCallback()方法插入一个函数,这个函数将在浏览器空闲时期被调用,这使开发者能够再主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应,函数一般会按先进先调用的顺序执行(队列),然而,如果

    2024年02月14日
    浏览(33)
  • 微前端无界机制浅析

    随着项目的发展,前端SPA应用的规模不断加大、业务代码耦合、编译慢,导致日常的维护难度日益增加。同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低。 为了能够将前端模块解耦,通过相关技术调研,最终选择了无界微前端框架作为物流客服系统解耦

    2024年02月05日
    浏览(37)
  • 前端微服务无界实践

    随着项目的发展,前端SPA应用的规模不断加大、业务代码耦合、编译慢,导致日常的维护难度日益增加。同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低。因此前端微服务应运而生。 1.复杂度可控: 业务模块解耦,避免代码过大,保持较低的复杂度,便于维

    2024年02月06日
    浏览(74)
  • 前端微服务无界实践 | 京东云技术团队

    随着项目的发展,前端SPA应用的规模不断加大、业务代码耦合、编译慢,导致日常的维护难度日益增加。同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低。因此前端微服务应运而生。 前端微服务优势 1.复杂度可控: 业务模块解耦,避免代码过大,保持较低

    2024年02月06日
    浏览(46)
  • 微前端--无界方案之官网demo操作说明

    官方demo在GitHub(访问有问题,需要设置,本人未设置) 链接:https://github.com/Tencent/wujie (别处给的,也能用) 其中的包需要通过pnpm下载, 使用npm下载存在问题!!! 注:默认下载最新版pnpm,支持的node为14.6以上,以下版本请到pnpm官网找历史版本 出现一下界面,即为成功

    2024年02月08日
    浏览(66)
  • 【 Qt 快速上手】-①- Qt 背景介绍与发展前景

    Qt 是一个跨平台的 C++ 图形用户界面应用程序框架 。它为应用程序开发者提供了建立艺术级图形界面所需的所有功能。它是完全面向对象的,很容易扩展。Qt 为开发者提供了一种 基于组件的开发模式 ,开发者可以通过简单的拖拽和组合来实现复杂的应用程序,同时也可以使

    2024年01月20日
    浏览(56)
  • 正则表达式简单易学,急速上手

    匹配模式 i:忽略大小写 g:全局匹配 ig:忽略大小写全局匹配 m:执行多行匹配 [a-e] :判断字符串中是否包含字母a-z 通过正则处理字符串 正则量词 正则表达式例子:

    2024年02月04日
    浏览(39)
  • LTspice快速上手--搭建简单RC电路

    LTspice下载地址 打开LTspice: 单击File - New Schematic或者直接点击菜单栏中New Schematic新建原理图。 点击Edit - Component放置元器件或者直接点击菜单栏中的元器件按钮进行放置。     【技巧】 按键盘F2可快速打开元器件窗口进行放置。  放置电源、电阻、电容和GND。 元器件放置时

    2024年01月16日
    浏览(41)
  • Midjourney中文版测评,上手简单+免费

     近期国内外不断有AI绘画模型推出,但依然无法撼动Midjourney的地位,不管在绘画准确度、多样性还是体验感方面,Midjourney无疑都是最好的,但Midjourney原始版是全英文,这对国内用户而言非常不友好,那么Midjourney中文版体验如何?一文带你挖一挖。 要创建Discord账号: 因为

    2024年04月27日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包