自定义Electron的安装界面之setuply

2025-11-09  本文已影响0人  WantACocktail

前言

Electron作为一个基于JavaScript、HTML 和 CSS 构建桌面应用程序的框架,被前端开发者广泛应用于开发windows应用,但因NSIS打包后无法高度自定义安装界面,导致我们开发的应用总是像缺失了一角。

不完美的解决方案

用electron单独再写一个安装程序

electron因为在打包时会自带ChromiumNode.js,导致包体积非常大,显然作为我们的安装程序是不合适的

完美解决方案

我们似乎记得隔壁Tauri的优势就是构建体积小、性能高的windows应用,ok,取“敌人之长,补自身之短”,完美!

但是Tauri是基于Rust的,学习曲线很陡,但是好在社区已有开源框架setuply能够快速的开发Tauri应用,无需写Rust,只需用网页开发就能够快速构建体积小、性能高的windows应用。

setuply使用

详细使用访问setuply

使用前准备

安装Rust和>=22.12.0的NodeJs

创建模板

npx create-setuply

选择自己需要的模板

templates.png

按照提示安装依赖

dependencies.png
cd setuply-project
npm install

启动应用进行开发(以React为例)

npm run dev:win

初始是一个可运行的demo,默认提供了组件、Hooks和一些常用的api,只需要按照开发React应用的方式开发UI界面即可


demo.png

打包应用

npm run build:win

打包后的文件:

Tauri使用的是本机的webview2,使用时请确认环境,如无法确认请使用带安装程序的版本

${your project}\src-tauri\target\i686-pc-windows-msvc\release\bundle\nsis\setuply_installer_1.0.0_x86-setup.exe
${your project}\src-tauri\target\i686-pc-windows-msvc\release\setuply_installer.exe
上一篇 下一篇

猜你喜欢

热点阅读