使用VerseWebX和pake构建跨平台的桌面应用程序

介绍

VerseWebX是基于Electron的技术框架,用于构建跨平台的桌面应用程序。

特点:

  1. 跨平台:可以在 Windows、macOS 和 Linux 等多个操作系统上运行。开发者只需编写一次代码,就可以在不同平台上构建出相同的应用程序。
  2. 基于 Web 技术:使用 Web 技术栈,包括 HTML、CSS 和 JavaScript,使得开发者可以使用熟悉的前端开发技能构建桌面应用程序。
  3. 强大的功能扩展性:提供了丰富的 API 和插件系统,开发者可以通过调用底层的操作系统功能和硬件设备来扩展应用程序的功能。
  4. 自定义界面:允许开发者使用 HTML 和 CSS 来创建应用程序的界面,可以灵活地设计和定制用户界面。

pake是基于Rust的技术框架,可以构建跨平台的桌面应用程序。

特点:

  1. 高性能:它使用零成本抽象、无运行时开销和优化的编译器,可以生成高效的机器码,使得打包的应用程序能够运行得更快。
  2. 并发性:它提供了线程安全的标准库和异步编程的原生支持,使得打包的应用程序可以更好地利用多核处理器和处理并发任务。
  3. 跨平台支持:Rust 的编译器支持多个目标平台,包括 Windows、macOS、Linux 和嵌入式系统等。这使得打包的应用程序可以在不同的操作系统和硬件上运行。
  4. 轻量级:Rust 的运行时依赖非常小,使得打包的应用程序可以保持较小的体积。这对于部署和分发应用程序非常有优势。

相同:两者都可以构建基于本地静态文件或任意url为程序

不同:VerseWebX我调整了文件配置,无论你使用什么操作系统都会输出多平台程序包,构建完成后会根据文件后缀自动分类,更利于本地化使用

总的来说,无论VerseWebX还是pake都使得打包应用程序更加方便和高效。

VerseWebX打包URL为桌面程序

安装

先把源码下载到本地

1
git clone https://github.com/rcy1314/VerseWebX

或到Release下载

运行

一、运行前确保有Node.js环境,可前往官方网站下载和安装Node.js。

1、安装所有依赖项

1
npm install

如果报错请尝试sudo npm install

2、安装Electron Builder:

1
npm install electron-builder --save-dev

二、项目的根目录下运行以下命令来执行打包操作:

1
npm run build

或使用

1
npx electron-builder build

结束,等待运行构建。

https://github.com/rcy1314/VerseWebX

注意:main.js文件内包含web url路径和本地路径,可根据需要自行更改,设定的图标必须是512*512分辨率,如果构建包括linux所有文件类型package-linux.js则需将package-linux.js内的代码替换掉package.js内的

PAKE打包URL为桌面程序

安装

确保您的 Node.js 版本为 16.0 或更高版本(例如 16.8)。避免用于安装。如果您在使用 npm 时遇到权限问题,请参阅如何在没有 sudo 的情况下修复 npm 抛出错误sudo

1
npm install pake-cli -g 

用法

1
pake [url] [options]

默认情况下,打包的应用程序将位于当前工作目录中。由于环境配置,第一次打包可能需要一些时间。请耐心等待。

注意:包装需要生锈环境。如果未安装 Rust,系统将提示您进行安装确认。如果安装失败或超时,您可以手动安装

[网址]

URL 是指向要打包的网页的链接或本地 HTML 文件的路径。这是强制性的。

[选项]

各种选项可用于定制。您可以在打包过程中传递相应的参数以实现所需的配置。

[姓名]

指定应用程序名称。如果未提供,系统将提示您输入。建议使用英语。

1
--name <value>

[图标]

指定应用程序图标。支持本地和远程文件。默认情况下,它使用 Pake 品牌图标。有关自定义图标,请访问图标图标macOS 图标

  • 对于 macOS,请使用格式。.icns
  • 对于 Windows,请使用格式。.ico
  • 对于 Linux,请使用格式。.png
1
--icon <path>

我的示例:

1
pake https://noisework.cn name Noise copy-iter-file --icon /Users/noise/Downloads/icon.icns  show-menu show-system-tray

[高度]

设置应用程序窗口的高度。默认值为 。780px

1
--height <number>

[宽度]

设置应用程序窗口的宽度。默认值为 。1200px

1
--width <number>

[透明]

启用或禁用沉浸式标头。默认值为 。使用以下命令启用此功能(仅限 macOS)。false

1
--transparent

[全屏]

确定应用程序是否全屏启动。默认值为 。使用以下命令启用全屏。false

1
--fullscreen

[多支持]

打包应用程序以支持英特尔和 M1 芯片,专用于 macOS。默认值为 。false

先决条件
  • 注意:启用此选项后,必须使用 Rust 官方网站上的 rustup 安装 Rust。不支持通过brew安装。
  • 对于英特尔芯片用户,请使用以下命令安装 arm64 跨平台软件包以支持 M1 芯片:
1
rustup target add aarch64-apple-darwin
  • 对于 M1 芯片用户,请使用以下命令安装 x86 跨平台软件包以支持英特尔芯片:
1
rustup target add x86_64-apple-darwin
用法
1
--multi-arch

[对象]

选择 Linux 的输出包格式。选项包括 、 或 。如果选择 ,则两者和都将打包。默认值为 。deb``appimage``all``all``deb``appimage``all

1
--targets <format>

[用户代理]

自定义浏览器用户代理。默认值为空。

1
--user-agent <value>

[显示菜单]

显示菜单栏。默认值为不显示。使用以下命令启用菜单栏。建议 macOS 用户使用。

1
--show-menu

[显示系统托盘]

显示系统托盘。默认值为不显示。使用以下命令启用系统托盘。

1
--show-system-tray

[系统托盘图标]

指定系统托盘图标。这仅在启用系统托盘时有效。图标必须采用或格式,并且应该是尺寸范围为 32x32 到 256x256 像素的图像。.ico``.png

1
--system-tray-icon <path>

[复制文件]

启用递归复制。当 URL 是本地文件路径时,启用此选项会将包含 URL 中指定的文件的文件夹以及所有子文件复制到 Pake 静态文件夹。默认情况下,此功能处于禁用状态。

1
--copy-iter-file

关于PAKE还可以使用github action运行,更详细的使用说明请访问:https://github.com/tw93/Pake