FreeMaker如何使用 QIANKUN 微前端小计

本文主要是介绍FreeMaker如何使用 QIANKUN 微前端小计，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

第一步 获取 乾坤地址

https://unpkg.com/browse/qiankun@2.5.1/dist/index.umd.min.js
老项目是php模版渲染的，服务是用docker 起的，以php项目为父应用，请问怎么配置。可以使用这个

第二步 集成到项目中

    <!-- qiankun START -->
    <@jversion url="qiankun/index.umd.min.js"></@jversion>
    <!-- qiankun END -->

第三步 集成项目中

<script>

    /**
     * Step2 注册子应用
     * 主应用注册微应用时，entry 可以为相对路径，activeRule 不可以和 entry 一样（否则主应用页面刷新就变成微应用）
     */
    qiankun.registerMicroApps(
        [
            {
                name: 'shop-cart', // 子应用 名字
                container: '#subapp-viewport', // 挂载节点 容器名
                activeRule: '/nhCart', 
                entry: '//localhost:7101/', // 子容器地址
                props: { data: {name:'zhangsan',age:12} } // 默认传值
            }
        ],
        {
            // qiankun 生命周期钩子 - 微应用加载前
            beforeLoad: [
                app => {
                    console.log('[Life-Cycle] before load %c%s', 'color: green;', app.name);
                },
            ],
            beforeMount: [
                app => {
                    console.log('[Life-Cycle] before mount %c%s', 'color: green;', app.name);
                },
            ],
            // qiankun 生命周期钩子 - 微应用挂载后
            afterMount: [
                app => {
                    console.log('[Life-Cycle] after unmount %c%s', 'color: green;', app.name);
                },
            ],
            afterUnmount: [
                app => {
                    console.log('[Life-Cycle] after unmount %c%s', 'color: green;', app.name);
                },
            ],
        },
    );

    /**
     * Step3 设置默认进入的子应用
     */
    // qiankun.setDefaultMountApp('/shopCart');

    qiankun.runAfterFirstMounted(() => {
        console.log('[Life-Cycle]-[qiankun-- MainApp] first app mounted');
    });

    // 如果微应用不是直接跟路由关联的时候，你也可以选择手动加载微应用的方式：
    // qiankun.loadMicroApp({
    //   name: 'vue app',
    //   container: '#subapp-viewport',
    //   activeRule: '/vue',
    //   entry: '//localhost:7101',
    //   props: { data: {} }
    // });

    /**
     * 添加全局的未捕获异常处理器
     */
    qiankun.addGlobalUncaughtErrorHandler((event) => {
        console.log('请检查应用是否可运行，子应用加载未成功', event);
    })
    /**
     * 添加全局的未捕获异常处理器
     */
    // addGlobalUncaughtErrorHandler((event: Event | string) => {
    //     console.error(event);
    //     const { message: msg } = event as any;
    //     // 加载失败时提示
    //     if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
    //         console.error("微应用加载失败，请检查应用是否可运行");
    //     }
    // });
    //
    // 作者：纸上的彩虹
    // 链接：https://juejin.cn/post/6981339862901194759

    /**
     * Step4 启动应用
     */
    qiankun.start();
    // qiankun.start({prefetch: true, sandbox: {experimentalStyleIsolation: true}});


    // 初始化 state 使用initGlobalState(state)全局传值
    const actions = qiankun.initGlobalState({name:'wangwu', age:'108'});

    // 监听数据变化 在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback
    actions.onGlobalStateChange((state, prev) => {
        // state: 变更后的状态; prev 变更前的状态
        console.log("FreeMaker state 变更后的状态= = = ---> ", state);
        console.log("FreeMaker prev 变更前的状态-= = = ---> ", prev);
    });

    // 改变数据 按一级属性设置全局状态，微应用中只能修改已存在的一级属性
    actions.setGlobalState({name:'zhaoliu', age:'88'});

    // 移除监听 移除当前应用的状态监听，微应用 umount 时会默认调用
    // actions.offGlobalStateChange(); 打开注释 就会接受不到消息。

    console.log("qiankun 00000 .------ > ", qiankun);


    // 主应用 传值 到 子应用
    var i = 1;
    function meOnclock() {
        i ++ ;
        actions.setGlobalState({name:'zhaoliu', age:'88', index: i});
    }
</script>

子应用

按照官方项目配置项目

这篇关于FreeMaker如何使用 QIANKUN 微前端小计的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！