事情是这样的，上一年写了一个基于uTools的插件，超级待办，目前日活300+，插件累计下载量24000+，有很多用户期望能够开发独立版本且数据可控(在本地保存)，所以在插件版的基础上，优化UI，交互，新增相关功能，开发了一个桌面端版本(win+mac)的超级待办。

应用特色：

一、快速记录待办

二、所有数据保存在本地

很多人在记了一两条就放弃了，很难坚持下来，所以先把待办记下来，后续使用拖拽的形式快速修改待办状态，在此场景下，设计了多个快速记录待办的方式：

一、使用快捷键Ctrl+Space快捷键（可自定义）快速呼出应用，自动聚焦输入待办

二、剪切板转待办，应用会记录剪切板记录，你可以查看记录并转为待办

该应用共分为任务主面板、日历、列表、随心记(富文本)、分类、剪切板等模块。

任务主面板模块：

在这里根据完成状态把任务分成未开始，进行中，已完成三个框体，不同状态之间支持拖拽，排序等快速操作；并且根据任务的紧急状态把每个任务分为紧急，高，中，低四个状态，方便标记任务，区分优先级；支持关联随心记，编辑，修改，删除，归档等操作。

日历模块：

在这里根据每个任务的时间，分布在日历视图上，日历包含节假日等信息，能够查看任务分布及完成情况，支持关键字搜索，编辑任务，删除任务等操作。

列表模块：

把任务汇总为列表模式，你可以在这里取消归档，按照任务状态进行筛选，关键字搜索，分类搜索，查看关联的随心记，删除，编辑等操作，并能直观的查看你所记录的待办事项。

随心记：

这里使用了富文本编辑器，支持上传图片，方便记录待办所关联的一些信息，例如：我完成了一个模块的开发，可以把具体的注意事项关联写到随心记里，方便日后查看。不仅如此，你可以记录你想记录的任何文本。

分类：

在这里你可以去维护应用的分类信息，在创建任务及随心记时，可以进行关联，方便归类管理。虽然模块名是分类，但在使用过程中，你可以把分类定义为项目名，日期归总等等。

剪切板：

我们在应用后台，实时记录剪切板内容并保存到本地，你可以在这里把剪切板某个内容转为待办，也可以根据关键词进行搜索，同时可以一键删除所有，删除单个内容等。

设置：

如果你觉得不希望每次都出现很大的框体，只希望在桌面上出现一个还未完成的任务面板并进行操作，你可以在设置中开启待办事项面板，开启后，你可以固定到桌面的任意位置。我们默认保存该面板的位置信息，在你重启电脑后，面板依旧在你设置的位置。

同时你可以在这里设置是否开机自启，是否显示快速添加待办的面板，启动时是否只显示一个输入框还是整个应用，以及呼出应用的快捷键，怎么使用，任你发挥。

为了极少的收集用户信息，我们采用微信绑定许可码（一机一码）形式，当应用安装后，可以按照操作申请试用许可码，每个微信支持绑定多个机器。

在公测期间，一共收获了300个用户，并提了很多宝贵的建议，后续迭代会持续的进行优化更新~

最后，如果你也有记录待办的需求，不妨体验一下呀~

前段时间手底下的小伙伴跟我吐槽，说后端一点小改动就马上要包，电脑性能很差一旦run build之后就得等好几分钟的空窗期，被迫摸鱼导致加班，我灵机一动，是不是可以利用服务器的性能，编写自动化构建从而实现让后端、测试点点点，就能得到他们想要的不同版本的包、或者不同分支的构建产物呢？

于是乎就有了我的设计并产出的开源：Sa-io https://github.com/LIAOJIANS/sa-io.git

Sa-io操作流程：新建项目（指定gitURL） => 内部执行（npm install）=> run build => SE(推送Sucesss日志) => publish（指定目标地址）=> dowl (下载专属产物)

项目架构

1、UI层

2、逻辑层

3、数据层

4、所需环境层

核心实现逻辑

1、技术清单

• child_process：创建子进程并执行构建脚本；


• chokidar: 监听日志文件内容；


• scp2：建立SSH连接并传输文件；


• Vue3：UI界面采用VUE3 + TS

2、核心逻辑

Run Build

router.post('/build', [

 (() =>

   ['shell', 'install', 'projectName'].map((fild) =>

     body(fild)

       .notEmpty()

       .withMessage('username or token is null'),

   ))(),

], (req, res, next) => {

 checkBeforRes(next, req, async () => {



   const {

     shell,

     install,

     removeNm,

     shellContent,

     branch,

     projectName,

     pull,

     ...onter

   } = req.body



   if (os.platform() !== 'linux' && shell) {

     return new Result(null, 'Running shell scripts must be in a Linux environment!!!')

       .fail(res)

   }



   const curTime = Date.now()

   const id = `${projectName}-${curTime}`

   const fileName = `${id}.log`

   const logPath = path.resolve(__dirname, `../log/${fileName}`)



   let status = 'success'



   const getHistory = () => getFileContentByName('history', [])



   // 生成构建历史

   let data = [

     ...getHistory(),

     {

       id,

       projectName,

       buildTime: curTime,

       status: '',

       branch

     }

   ]



   // 生成日志文件

   getFileContentByName(

     '',

     '',

     logPath

   )



   // 写入history基本信息

   setFileContentByName(

     'history',

     data,

     true

   )



   if (removeNm) {

     await rmDir(projectName, 'node_modules') // 删除node_modules  防止不同分支不同版本的依赖冲突



     rmFile(`${projectName}/package-lock.json`) // 删除安装依赖日志，防止版本缓存

   }



   if (branch) { // 如果有分支，并且分支不能等于当前分支，否则切换分支并拉取最新

     const projects = getFileContentByName('projects')



     const project = projects.find(p => p.projectName === projectName)



     if (project.branch !== branch) {

       try {

         if (install) {



           rmFile(`${projectName}/package-lock.json`) // 删除安装依赖日志，防止版本缓存

         }



         await gitCheckoutPro(projectName, branch)



         setFileContentByName('projects', [

           ...projects.map(p => {

             if (p.projectName === projectName) {

               p.branch = branch

             }



             return p

           })

         ], true)

       } catch (e) {



         console.log(e)



         setFileContentByName(

           'history',

           [

             ...data,

             {

               projectName,

               buildTime: curTime,

               status: 'error',

               branch

             }

           ],

           true

         )



         res.status(500).send('checkout error!!! Please review the log output!!!!!!')

       }



     } else if (pull) { // 拉取最新

       try {

         await gitPullPro(projectName, logPath)

       } catch (e) {

         res.status(500).send('checkout error!!! Please review the log output!!!!!!')

       }

     }

   }





   new Result(`${id}`, 'building, Please review the log output!!!!!!').success(res)



   const compressedPro = () => {

     status = 'success'

     compressed(`${projectName}-${curTime}`, projectName)



     console.log('success')

     copyFile(

       path.resolve(__dirname, `../project/${projectName}/dist`),

       path.resolve(__dirname, `../builds/${projectName}-${curTime}`)

     )



     const {

       publish,

       ...left

     } = onter



     if (publish) {

       publishTragetServer({

         ...left,

         localPath: path.resolve(__dirname, `../builds/${projectName}-${curTime}`)

       })

     }



   }



   if (shell) { // 执行sh脚本



     setFileContentByName(

       projectName,

       shellContent,

       true,

       path.resolve(__dirname, `../project/${projectName}/build.sh`)

     )



     await shellPro(projectName, logPath)

       .then(compressedPro)

       .catch(() => {

         status = 'error'

         console.log('error')

       })

   } else { // 执行打包工作流

     (

       await (install ? installAfterBuildPro : buildPro)(projectName, logPath)

         .then(compressedPro)

         .catch(() => {

           status = 'error'

           console.log('error')

         })

     )

   }



   let newData = getHistory()



   newData = newData.map(c => {

     if (c.id === id) {

       c.status = status

     }



     return c

   })



   setFileContentByName(

     'history',

     newData,

     true

   )

 })

})

UI界面展示

最后放个项目地址：github.com/LIAOJIANS/s…

概述

import-html-entry 是一个用于动态加载和处理 HTML 和 JS 文件的库，主要用于微前端架构中。它能够从远程服务器拉取 HTML 内容，并对其中的 JS 和 CSS 进行处理，以便在主应用中加载和执行。这个库是 qiankun 微前端框架的核心依赖之一，提供了强大的动态加载和执行能力。在微前端框架 qiankun 中，import-html-entry 被用来解决 JS Entry 的问题，通过 HTML Entry 的方式，让用户接入微应用就像使用 iframe 一样简单。

使用方法

安装

首先，你需要通过 npm 或 yarn 安装 import-html-entry：

npm install import-html-entry

或者

yarn add import-html-entry

基本使用

以下是一个简单的示例，展示如何使用 import-html-entry 加载一个远程的 HTML 文件,
我们看官网的例子

在index.html中
使用import-html-entry加载./template.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>index</title>

</head>

<body>

<script type="module">

	window.onerror = e => {

		console.log('error', e.message);

	};

	window.onunhandledrejection = (e) => {

		console.log('unhandledrejection', e.reason.message);

	};



	import('./dist/index.js').then(({ importEntry }) => {

		importEntry('./template.html').then(res => {

			console.log(res);

			return res.execScripts().then(exports => {

				console.log(exports);

			});

		}).catch(e => {

			console.log('importEntry failed', e.message);

		});

	});

</script>

</body>

</html>

template.html如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

	<link href="https://unpkg.com/antd@3.13.6/dist/antd.min.css" rel="stylesheet">

	<link href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap-grid.min.css" rel="stylesheet">

</head>

<body>



<script src="./a.js"></script>

<script ignore>alert(1)</script>

<script src="./b.js"></script>

<script src="./c.js"></script>

<script src="https://unpkg.com/react@16.4.2/umd/react.production.min.js"></script>

<script src="https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js"></script>

<script src="https://www.baidu.com"></script>

</body>

</html>

template.html被import-html-entry处理过后如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        /* antd样式被内链进入 */

    </style>

    <style>

        /* bootstrap样式被内链进入 */

    </style>

</head>

<body>



<!--   script http://127.0.0.1:7001/a.js replaced by import-html-entry -->

<!-- ignore asset js file replaced by import-html-entry -->

<!--   script http://127.0.0.1:7001/b.js replaced by import-html-entry -->

<!--   script http://127.0.0.1:7001/c.js replaced by import-html-entry -->

<!--   script https://unpkg.com/react@16.4.2/umd/react.production.min.js replaced by import-html-entry -->

<!--   script https://unpkg.com/mobx@5.0.3/lib/mobx.umd.js replaced by import-html-entry -->

<!--   script https://www.baidu.com/ replaced by import-html-entry -->

</body>

</html>

可以发现html中的css被处理成为内链样式的了，其中的js代码script被注释掉了

importHTML返回值有如下几个：

1、template---处理过后的html

2、assetPublicPath---资源路径

3、getExternalScripts---执行后返回脚本信息


4、getExternalStyleSheets---执行后返回样式信息

5、execScripts---js代码执行器，可以传入代理的window对象

我们可以看出来，经过import-html-entry 处理后能够拿到这个html中的js、css内容，其中css会被处理成为内链样式嵌入HTML中，js我们可以通过execScripts传入自己的代理window可以实现js沙箱隔离

qiankun中如何使用的？

我们观察qiankun源码中是如何使用的import-html-entry的

在src/loader.js中如下：

// 266行

const { template, execScripts, assetPublicPath, getExternalScripts } = await importEntry(entry, importEntryOpts);

// 347行

const scriptExports: any = await execScripts(global, sandbox && !useLooseSandbox, {

    scopedGlobalVariables: speedySandbox ? cachedGlobals : [],

  });

  // get the lifecycle hooks from module exports

  const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(

    scriptExports,

    appName,

    global,

    sandboxContainer?.instance?.latestSetProp,

  );

可以看到和预期一样

1、使用import-html-entry拿到js执行器

2、执行execScripts，并且传入自己的globalContext

3、根据导出，拿到生命周期函数lifecycle

源码解析

import-html-entry 的核心功能是通过 fetch 获取指定 URL 的 HTML 内容，然后解析并处理这个 HTML 模板，最终返回一个包含处理后的 HTML、CSS 和 JS 的 Promise 对象。具体步骤如下：

整体流程如下图所示：

execScripts

code = getExecutableScript()

通过function+with实现js沙箱

function getExecutableScript(scriptSrc, scriptText, opts = {}) {

	const { proxy, strictGlobal, scopedGlobalVariables = [] } = opts;



	const sourceUrl = isInlineCode(scriptSrc) ? '' : `//# sourceURL=${scriptSrc}\n`;



	// 将 scopedGlobalVariables 拼接成变量声明，用于缓存全局变量，避免每次使用时都走一遍代理

	const scopedGlobalVariableDefinition = scopedGlobalVariables.length ? `const {${scopedGlobalVariables.join(',')}}=this;` : '';



	// 通过这种方式获取全局 window，因为 script 也是在全局作用域下运行的，所以我们通过 window.proxy 绑定时也必须确保绑定到全局 window 上

	// 否则在嵌套场景下， window.proxy 设置的是内层应用的 window，而代码其实是在全局作用域运行的，会导致闭包里的 window.proxy 取的是最外层的微应用的 proxy

	const globalWindow = (0, eval)('window');

	globalWindow.proxy = proxy;

	// TODO 通过 strictGlobal 方式切换 with 闭包，待 with 方式坑趟平后再合并

	return strictGlobal

		? (

			scopedGlobalVariableDefinition

				? `;(function(){with(this){${scopedGlobalVariableDefinition}${scriptText}\n${sourceUrl}}}).bind(window.proxy)();`

				: `;(function(window, self, globalThis){with(window){;${scriptText}\n${sourceUrl}}}).bind(window.proxy)(window.proxy, window.proxy, window.proxy);`

		)

		: `;(function(window, self, globalThis){;${scriptText}\n${sourceUrl}}).bind(window.proxy)(window.proxy, window.proxy, window.proxy);`;

}

evalCode(scriptSrc, code)

通过eval执行代码

export function evalCode(scriptSrc, code) {

	const key = scriptSrc;

	if (!evalCache[key]) {

		const functionWrappedCode = `(function(){${code}})`;

		evalCache[key] = (0, eval)(functionWrappedCode);

	}

	const evalFunc = evalCache[key];

	evalFunc.call(window);

}

processTpl

const { template, scripts, entry, styles } = processTpl(getTemplate(html), assetPublicPath, postProcessTemplate);

看一下执行结果。

通过processTpl实现。

1、替换HTML

2、导出js入口列表

3、style列表

4、找到入口文件

Document Picture-in-Picture 介绍

    今天，我来介绍一个非常酷的前端功能：文档画中画 (Document Picture-in-Picture, 本文简称 PiP)。你有没有想过，网页上的任何内容能悬浮在桌面上？😏

🎬 视频流媒体的画中画功能

        你可能已经在视频平台（如腾讯视频、哔哩哔哩等网页）见过这种效果：视频播放时，可以点击画中画后。无论你切换页面，它都始终显示在屏幕的最上层，非常适合上班偷偷看电视💻

        在今天的教程中，不仅仅是视频，我将教你如何将任何 HTML 内容放入画中画模式，无论是动态内容、文本、图片，还是纯炫酷的 div，统统都能“飞”起来。✨

        一个如此有趣的功能，在网上却很少有详细的教程来介绍这个功能的使用。于是我决定写一篇详细的教程来教大家如何实现画中画 (建议收藏)😁

体验网址：Treasure-Navigation

github地址

📖 Document Picture-in-Picture 详细教程

🛠 HTML 基本代码结构

    首先，我们随便写一个简单的 HTML 页面，后续的 JS 和样式都会基于它实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document Picture-in-Picture API 示例</title>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

</head>



<body>

    <div id="container">

        <div id="pipContent">这是一个将要放入画中画的 div 元素！</div>

        <button id="clickBtn">切换画中画</button>

    </div>

    <script>

        // 在这里写你的 JavaScript 代码

    </script>

</body>

</html>

1️. 请求 PiP 窗口

    PiP 的核心方法是 window.documentPictureInPicture.requestWindow。它是一个 异步方法，返回一个新创建的 window 对象。

    PIP 窗口可以将其看作一个新的网页，但它始终悬浮在屏幕上方。

document.getElementById("clickBtn").addEventListener("click", async function () {

    // 获取将要放入 PiP 窗口的 DOM 元素

    const pipContent = document.getElementById("pipContent");

    // 请求创建一个 PiP 窗口

    const pipWindow = await window.documentPictureInPicture.requestWindow({

        width: 200,  // 设置窗口的宽度

        height: 300  // 设置窗口的高度

    });



    // 将原始元素添加到 PiP 窗口中

    pipWindow.document.body.appendChild(pipContent);

});

演示：

👏 现在，我们已经成功创建了一个画中画窗口！
这段代码展示了如何将网页中的元素放入一个新的画中画窗口，并让它悬浮在最上面。非常简单吧

关闭PIP窗口

可以直接点右上角关闭PIP窗口，如果我们想在代码中实现关闭，直接调用window上的api就可以了

window.documentPictureInPicture.window.close();

2️. 检查是否支持 PiP 功能

    一切不能兼容浏览器的功能介绍都是耍流氓，我们需要检查浏览器是否支持PIIP功能。
实际就是检查documentPictureInPicture属性是否存在于window上 🔧

if ('documentPictureInPicture' in window) {

    console.log("🚀 浏览器支持 PiP 功能！");

} else {

    console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");

}

    如果是只需要将视频实现画中画功能，视频画中画 (Picture-in-Picture) 的兼容性会好一点，但是它只能将元素放入画中画窗口。它与本文介绍的 文档画中画(Document Picture-in-Picture) 使用方法也是十分相似的。

3️. 设置 PiP 样式

    我们会发现刚刚创建的画中画没有样式，一点都不美观。那是因为我们只放入了dom元素，没有添加css样式。

3.1. 全局样式同步

假设网页中的所有样式如下：

<head>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

    <link rel="stylesheet" type="text/css" href="https://abc.css">

</head>

为了方便，我们可以直接把之前的网页的css样式全部赋值给画中画。

// 1. document.styleSheets获取所有的css样式信息

[...document.styleSheets].forEach((styleSheet) => {

    try {

        // 转成字符串方便赋值

        const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');

        // 创建style标签

        const style = document.createElement('style');

        // 设置为之前页面中的css信息

        style.textContent = cssRules;

        console.log('style', style);

        // 把style标签放到画中画的<head><head/>标签中

        pipWindow.document.head.appendChild(style);

    } catch (e) {

        // 通过 link 引入样式，如果有跨域，访问styleSheet.cssRules时会报错。没有跨域则不会报错

        const link = document.createElement('link');

        /**

         * rel = stylesheet 导入样式表

         * type: 对应的格式

         * media: 媒体查询（如 screen and (max-width: 600px)）

         *  href: 外部样式表的 URL

         */

        link.rel = 'stylesheet';

        link.type = styleSheet.type;

        link.media = styleSheet.media;

        link.href = styleSheet.href ?? '';

        console.log('error: link', link);

        pipWindow.document.head.appendChild(link);

    }

});

演示：

3.2. 使用 link 引入外部 CSS 文件

向其他普通html文件一样，可以通过link标签引入特定css文件:

创建 pip.css 文件:

#pipContent {

    width: 600px;

    height: 300px;

    background: skyblue;

}

js引用：

// 其他不变

const link = document.createElement('link');

link.rel = 'stylesheet';

link.href = './pip.css';  // 引入外部 CSS 文件

pipWindow.document.head.appendChild(link);

pipWindow.document.body.appendChild(pipContent);

演示：

3.3. 媒体查询的支持

可以设置媒体查询 @media (display-mode: picture-in-picture)。在普通页面中会自动忽略样式，在画中画模式会自动渲染样式

<style>

    #pipContent {

        width: 600px;

        height: 300px;

        background: pink;

        font-size: 20px;

    }

    

    <!-- 普通网页中会忽略 -->

    @media (display-mode: picture-in-picture) {

        #pipContent {

            background: lightgreen;

        }

    }

</style>

在普通页面中显示为粉色，在画中画自动变为浅绿色

演示：

4️. 监听进入和退出 PiP 模式的事件

我们还可以为 PiP 窗口 添加事件监听，监控画中画模式的 进入 和 退出。这样，你就可以在用户操作时，做出相应的反馈，比如显示提示或执行其他操作。

// 进入 PIP 事件

documentPictureInPicture.addEventListener("enter", (event) => {

    console.log("已进入 PIP 窗口");

});



const pipWindow = await window.documentPictureInPicture.requestWindow({

    width: 200,

    height: 300

});

// 退出 PIP 事件

pipWindow.addEventListener("pagehide", (event) => {

    console.log("已退出 PIP 窗口");

});

演示

5️. 监听 PiP 焦点和失焦事件

const pipWindow = await window.documentPictureInPicture.requestWindow({

    width: 200,

    height: 300

});



pipWindow.addEventListener('focus', () => {

    console.log("PiP 窗口进入了焦点状态");

});



pipWindow.addEventListener('blur', () => {

    console.log("PiP 窗口失去了焦点");

});

演示

6. 克隆节点画中画

我们会发现我们把原始元素传入到PIP窗口后，原来窗口中的元素就不见了。

我们可以把原始元素克隆后再传入给PIP窗口，这样原始窗口中的元素就不会消失了

const pipContent = document.getElementById("pipContent");

const pipWindow = await window.documentPictureInPicture.requestWindow({

    width: 200,

    height: 300

});

// 核心代码：pipContent.cloneNode(true)

pipWindow.document.body.appendChild(pipContent.cloneNode(true));

演示

PIP 完整示例代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document Picture-in-Picture API 示例</title>

    <style>

        #pipContent {

            width: 600px;

            height: 300px;

            background: pink;

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div id="container">

        <div id="pipContent">这是一个将要放入画中画的 div 元素！</div>

        <button id="clickBtn">切换画中画</button>

    </div>



    <script>

        // 检查是否支持 PiP 功能

        if ('documentPictureInPicture' in window) {

            console.log("🚀 浏览器支持 PiP 功能！");

        } else {

            console.warn("⚠️ 当前浏览器不支持 PiP 功能，更新浏览器或者换台电脑吧！");

        }



        // 请求 PiP 窗口

        document.getElementById("clickBtn").addEventListener("click", async function () {

            const pipContent = document.getElementById("pipContent");



            // 请求创建一个 PiP 窗口

            const pipWindow = await window.documentPictureInPicture.requestWindow({

                width: 200,  // 设置窗口的宽度

                height: 300  // 设置窗口的高度

            });



            // 将原始元素克隆并添加到 PiP 窗口中

            pipWindow.document.body.appendChild(pipContent.cloneNode(true));



            // 设置 PiP 样式同步

            [...document.styleSheets].forEach((styleSheet) => {

                try {

                    const cssRules = [...styleSheet.cssRules].map((rule) => rule.cssText).join('');

                    const style = document.createElement('style');

                    style.textContent = cssRules;

                    pipWindow.document.head.appendChild(style);

                } catch (e) {

                    const link = document.createElement('link');

                    link.rel = 'stylesheet';

                    link.type = styleSheet.type;

                    link.media = styleSheet.media;

                    link.href = styleSheet.href ?? '';

                    pipWindow.document.head.appendChild(link);

                }

            });



            // 监听进入和退出 PiP 模式的事件

            pipWindow.addEventListener("pagehide", (event) => {

                console.log("已退出 PIP 窗口");

            });



            pipWindow.addEventListener('focus', () => {

                console.log("PiP 窗口进入了焦点状态");

            });



            pipWindow.addEventListener('blur', () => {

                console.log("PiP 窗口失去了焦点");

            });

        });



        // 关闭 PiP 窗口

        // pipWindow.close();  // 可以手动调用关闭窗口

    </script>

</body>

</html>

总结

🎉 你现在已经掌握了如何使用 Document Picture-in-Picture API 来悬浮任意 HTML 内容！
希望能带来更灵活的交互体验。✨

如果你有什么问题，或者对 PiP 功能有更多的想法，欢迎在评论区与我讨论！👇📬

<img> 直接加载对比 new Image() 预加载

1. 加载时机和页面渲染的差异

• 直接渲染到 <img> 标签： 当你直接在 HTML 中通过 <img> 标签加载图片时，浏览器在遇到 <img> 标签时会立即开始加载图片。这意味着浏览器在渲染页面的过程中，会同步进行图片请求。当页面需要渲染图片时，可能会导致图片显示之前页面的其它部分无法完全显示，或者图片加载的过程中页面会出现闪烁或布局跳动。
  
  

  这种加载方式是 同步 的，即浏览器渲染页面时，图片的加载和显示是直接相关的。如果图片较大或者网络慢，用户可能会看到空白的占位符，直到图片加载完成。



• 使用 new Image() 和 img.src = src： 这种方式会在后台加载图片，不直接影响页面的渲染。也就是说，图片资源在浏览器缓存中已经加载好了，页面显示图片时，浏览器能快速地从缓存读取图片，而不必等待网络请求。浏览器不会因为加载图片而延迟页面的渲染。
  
  

  关键点是：通过 new Image() 加载图片会提前发起请求，将图片缓存到浏览器中，这意味着你可以在用户滚动或需要展示图片时，直接从缓存加载，而不需要重新请求网络资源。这个过程是 异步 的。

2. 浏览器的资源管理和缓存

• 图片预加载的缓存： 当你通过 new Image() 加载图片时，图片会被缓存在浏览器的内存中（通常是浏览器的资源缓存），因此如果图片已经被加载过，后续使用该图片时会直接从缓存读取，而不需要重新请求网络资源。
  
  

  而如果你直接用 <img> 标签来加载图片，浏览器同样会请求并缓存图片，但如果图片在初次加载时不可见（比如在页面下方），用户滚动到该位置时，可能会再次触发网络请求，尤其是在使用懒加载（lazy load）等技术时。如果图片已经预加载过，浏览器就可以从缓存中直接加载，避免了再次请求。

3. 避免页面阻塞

• 直接使用 <img> ：当浏览器在解析页面时遇到 <img> 标签，会立即发起网络请求来加载图片。如果图片资源很大或者服务器响应很慢，浏览器可能需要等待这些资源加载完成，才能继续渲染其他部分。这会导致页面的 渲染阻塞，即页面内容渲染较慢，特别是在图片多的情况下。


• 使用 new Image() 预加载：通过 new Image() 预加载图片，可以避免渲染时对页面的阻塞。浏览器在后台加载图片，直到需要展示图片时，图片已经准备好了，这样页面展示可以更快，用户体验也更好。

4. 适用场景

• 直接 <img> 标签加载：适用于图片较少且页面上几乎所有图片都需要立即展示的场景。例如，单一图片展示的页面。


• new Image() 预加载：适用于图片较多或需要延迟加载的场景，例如动态加载的图片、长页面或者需要懒加载的图片库。它允许你提前将图片加载到浏览器缓存中，减少后续显示时的加载时间。

5. 加载速度和时间

如果从加载速度和时间上来看，两者的差别可能不大，因为它们最终都会发起一次网络请求去加载图片。但是，new Image() 的优势在于：

• 它允许你在图片真正需要显示之前就开始加载，这样当用户需要看到图片时，图片已经在浏览器缓存中，可以即时显示。


• 使用 new Image() 可以提前加载图片，而不会影响页面的渲染顺序和内容显示，不会造成页面的阻塞。

6. 网络请求优化

new Image() 还可以和 并发请求 进行优化。如果你有多个图片需要预加载，可以通过多个 new Image() 实例来并行加载这些图片，而不影响页面的渲染。并且，如果你知道某些图片很可能会被需要（例如图片懒加载场景中的下拉加载图片），你可以提前加载这些图片，确保用户滚动时能立刻看到图片。

7. 总结对比

结论

虽然从技术上讲，直接在 <img> 标签中加载图片和使用 new Image() 设置 src 都会触发相同的图片加载过程，但是 使用 new Image() 进行预加载 提供了更灵活的控制，使得你可以在页面渲染时避免图片加载阻塞，提升页面的加载速度和用户体验。

（补充：代码示例小demo传送门)

前言

大家好，今天聊一下在做uniapp多端适配项目，需要用到自定义导航时，如何解决状态栏塌陷及导航栏安全区域多端适配问题，下文只针对H5、APP、微信小程序三端进行适配，通过封装一个通用高阶组件包裹自定义导航栏内容，主要是通过设置padding来使内容始终保持在安全区域，达到低耦合，可复用性强的效果。

一、创建NavbarWrapper.vue组件

大致结构如下：

<template>

  <view class="navbar-wrapper" :style="{

    paddingTop: statusBarHeight,

    paddingRight: rightSafeArea

  }">

    <slot/>

  </view>

</template>



<script>

  export default {

    name: 'NavbarWrapper',

    data() {

      return {

        // 像素单位

        pxUnit: 'px',

        // 默认状态栏高度

        statusBarHeight: 'var(--status-bar-height)',

        // 微信小程序右上角的胶囊菜单宽度

        rightSafeArea: 0

      }

    }

  }

</script>



<style scoped>

  .navbar-wrapper {

    /**

     * 元素的宽度和高度包括了内边距（padding）和边框（border），

     * 而不会被它们所占据的空间所影响

     * 子元素继承宽度时,只会继承内容区域的宽度 

    */

    box-sizing: border-box;

  }

</style>

目的

主要是动态计算statusBarHeight和rightSafeArea的值。

解决方案

在APP端只需一行css代码即可

.navbar-wrapper {

    padding-top: var(--status-bar-height);

}

下面是关于--status-bar-height变量的介绍：

从上图可以知道--status-bar-height只在APP端是手机实际状态栏高度，在微信小程序是固定的25px，并不是手机实际状态栏高度;

在微信小程序时，除了状态栏高度还需要获取右上角的胶囊菜单所占宽度，保持导航栏在安全区域。

以下使用uni.getWindowInfo()和uni.getMenuButtonBoundingClientRect()来分别获取状态栏高度和胶囊相关信息，api介绍如下图所示：

主要逻辑代码

在NavbarWrapper组件创建时，做相关计算

created() {

  const px = this.pxUnit

  // #ifndef H5

  // 获取窗口信息

  const windowInfo = uni.getWindowInfo()

  this.statusBarHeight = windowInfo.statusBarHeight + px

  // #endif



  // #ifdef MP-WEIXIN

  // 获取胶囊左边界坐标

  const { left } = uni.getMenuButtonBoundingClientRect()

  // 计算胶囊(包括右边距)占据屏幕的总宽度：屏幕宽度-胶囊左边界坐标

  this.rightSafeArea = windowInfo.windowWidth - left + px

  // #endif

}

用法

<NavbarWrapper>

  <view class="header">header</view>

</NavbarWrapper>

二、多端效果展示

微信小程序

APP端

H5端

三、源码

NavbarWrapper.vue

<template>

  <view class="navbar-wrapper" :style="{

    paddingTop: statusBarHeight,

    paddingRight: rightSafeArea

  }">

    <slot/>

  </view>

</template>



<script>

  export default {

    name: 'NavbarWrapper',

    data() {

      return {

        // 像素单位

        pxUnit: 'px',

        // 默认状态栏高度

        statusBarHeight: 'var(--status-bar-height)',

        // 微信小程序右上角的胶囊菜单宽度

        rightSafeArea: 0

      }

    },

    created() {

      const px = this.pxUnit

      // #ifndef H5

      // 获取窗口信息

      const windowInfo = uni.getWindowInfo()

      this.statusBarHeight = windowInfo.statusBarHeight + px

      // #endif

      

      // #ifdef MP-WEIXIN

      // 获取胶囊左边界坐标

      const { left } = uni.getMenuButtonBoundingClientRect()

      // 计算胶囊(包括右边距)占据屏幕的总宽度：屏幕宽度-胶囊左边界坐标

      this.rightSafeArea = windowInfo.windowWidth - left + px

      // #endif

    }

  }

</script>



<style scoped>

  .navbar-wrapper {

    /**

     * 元素的宽度和高度包括了内边距（padding）和边框（border），

     * 而不会被它们所占据的空间所影响

     * 子元素继承宽度时,只会继承内容区域的宽度 

    */

    box-sizing: border-box;

    background-color: deeppink;

  }

</style>

往期文章回顾

一文学会请求中断、请求重发、请求排队、请求并发

一文学会vue3如何自定义hook钩子函数和封装组件

table表格自适应浏览器窗口变化解决方案

近日无意中打开antdesign的package.json，然后就看到一砣恐怖的scripts

 "scripts": {

    "api-collection": "antd-tools run api-collection",

    "authors": "tsx scripts/generate-authors.ts",

    "build": "npm run compile && cross-env NODE_OPTIONS='--max-old-space-size=4096' npm run dist",

    "changelog": "npm run lint:changelog && tsx scripts/print-changelog.ts",

    "check-commit": "tsx scripts/check-commit.ts",

    "clean": "antd-tools run clean && rimraf es lib coverage locale dist report.html artifacts.zip oss-artifacts.zip",

    "clean:lockfiles": "rimraf package-lock.json yarn.lock",

    "precompile": "npm run prestart",

    "compile": "npm run clean && antd-tools run compile",

    "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run test:site",

    "deploy": "gh-pages -d _site -b gh-pages -f",

    "deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages -f",

    "predist": "npm run version && npm run token:statistic && npm run token:meta",

    "dist": "antd-tools run dist",

    "format": "biome format --write .",

    "install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 @testing-library/react@12",

    "install-react-17": "npm i --no-save --legacy-peer-deps react@17 react-dom@17 @testing-library/react@12",

    "bun-install-react-16": "bun remove react react-dom @testing-library/react && bun add --no-save react@16 react-dom@16 @testing-library/react@12",

    "bun-install-react-17": "bun remove react react-dom @testing-library/react && bun add --no-save react@17 react-dom@17 @testing-library/react@12",

    "prelint": "dumi setup",

    "lint": "npm run version && npm run tsc && npm run lint:script && npm run lint:biome && npm run lint:md && npm run lint:style && npm run lint:changelog",

    "lint:changelog": "tsx scripts/generate-component-changelog.ts",

    "lint:deps": "antd-tools run deps-lint",

    "lint:md": "remark . -f -q",

    "lint:script": "eslint . --cache",

    "lint:biome": "biome lint",

    "lint:style": "tsx scripts/check-cssinjs.tsx",

    "prepare": "is-ci || husky && dumi setup",

    "prepublishOnly": "tsx ./scripts/pre-publish.ts",

    "prettier": "prettier -c --write . --cache",

    "prettier-import-sort": "npm run prettier -- --plugin=@ianvs/prettier-plugin-sort-imports",

    "biome": "biome check --write",

    "pub": "echo 'Please use `npm publish` instead.'",

    "postpublish": "tsx scripts/post-publish.ts",

    "presite": "npm run prestart",

    "site": "npm i --no-save --legacy-peer-deps react@18.3.0-canary-c3048aab4-20240326 react-dom@18.3.0-canary-c3048aab4-20240326 && dumi build && cp .surgeignore _site",

    "size-limit": "size-limit",

    "sort:api-table": "antd-tools run sort-api-table",

    "sort:package-json": "npx sort-package-json",

    "prestart": "npm run version && npm run token:statistic && npm run token:meta && npm run lint:changelog",

    "start": "tsx ./scripts/set-node-options.ts cross-env PORT=8001 dumi dev",

    "pretest": "npm run version",

    "test": "jest --config .jest.js --no-cache",

    "test:all": "sh -e ./scripts/test-all.sh",

    "test:dekko": "node ./tests/dekko/index.test.js",

    "test:image": "jest --config .jest.image.js --no-cache -i -u --forceExit",

    "test:node": "npm run version && jest --config .jest.node.js --no-cache",

    "test:package-diff": "antd-tools run package-diff",

    "test:site": "jest --config .jest.site.js",

    "test:site-update": "npm run site && npm run test:site -- -u",

    "test:update": "jest --config .jest.js --no-cache -u",

    "test:visual-regression": "tsx scripts/visual-regression/build.ts",

    "token:meta": "tsx scripts/generate-token-meta.ts",

    "token:statistic": "tsx scripts/collect-token-statistic.ts",

    "tsc": "tsc --noEmit",

    "tsc:old": "tsc --noEmit -p tsconfig-old-react.json",

    "version": "tsx scripts/generate-version.ts"

  },

面对如此复杂的scripts，有没有被吓到。

相信我，在团队开发中，不要说团队成员，就算是开发者本身一段时间后也不一定能一眼就看到每一条脚本的作用了。

怎么呢？最好是加点注释

但是众所周知，package.json是不支持注释了。

这里给大家推荐一个VSCODE插件json_comments_extension，可以用来给任意JSON文件添加注释.

效果如下：

开源推荐

以下是我的一大波开源项目推荐:

• 全流程一健化React/Vue/Nodejs国际化方案 - VoerkaI18n


• 极致优雅的状态管理库 - AutoStore


• 无以伦比的React表单开发库 - speedform


• 终端界面开发增强库 - Logsets


• 简单的日志输出库 - VoerkaLogger


• 装饰器开发 - FlexDecorators


• 有限状态机库 - FlexState


• 通用函数工具库 - FlexTools


• 小巧优雅的CSS-IN-JS库 - flexstyled


• 为JSON文件添加注释的VSCODE插件 - json_comments_extension


• 开发交互式命令行程序库 - mixcli


• 强大的字符串插值变量处理工具库 - flexvars


• 前端link调试辅助工具 - yald


• 异步信号 - asyncsignal


• React/Vue/WebComponent树组件 - LiteTree

直接来看下着色器怎么写:

顶点着色器：

let vertexShader = /* glsl */`

varying vec2 vUv;

void main()

    {

      vUv = uv;

      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    }

`;

主要是定义了 vUv 这个可传递变量，为了把内置的纹理坐标传递到 fragmentShader。

片元着色器：

 let fragShader = /* glsl */`

    uniform float progress;

    uniform float edgeWidth;

    uniform vec3 edgeColor;

    uniform sampler2D mainTexture; 

    uniform sampler2D noiseTexture;  

    varying vec2 vUv;void main(void){

    

        vec4 originalColor = texture2D(mainTexture, vUv);   

        float noiseValue = texture2D(noiseTexture, vUv).r;

        vec4 finalColor = originalColor;

        

        if(noiseValue > progress)

        {

            discard;

        }



        if(noiseValue + edgeWidth > progress){

          finalColor = vec4(edgeColor, 1.0);

        }



        gl_FragColor = finalColor;



	}

`;

其中 originColor 是原始材质贴图，类型是 vec4，noiseValue 是读取的噪波贴图取 r 通道的值，事实上，噪波图是灰度图，所以取 rgb 任意通道的都可以。然后对于 noiseValue ，随着 progress 逐渐增大，小于 progress 数值的噪波片元越来越少，模型出现。下面那句 + edgeWidth 则是把 edgeColor 填充到里面，原理是一样的。最后输出颜色。

这是出现的逻辑，如果是要消失呢？控制下边界条件就可以了：

function render() {

  requestAnimationFrame(render);

  

  controller.update();

  // 出现

  if (uniforms.progress.value < 0) {

    uniforms.progress = 0;

    stride = dissolveSpeed;

  }

  // 消失

  if (uniforms.progress.value > 1) {

     uniforms.progress = 1;

     stride = -dissolveSpeed;

  }

  uniforms.progress.value += stride;



  renderer.render(scene, camera);

}

效果立竿见影：

再想一遍

写着色器和通用程序不大一样，单纯按上面这么讲可能不是很清晰，我们更深度地分析下，培养一下 rgb 思维。

已知出现和消失是互为逆过程，通过 CPU 端程序重新改变变化方向即可，我们按照一个状态，关注边界条件，分别从正向和逆向进行思考，给出两个版本分别的代码。

按照上面说的，我们关注，比如就 出现 的状态吧，边界条件是 阈值 和 噪波值 的比较结果。也就是 progress 和 noiseValue。

用 Exclidraw 画下示意图：

考虑 出现 的情况，剩余的进度或者叫阈值（越来越小）, 与当前片元噪声值比较大小，如果更大则舍弃掉表示还没出现的部分；与当前值往前剪掉的部分比较，如果更大则使用这个过渡色；其他情况是已经出现的部分，直接保留就可以了。

写成代码：

void main() {

	...

	

	float restProgress = 1.0 - dissolveProgress;

	if(noiseValue < restProgress) {

		discard;

	}

	if(noiseValue - edgeWidth < restProgress ) {

		gl_FragColor = finalColor;

	}



	...

}

反向来思考，随着阈值增加，出现的图像越来多，往前减掉过渡值（edgeWidth）, 这部分呈现过渡色；小于当前 noiseValue 的部分舍弃，是还没出现的部分。

写成代码：

void main() {

	...

	if(noiseValue > dissolveProgress)

	{

		discard;

	}

	

	if(noiseValue + edgeWidth > dissolveProgress){

		gl_FragColor = vec4(edgeColor, 1.0);

	}

	...

}

这样，我们就用两种等价的方法实现了同一效果，后面的章节我们使用 glsl 函数把 条件判断 语句去掉。

这里其实叫 edgeWidth 有歧义，换成 edgeThickness 可能比较符合，如果这个值过大，就会超出变化范围出现异常，所以还是要把其限制在一个比较小的范围，这里为了调试先让它最大值等于 1。

edgeWidth 值过大:

其他格式

我们拿更常用的其他格式来研究一下。通常 web 端会使用 gltf, fbx 等通用格式，我们这里拿 web 端最通用的 gltf 格式模型来说明，其他通用模型类型道理一样。

对于 gltf 格式来说，加载完模型就赋予了材质，可能的类型有 MeshStandardMaterial, MeshPhongMaterial, MeshBasicMaterial 等，我用封面的士兵模型，使用的是 MeshStandardMaterial 类型的材质，接下来看如何修改内置着色器而实现效果。

ShaderChunk 和 ShaderLib

来看下 three 的目录，较新版本的 three 把核心代码安排在 src 目录下，/examples/jsm 目录下则是以 插件addons的形式引入的额外功能，比如 GLTFLoader 之类比较通用的功能。而内部着色器的实现在 src/renderers/shaders 目录下：

我们直接打开 ShaderLib.js 文件找下模型使用的 MeshStandardMaterial 的定义：

可以看到是复用了 meshphysical 的着色器，这对着色器还在 MeshPhysicalMaterial 材质里被使用，通过材质类定义的 defines 字段来开启相应的计算，这样的做法使得 MeshStandardMaterial 作为 MeshPhysicalMaterial 的回退选项。到 ShaderChunk目录下打开 meshphysical.glsl.js 看下宏定义：

OK，已经了解了材质定义和对应着色器的关系了，接下来就是如何把我们的逻辑加到相应着色器字符串里了。

onBeforeCompile

官方文档约等于没写，还是去看 examples 的代码吧，关键字 onBeforeCompile 搜索下：

右下角点进去看代码：

这下就明白了，顾名思义，这个函数可以在编译着色器程序之前允许我们插入自己的代码， 我们可以根据功能对相应模块进行覆写或者添加功能，我们不希望修改修改默认着色器的内容，直接把溶解效果加到最后，接下来看下怎么做。

调试

按照这个做法，非常依赖 javascript 的 replace 方法，我们需要小心操作，经过实验，把所有代码放到同一串里是没问题的，这里需要反复打印调试，如果有问题请使用双引号来使用原始字符串。

如果没有处理格式，直接塞进去不会对齐的，很好辨认：

接下来直接移植代码：

看到注释的那句话了吗，如果注释掉，并把阈值开到最大覆盖全部范围，可以明显看到和设置的颜色不一样，原因是因为之前的 shader 代码处理结果是转化到线性输出显示的，我们在标准着色器最后处理，一样要做线性转化。这个线性转化的意思是 gamma 变换的逆变换， gamma 变换是由于人眼对于颜色的感知非线性，非线性的原因和视锥细胞，视杆细胞数量比例不一样有关，省略一万字，大家有兴趣自己去搜~

没有线性转换：

线性转换后颜色就正常了：

拓展

再换一种写法

之前我们用直接舍弃片元的方法来实现过渡，接下来我们使用更 shader 风格的写法来重写，因为这个效果显示和消失具有二值性（要么有颜色要么透明），可以用 step(x,y) 函数来写，这个函数比较 y > x 的结果，true 则返回 1，否则返回 0 , 正好可以来表达透明度。

看代码，只有 fragmentShader 不一样：

这里的想法是先控制是否显示颜色，找的边界就是 noiseValue - edgeWidth，然后再判断使用原来的像素或者过渡色，如果大于 noiseValue 使用原来的像素，否则使用过渡的颜色，然后 mix 函数这里的第三个变量刚好是 step 函数的结果，所以就可以切换这两颜色了。

哦对，记得设置这个 material.transparent = true; ，否则会使用默认的混合颜色白色：

整活

昨天在沸点发了两张图，其实很简单，到这里把过渡色换成贴图采样就行了，比如这样：

学会了吗？赶紧搬到项目里惊艳领导吧。

思考

• 能否和环境做交互？

更新

代码： github.com/wwjll/three…

在线 Demo: wwjll.github.io/three-pract…

写文章不易，点赞收藏是最好的支持~

效果展示

• 先录制的视频，再转化为GIF图片导致展示效果有点延迟，实际效果还是挺丝滑的，感兴趣的可以上手尝试一下
  

人物模型和动画获取

• 在mixamo.com网站，需要先登录一下，可以直接使用Google邮箱登录，然后来到Characters页，下方有100多种人物模型，点击左边卡片可以选择自己喜欢的人物模型，或者如下图和我选的一样
  


• 然后来到Animations页，默认如下图红框内展示的也是刚才我们选择的人物模型，如果右侧展示不对，需要回到Characters页重新选择人物模型
  


• 因为动画比较多，这里我们直接在左上角搜索框内搜索自己想要的动作动画即可，首先搜索Idle，我这里使用的动画是Happy Idle，还将右侧的Overdrive的值从50调整到75，值越大动画频率越快，调整好后直接点击右上方的DOWNLOAD
  


• 弹出的弹窗里的内容都不想要修改，直接点击如下图右下角的DOWNLOAD，等待一会后，选择本地文件夹下载即可
  


• 接着左上角搜索Running，选择Running卡片，并且勾选右侧的In Place，让人物模型在原地跑动；如果不勾选的话，因为动画本身带有位移，会影响我们使用ThreeJS改变人物模型的position控制人物位移的；设置好后直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 继续左上角搜索Jump，选择Jump卡片，并且勾选右侧的In Place，让人物模型在原地跑动；设置好后直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 继续左上角搜索Death，选择Falling Back Death卡片，这个动画不需要其他调整，直接点击DOWNLOAD，同样弹出的弹窗不需要修改，直接点击弹窗右下角的DOWNLOAD下载即可
  


• 这样就下载好了Idle(待机动作)、Running(跑步动作)、Jump(跳跃动作)、Death(死亡动作)的一组动作，以上动作的都可以根据个人喜好调整；如果打开mixamo.com网站比较慢或者下载有问题的话，也可以直接使用我下载好的actions里的动画模型
  

动画模型合并

• 打开Blender新建文件选择常规，我使用的版本是3.6.14的，不同版本可能存在差异
  


• 在右上角场景集合内，鼠标左键拖拽框选默认已有的Camera、Cube和Light，然后右键选择删除或者英文输入法下按下x键快速删除；后续在Blender里的所有操作，均需将输入法切换到英文输入；如果对Blender不是特别熟悉，可以优先阅读我之前整理的Blender学习整理这篇文章
  


• 选择左上角菜单栏里文件-->导入-->FBX(.fbx)，就会弹出导入设置弹窗
  


• 弹窗内只需选中之前下载好的Idle.fbx文件，然后直接点击右下角导入FBX即可
  


• 文件导入后，在右上角场景集合内，将动画下一级的目录鼠标双击重命名成idle
  


• 在中间布局窗口，将右上角的视图着色方式切换到材质预览，然后把观察点切换到-X方向，将下方窗口切换到非线性动画
  


• 点击动画右侧的按键，作用是下推动作块(将动作块作为新的片段下推到NLA堆栈顶部)，有点类似展开下拉菜单的效果，实际作用是创建NLA轨道，然后将idle动作放到一个单独的通道中
  


• 取消勾选通道对结果是否有影响(切换通道是否启用)
  


• 导入Running.fbx，导入流程和上述一致，导入后在右上角场景集合内重命名动画下一级目录为running
  


• 同样点击动画右侧的按键，下推动作块
  


• 同样取消勾选通道对结果是否有影响(切换通道是否启用)
  


• 鼠标点击选中idle动作，变成如下图颜色即被选中
  


• 选择上方添加-->添加动作片段
  


• 然后选中running
  


• 这时，在idle动作上方就添加了一个running动作通道，双击左侧如下图红框内重命名为running，左侧的名称就是我们后续使用ThreeJS控制人物模型切换动画时要使用的动作变量名
  


• 在右上角场景集合内，选中后面导入的模型右键后点击删除或者按下x键快速删除，将其删除
  


• 第一次删除可能删除不干净，场景集合内还有多余的文件，布局窗口也有遮挡物，这个遮挡物其实就是第二个模型里的人物建模，第一次只是把动画给删除掉了，所以需要再次如下图选中右侧红框内文件继续删除才能删除干净；注意删除的时候最好把导入的第一个模型收起来，防止误删
  


• 如上述操作后，就把idle动画和running动画合并到一个人物模型里，再重复上述操作，把Jump.fbx和Death.fbx文件依次导入进来，并且把jump动画和death动画添加到idle动画上方，每个动作一个通道；全部搞定后，可以点击如下图红框内的五角星，实心就代表被选中，依次选中每个动作，取消勾选通道影响，还可以按下键盘的空格播放各个动画
  


• 最后选择左上角文件-->导出-->glTF2.0(.glb/.gltf)，会弹出导出设置弹窗
  


• 弹窗内选择本地合适的文件夹，直接点击右下角的导出glTF2.0即可
  


• 可以参考我仓库里的models里的actions.glb