How to modify the base

1. Install QiankunYARN add Qiankun 2. Register the microapplication and start it

// main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
    {
        name: 'child'.entry: '//localhost:9000'.container: '#container'.activeRule: '/sub',}]); start()Copy the code

How to modify subapplications

The specific code is omitted, please refer to the official website as follows:

1. Add public-path.js to the SRC directory and add the three methods bootstrap mount unmount 3 to main.js. 4. Package configuration changes (vue.config.js)

How does the base communicate with its child applications

The base communicates with the child application simply using APIinitGlobalState. InitGlobalState returns a MicroAppStateActions object with three properties:

  • onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately? : boolean) => voidFireImmediately = true Triggers a callback
  • setGlobalState: (state: Record<string, any>) => boolean, set the global status according to the level 1 attribute. Only the existing level 1 attribute can be modified in the micro application
  • offGlobalStateChange: () => booleanTo remove status listening for the current application, which is called by default when the microapplication is umount

What does the parent application do

import { initGlobalState } from 'qiankun';
const state = {
    baiduinit: window.abc: 456
}
// Initialize the communication pool
const actions = initGlobalState(state);
// Listen for pool changes
actions.onGlobalStateChange((state, prev) = > {
    // state: state after the change; Prev Status before change
    console.log(state, prev);
});
Copy the code

How does a child application do that

1. Create action. Js

// /src/qiankun/action.js
function emptyAction() {
    // Indicates that an empty Action is currently in use
    console.warn("Current execute action is empty!");
}

class Actions {
    // The default is empty Action
    actions = {
        onGlobalStateChange: emptyAction,
        setGlobalState: emptyAction,
    };

    /** * sets actions */
    setActions(actions) {
        this.actions = actions;
    }

    /** * mapping */
    onGlobalStateChange() {
        return this.actions.onGlobalStateChange(... arguments); }/** * mapping */
    setGlobalState() {
        return this.actions.setGlobalState(...arguments);
    }
}

const actions = new Actions();
export default actions;

Copy the code

2. In the main.js mount method, accept the props of the parent application

import action from './qiankun/action'
export async function mount(props) {
    console.log('[vue] props from main framework', props);
    action.setActions(props)
    render(props);
}
Copy the code

3. Reference action.js where you need to receive arguments passed by the parent application

import action from '@/qiankun/action'
export default {
    name: 'Home'.mounted() {
        / / receiving state
        action.onGlobalStateChange((state) = > {
            console.log(state)
        }, true);
    },
    methods: {changeValue(){
            / / modify state
            action.setGlobalState({abc:789})}}}Copy the code

Child applications can modify the pool and the changes will be heard by the base.

The sub-app references Baidu Map

Child applications reference third-party JS libraries, which can cause cross-domain problems in a universe where static resources of child applications are sandbogged so that third-party JS will have problems when compiled. The solution is to set the excludeAssetFilter in the start method in the base so that the Qiankun does not process this part of JS

// main.js
import { registerMicroApps, start } from 'qiankun';
start(
    {
        excludeAssetFilter: (urls) = > {
            const whiteList = []
            const whiteWords = ['baidu'] // Asynchronously load baidu map whitelist
            if (whiteList.includes(urls)) return true
            return whiteWords.some(w= > urls.includes(w))
        }
    }
);
Copy the code

The initialization of Baidu Map required to attach init to Window, but window was not window in the Qiankun environment. I came up with a way to pass the window to its sub-application, and the processing was as follows:

// bmap.vue
import action from '@/qiankun/action'
export default {
    mounted() {
        // create a method for the script tag callback
        window.baiduinit = () = >{
            this.initBaiduMap(116.404.39.915)}// Window is not window in the universe
        if(window.__POWERED_BY_QIANKUN__){
            action.onGlobalStateChange((state) = > {
                state.baiduinit.baiduinit = () = >{
                    this.initBaiduMap(116.404.39.915)}},true);
        }
        // The tag go method was created
        this.createMap().then(() = >{
            this.initBaiduMap(116.404.39.915)})},methods: {
        // Create the script tag
        createMap(){
            return new Promise((resolve,reject) = >{
                const map = document.getElementById('baidumap');
                if(map){
                    resolve()
                    return
                }
                console.log('create baidu map')
                let script = document.createElement('script');
                script.id = 'baidumap';
                script.type = 'text/javascript';
                script.src = ` https://api.map.baidu.com/api?v=3.0&ak= ak&callback = baiduinit `;
                document.body.appendChild(script); })}...Copy the code

The source code

Gitee.com/clausliang/…