前言

Tauri 2.0 正式版终于在 2024 年 10 月 2 日正式发布了。这次重大更新不仅带来了令人兴奋的新特性，更是为跨平台应用开发开辟了一条全新的道路。让我们一起来看看这个重量级版本带来了哪些惊喜！

1.移动端支持：拥抱全平台时代

Tauri 2.0 最引人注目的特性莫过于对 iOS 和 Android 的全面支持。现在，您可以用同一套代码库开发桌面端（Windows、macOS、Linux）和移动端应用，真正实现"一次编写，到处运行"的梦想。这不仅大大提高了开发效率，还为您的应用打开了更广阔的市场。

2.插件系统升级：灵活性与可扩展性的完美结合

新版本中，Tauri 将大量核心功能转移到了插件中。这意味着您可以根据需求自由选择功能，让应用更加轻量化。同时，插件系统的改进也为社区贡献打开了大门，期待看到更多创新的插件涌现。Tauri 2.0 的插件系统不仅更加灵活,还提供了丰富的官方插件,满足各种开发需求。以下是部分官方插件及其功能:

• 自动启动 (Autostart): 让您的应用在系统启动时自动运行。


• 条形码扫描器 (Barcode Scanner): 在移动应用中使用相机扫描二维码和条形码。


• 生物识别 (Biometric): 在Android和iOS上进行生物识别认证。


• 剪贴板 (Clipboard): 读取和写入系统剪贴板。


• 命令行接口 (CLI): 解析命令行参数。


• 深度链接 (Deep Linking): 将您的Tauri应用设置为特定URL的默认处理程序。


• 对话框 (Dialog): 用于打开/保存文件和显示消息的原生系统对话框。


• 文件系统 (File System): 访问文件系统。


• 全局快捷键 (Global Shortcut): 注册全局快捷键。


• HTTP客户端: 使用Rust编写的HTTP客户端。


• 本地主机 (Localhost): 在生产应用中使用本地主机服务器。


• 日志 (Logging): 可配置的日志记录。


• NFC: 在Android和iOS上读写NFC标签。


• 通知 (Notifications): 向用户发送原生通知。


• 操作系统信息 (OS Information): 读取操作系统信息。


• 持久化作用域 (Persisted Scope): 在文件系统中持久化运行时作用域更改。


• 定位器 (Positioner): 将窗口移动到常用位置。


• 进程 (Process): 访问当前进程。


• Shell: 使用默认应用程序管理文件和URL,以及生成子进程。


• 单实例 (Single Instance): 确保Tauri应用同时只运行一个实例。


• SQL: 提供前端与SQL数据库通信的接口。


• 存储 (Store): 持久化的键值存储。


• Stronghold: 加密、安全的数据库。


• 系统托盘 (System Tray): 系统托盘功能。


• 更新器 (Updater): Tauri应用的应用内更新。


• 上传 (Upload): 通过HTTP进行文件上传。


• WebSocket: 在JavaScript中使用Rust客户端打开WebSocket连接。


• 窗口自定义 (Window Customization): 自定义窗口外观和行为。


• 窗口状态 (Window State): 保存窗口大小和位置。

这些插件涵盖了从基础功能到高级特性的广泛范围,让开发者能够根据项目需求灵活选择。通过这种模块化的方式，Tauri不仅保持了核心框架的轻量级，还为开发者提供了强大的扩展能力。无论您是开发一个简单的工具还是复杂的企业级应用，Tauri的插件系统都能满足您的需求。

3.安全性大幅提升：告别allowlist，迎接新的权限系统

Tauri 2.0 抛弃了旧的 allowlist 系统，引入了更加灵活和强大的权限、作用域和功能系统。这不仅提高了安全性，还让开发者能够更精细地控制应用的权限。值得一提的是，Tauri 还通过了独立的安全审计，让您使用起来更加放心。

4.性能优化：IPC层重写，更快更强

通过重写进程间通信（IPC）层，Tauri 2.0现在支持原始有效载荷，这意味着在前端和后端之间传输大量数据时，性能得到了显著提升。如果您的应用需要处理大量数据，这个特性绝对不容错过。

5.开发体验升级：HMR支持更给力

热模块替换（HMR）现在扩展到了移动设备和模拟器。这意味着您可以实时预览应用在不同设备上的表现，大大加速了开发和调试过程。

6.分发更简单：一站式解决方案

Tauri 2.0提供了详尽的分发指南，覆盖了从App Store到Google Play，再到Microsoft Store等多个平台。无论您的目标市场在哪里，Tauri都能帮您轻松应对。

结语

Tauri 2.0 的正式发布无疑是跨平台开发领域的一个重要里程碑。它不仅延续了 Tauri 一贯的轻量、快速的特点，还通过移动端支持、增强的插件系统和改进的安全机制等特性，为开发者提供了更强大、更灵活的工具。

如果您正在寻找一个能够同时覆盖桌面端和移动端的开发框架，Tauri 2.0绝对值得一试。它不仅能帮您节省时间和资源，还能为您的应用带来卓越的性能和安全性。

参考文章

v2.tauri.app/blog/tauri-…

v2.tauri.app/blog/tauri-…

前段时间手底下的小伙伴跟我吐槽，说后端一点小改动就马上要包，电脑性能很差一旦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传送门)

CI/CD这个概念很实用，但我们这种小作坊，没有一些很高大上的应用。

最常见的使用场景就是，开发者一键提交分支master，交给工作流工具完成构建，部署的后续操作，自动更新测试或线上环境。

个人博客等项目可以使用Github action来实现，但公司的代码在云效上，我更习惯于使用云效Flow来实现自动化部署。他的操作菜单是可视化的，非常方便，还有一些推送机器人消息的傻瓜化配置插件。

目前遇到一个需求，就是同一个uni-app小程序项目，需要部署到多个不同的小程序上。每个小程序的主要功能类似，但都有一些定制改动。

每次项目发版时，如果要手动挨个在微信开发者工具上切换、上传，会非常繁琐，而且uni-app使用dev命令输出的开发环境微信小程序项目代码也没有优化，正式发版时哪怕只有一个小程序也需要在dev、build两个项目里来回切。

因此非常需要自动化部署来节省精力。

下面梳理一下微信小程序的批量自动化部署实现流程。

准备工作

常见的web项目自动化部署，至少包含代码触发、构建、部署这3个步骤。

其中构建步骤中操作的产物会被打包上传，并在部署步骤中，下载到目标服务器，然后执行后续目录操作、启动等操作。

但是微信小程序的部署不需要这些操作，而是通过在node脚本中执行miniprogram-ci这个工具的相关方法来实现的。

miniprogram-ci的相关文档请参考这里。

密钥及IP白名单配置

跟着文档操作，首先需要到微信小程序管理后台的开发设置中进行配置。

点击生成按钮即可创建密钥，关闭后只能重新生成。

将密钥文件下载到安全的位置。由于我们的项目是私有库，这里就直接放到了项目deploy目录下。多个小程序的密钥可以放在一起，默认已经用appId做了区分。

云效Flow的构建集群提供了一组IP地址，将这些IP地址加入白名单即可。地址如下：

47.94.150.88

47.94.150.17

47.93.89.246

123.56.255.38

112.126.70.240

来源

IP地址不在白名单的话，调用上传时会报错。如果在本地调试，别忘了将本机的公网IP加入白名单，或者临时关闭。

构建脚本

uni-app项目使用vite框架，这里用到了.env环境变量的相关功能，原生微信小程序请自行实现或省略此功能。

更新版本号

微信小程序上传时，需要指定版本号。

版本号标准的用法还是放在package.json中，所以我在自动化部署实现过程中，顺便就引入了standard-version版本号管理。(项目被标记为deprecated，但我没有找到其他适合私有库的版本号管理工具，欢迎指点。)

standard-version可以自动根据git提交记录生成CHANGELOG.md。

并按照以下初始规则来生成版本号：

如果上个版本之间的提交只有fixed，更新patch版本号，比如1.0.0更新到1.0.1。

否则更新minor版本号，比如1.0.0更新到1.1.0。

更新版本号的同时，它会将CHANGELOG.md与更新版本号以后的package.json一同提交到git，同时创建一个版本号对应的tag。

在一般项目中这样就足够了，但是如果还想在小程序中展示这个版本号，就会存在问题——无法引入package.json文件。

而且使用wx.getAccountInfoSync虽然也能获取版本号，但只有正式环境能用，在体验版、开发版中是空字符串。

因此，我只能修改部署版本命令，加上了一些后处理脚本，将版本号同步更新到环境变量中。

在package.json的script中，添加以下命令：

{

  "scripts": {

    "release": "standard-version && node deploy/deploy.js version",

    "release:minor": "standard-version -- --release-as minor && node deploy/deploy.js version",

    "release:beta": "standard-version -p beta && node deploy/deploy.js version"

  }

}

多提一嘴，release:minor是在提交记录只有fixed但又希望更新minor版本时使用的，可以无视默认规则。当然也可以无视所有规则直接指定具体版本号，具体使用可查看文档(github.com/conventiona…

后处理脚本

在deploy目录下，创建deploy.js文件，内容如下：

const fs = require('node:fs')

const path = require('node:path')

const process = require('node:process')

const { execSync } = require('node:child_process')

const JSON5 = require('json5')

const ci = require('miniprogram-ci')

const { Command } = require('commander')

const dayjs = require('dayjs')

const dotenv = require('dotenv')

const { version } = require('../package.json')



const program = new Command()



// 同步版本号

program

  .command('version')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    const envPath = path.resolve(__dirname, '../.env')

    // 读取 .env 文件的内容

    const envContent = fs.readFileSync(envPath, 'utf8')



    // 分割每一行

    const lines = envContent.split('\n')



    // 定义新的内容数组

    const newLines = []



    // 遍历每一行，查找并修改 VITE_APP_VERSION 的值

    lines.forEach((line) => {

      if (line.startsWith('VITE_APP_VERSION=')) {

        newLines.push(`VITE_APP_VERSION=${version}`)

      }

      else {

        newLines.push(line) // 保留其他行，包括注释

      }

    })



    // 将修改后的内容写回 .env 文件

    fs.writeFileSync(envPath, newLines.join('\n'))



    // 添加文件到暂存区

    execSync(`git add ${envPath}`)



    // 获取前一次提交的标签

    let tag

    try {

      tag = execSync('git describe --tags --abbrev=0').toString().trim()

    }

    catch (error) {

      console.error('没有找到标签')

      process.exit(1)

    }



    // 将当前暂存区的改动追加到前一次提交中

    execSync('git commit --amend --no-edit')



    // 删除旧的标签

    execSync(`git tag -d ${tag}`)



    // 将标签移动到新的提交

    execSync(`git tag ${tag}`)

  })



program.parse(process.argv)

这个脚本会读取.env文件，找到VITE_APP_VERSION这一行，将其值更新为package.json中的version，然后将改动合并到前一次的git提交中，也就是standard-version所创建的提交。

没有用dotenv是因为这个工具更适合读取配置，但写入时会丢失注释信息。

构建小程序

如果只有一个小程序，可以略过此步，直接执行构建命令然后上传。

有多个小程序时，需要先执行一些定制脚本，再执行构建。比如至少要做的一项操作是更新appId，在uni-app中，这项配置位于manifest.json中。

在deploy/deploy.js中添加以下代码：

// 切换小程序

program

  .command('toggle')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }

    // 定义文件路径

    const filePath = path.join(__dirname, '../src/manifest.json')

    // 读取 JSON 文件

    fs.readFile(filePath, 'utf8', (err, data) => {

      if (err) {

        console.error('读取文件失败:', err)

        return

      }



      try {

        // 解析 JSON 数据（支持注释）

        const jsonData = JSON5.parse(data)



        // 修改 appid 字段

        jsonData['mp-weixin'].appid = options.appid



        // 将修改后的 JSON 数据转换为字符串（支持注释格式）

        console.log(jsonData)

        const updatedData = JSON.stringify(jsonData, null, 2)

        console.log(updatedData)

        // 写入修改后的数据到 JSON 文件

        fs.writeFile(filePath, updatedData, 'utf8', (err) => {

          if (err) {

            console.error('写入文件失败:', err)

            return

          }

          console.log('文件已成功更新')

        })

      }

      catch (err) {

        console.error('解析 JSON 数据失败:', err)

      }

    })

  })

这个脚本会读取manifest.json文件，找到mp-weixin.appid这一行，将其值更新为命令行参数中的appid，然后将改动写入manifest.json文件。

调用脚本的命令例子为：

node deploy/deploy.js toggle --appid=你的appid

上传小程序

在deploy/deploy.js中添加以下代码：

// 上传小程序

program

  .command('upload')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }



    // 获取当前工作目录的父路径

    const projectDir = path.join(__dirname, '../')



    const project = new ci.Project({

      appid: options.appid,

      type: 'miniProgram',

      projectPath: `${projectDir}/dist/build/mp-weixin`,

      privateKeyPath: `${projectDir}/deploy/private.${options.appid}.key`,

      // ignores: ['node_modules/**/*'],

    })

    ci.upload({

      project,

      version,

      desc: `CI机器人于${dayjs().format('YYYY-MM-DD HH:mm:ss')}上传`,

      setting: {

        es6: true,

        es7: true,

        minify: true,

        // autoPrefixWXSS: true,

        minifyWXML: true,

        minifyJS: true,

      },

    }).then((res) => {

      console.log(res)

      console.log('上传成功')

      process.exit(0)

    }).catch((error) => {

      if (error.errCode === -1) {

        console.log('上传成功')

        process.exit(0)

      }

      console.log(error)

      console.log('上传失败')

      process.exit(-1)

    })

  })



program.parse(process.argv)

这个脚本会调用微信小程序的CI接口，将小程序上传到微信服务器。调用脚本的命令例子为：

node deploy/deploy.js upload --appid=你的appid

其中appid在命令行中传入，而version是从package.json中读取的。

完整的deploy.js文件

const fs = require('node:fs')

const path = require('node:path')

const process = require('node:process')

const { execSync } = require('node:child_process')

const JSON5 = require('json5')

const ci = require('miniprogram-ci')

const { Command } = require('commander')

const dayjs = require('dayjs')

const dotenv = require('dotenv')

const { version } = require('../package.json')



const program = new Command()



// 同步版本号

program

  .command('version')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    const envPath = path.resolve(__dirname, '../.env')

    // 读取 .env 文件的内容

    const envContent = fs.readFileSync(envPath, 'utf8')



    // 分割每一行

    const lines = envContent.split('\n')



    // 定义新的内容数组

    const newLines = []



    // 遍历每一行，查找并修改 VITE_APP_VERSION 的值

    lines.forEach((line) => {

      if (line.startsWith('VITE_APP_VERSION=')) {

        newLines.push(`VITE_APP_VERSION=${version}`)

      }

      else {

        newLines.push(line) // 保留其他行，包括注释

      }

    })



    // 将修改后的内容写回 .env 文件

    fs.writeFileSync(envPath, newLines.join('\n'))



    // 添加文件到暂存区

    execSync(`git add ${envPath}`)



    // 获取前一次提交的标签

    let tag

    try {

      tag = execSync('git describe --tags --abbrev=0').toString().trim()

    }

    catch (error) {

      console.error('没有找到标签')

      process.exit(1)

    }



    // 将当前暂存区的改动追加到前一次提交中

    execSync('git commit --amend --no-edit')



    // 删除旧的标签

    execSync(`git tag -d ${tag}`)



    // 将标签移动到新的提交

    execSync(`git tag ${tag}`)

  })



// 切换小程序

program

  .command('toggle')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }

    // 定义文件路径

    const filePath = path.join(__dirname, '../src/manifest.json')

    // 读取 JSON 文件

    fs.readFile(filePath, 'utf8', (err, data) => {

      if (err) {

        console.error('读取文件失败:', err)

        return

      }



      try {

        // 解析 JSON 数据（支持注释）

        const jsonData = JSON5.parse(data)



        // 修改 appid 字段

        jsonData['mp-weixin'].appid = options.appid



        // 将修改后的 JSON 数据转换为字符串（支持注释格式）

        console.log(jsonData)

        const updatedData = JSON.stringify(jsonData, null, 2)

        console.log(updatedData)

        // 写入修改后的数据到 JSON 文件

        fs.writeFile(filePath, updatedData, 'utf8', (err) => {

          if (err) {

            console.error('写入文件失败:', err)

            return

          }

          console.log('文件已成功更新')

        })

      }

      catch (err) {

        console.error('解析 JSON 数据失败:', err)

      }

    })

  })



// 上传小程序

program

  .command('upload')

  .option('-a, --appid <type>', 'application id')

  .action((options) => {

    if (!options.appid) {

      console.error('请输入 application id')

      process.exit(1)

    }



    // 获取当前工作目录的父路径

    const projectDir = path.join(__dirname, '../')



    const project = new ci.Project({

      appid: options.appid,

      type: 'miniProgram',

      projectPath: `${projectDir}/dist/build/mp-weixin`,

      privateKeyPath: `${projectDir}/deploy/private.${options.appid}.key`,

      // ignores: ['node_modules/**/*'],

    })

    ci.upload({

      project,

      version,

      desc: `CI机器人于${dayjs().format('YYYY-MM-DD HH:mm:ss')}上传`,

      setting: {

        es6: true,

        es7: true,

        minify: true,

        // autoPrefixWXSS: true,

        minifyWXML: true,

        minifyJS: true,

      },

    }).then((res) => {

      console.log(res)

      console.log('上传成功')

      process.exit(0)

    }).catch((error) => {

      if (error.errCode === -1) {

        console.log('上传成功')

        process.exit(0)

      }

      console.log(error)

      console.log('上传失败')

      process.exit(-1)

    })

  })



program.parse(process.argv)

如果是原生微信小程序，且使用了npm依赖，只需要在upload之前执行一下构建命令即可：

// 在有需要的时候构建npm

const warning = await ci.packNpm(project, {

  ignores: [],

  reporter: (infos) => { console.log(infos) }

})

console.warn(warning)

// ci.upload()

在本地调试时，用以下命令即可模拟构建的完整操作了：

node deploy/deploy.js toggle --appid=小程序A

pnpm run build:mp-weixin:小程序A

node deploy/deploy.js upload --appid=小程序A

注意这里的build命令，对应package.json中脚本的写法为：

"build:mp-weixin:小程序A": "uni build -p mp-weixin --mode 小程序A",

传入mode参数时，执行时会读取.env.小程序A中定义的环境变量，从而实现一些定制化的操作。

可以将这组命令写成sh脚本，每个小程序一个，都放在deploy目录下，在Flow工作流中调用。

上传命令执行成功后，微信小程序后台版本管理中就可以看到这个版本了：

后续的提审、发布操作目前仍需人工操作。

配置云效Flow

本地调试正常后，最后来配置云效Flow。

前面的代码触发不变，后面的部署步骤可以直接删除。

构建脚本为：

npm i -g pnpm

pnpm config set registry https://registry.npmmirror.com

pnpm i

node deploy/deploy.js toggle --appid=小程序A

pnpm run build:mp-weixin:小程序A

node deploy/deploy.js upload --appid=小程序A

如果有多个小程序，可以配置多个并行步骤：

待优化

依赖应该只需要安装一次，即将安装依赖步骤与构建步骤分开。

(可选)配置通知机器人

在构建步骤窗口的底部，可以添加通知插件。

这里使用的是钉钉机器人，教程参考这里

大致步骤为：

此后每次发版，只需提版合并到master分支，等待片刻收到钉钉机器人的提示，就可以准备提审了。

参考来源：

• 微信小程序构建发布

AI编程大大的提高了人们的开发效率。

cursor

cursor是一个集成了GPT4、Claude 3.5等先进LLM的类VScode的编译器，可以理解为在vscode中集成了AI辅助编程助手。

cursor内置了很多LLMs，包括最先进的GPT4s、Claude3.5s和openai最新发布的推理模型o1-preview和o1-mini，在右上角的设置中即可打开相应的模型进行辅助编程。
最常用的快捷键就下面四个：

• Tab：自动填充


• Ctrl+K：编辑代码


• Ctrl+L：(compose模式对话)回答用户关于代码和整个项目的问题，适合复杂的多轮对话，需要处理文件的场景，能长期保存对话历史


• Ctrl+i：(chat模式对话)简单的问答，系统快速的文本，生成实时对话需求

下面将带大家使用cursor去爬取美女图片。这个项目并不复杂，我们使用chat模式来进行对话。我们使用ctrl+i调出对话框，输入要求即可

接着cursor就会给你回复，直接按照回复运行即可。可以看到图片已经爬取出来了

当然，这种方式也能很快的帮我们学习。当我们成品做出来之后，我们可以使用vscode的marscode进行问答，让他告诉我们代码的作用是什么，小编称之为面向实战学习，下面带着大家迅速学习一个简单demo感受一下学习的效率。

marscode

marscode是vscode集成的一款AI插件，能够让AI给用户进行页面内部的问答，这样就不用打开外置的AI应用进行询问，给程序员沉浸式的体验。
这是一个爬取微博热榜的简单小demo

const request = require('request-promise');

const cheerio = require('cheerio');

const createCsvWriter = require('csv-writer').createObjectCsvWriter;



// 目标URL

const url = 'https://tophub.today/n/KqndgxeLl9';



// 发送HTTP请求并解析HTML

request(url)

    .then(html => {

        const $ = cheerio.load(html);

        const hotList = [];



        // 选择表格中的每一行

        $('table tr').each((index, element) => {

            if (index === 0) return; // 跳过表头行



            const rank = $(element).find('td:nth-child(1)').text().trim();

            const title = $(element).find('td:nth-child(2) a').text().trim();

            const heat = $(element).find('td:nth-child(3)').text().trim();

            const link = $(element).find('td:nth-child(2) a').attr('href');



            hotList.push({ rank, title, heat, link });

        });



        // 创建CSV写入器

        const csvWriter = createCsvWriter({

            path: 'hot_list.csv',

            header: [

                { id: 'rank', title: 'Rank' },

                { id: 'title', title: 'Title' },

                { id: 'heat', title: 'Heat' },

                { id: 'link', title: 'Link' }

            ]

        });



        // 写入CSV文件

        csvWriter.writeRecords(hotList)

            .then(() => console.log('CSV file has been saved.'))

            .catch(err => console.error('Error writing CSV file:', err));

    })

    .catch(err => console.error('Error fetching the webpage:', err));

我们是没有学过爬虫的哦，里面的内容都看不太懂，我们让AI来带着我们学习。

const request = require('request-promise');

const cheerio = require('cheerio');

const createCsvWriter = require('csv-writer').createObjectCsvWriter;

首先发起疑惑，这个require是什么啊？我们打开marscode选中要询问的代码就可以直接询问

可以看到marscode已经给了我们回复，原来这是es6之前的导入模块的方式。这三个模块的作用分别是发送请求的模块，解析HTML的模块和将爬取到的文本写入csv文件的模块。
我们可以接着询问。我们发现了一个 $ 符号看不懂，我们再问问AI这是什么

更多的就不再演示了，总之通过这种方式能极大的提高学习的效率

前言

大家好，今天聊一下在做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