Web Program Install

轻量级远程模块管理

示例代码

(async function initModules() {
    const {
        progressBar,
        readContent,
        register,
        scriptLoad,
        systemLoad,
        messageItems,
        onLoadComplete,
        onAllComplete,
    } = await wpi({
        progressBar: {
            isCompleteHidden: false, // 关闭进度条自动隐藏
        }
    });

    register({
        demo: '/test/demo.js',
        'demo-theme': '/test/demo.css',
        'prismjs': 'https://unpkg.com/prismjs@1.29.0/prism.js',
        'prismjs-theme': 'https://unpkg.com/prismjs@1.29.0/themes/prism.min.css',
        'wpi-progress-bar': '/lib/wpi-process-bar.js',
    });

    // 加载完成
    onLoadComplete(name => {
        messageItems.toDocument(messageItems.createMessageNode(`已加载模块${name}`, {
            isCompleteHidden: false, // 关闭进度条自动隐藏
        }), 'bottom-right');
    });

    // 全部加载完成
    onAllComplete(() => {
        messageItems.toDocument(messageItems.createMessageNode('已全部加载完成', {
            isCompleteHidden: false, // 关闭进度条自动隐藏
        }), 'bottom-right');
        
        // messageItems.clear(3000); // 全部加载的3秒后清理所有提示, 包括痕迹
    });

    // 进度条控件，用于提示注册内容的装载进度
    messageItems.toDocument(progressBar.virtualFragment);

    Promise.all([
        readContent('prismjs-theme')
    ])
        .then(() => readContent('prismjs'));

    await scriptLoad('demo'); // 通过script标签加载运行JS
    await readContent('demo'); // 通过xhr加载运行JS
    await readContent('demo-theme'); // 获得css，默认自动渲染样式
    await readContent('demo-theme'); // 重复访问只会获得第一次加载内容
    await readContent('wpi-progress-bar');
})()