次我给大家介绍了如何通过Electron将react项目构建成桌面应用,并且成功启动项目。这次我再教大家如何将前端页面打包成.exe可执行文件。接下来我将一步一步地介绍如何操作。
Nodejs
首先我们要打包页面,就是将react的静态页面构建成.exe文件。然后才能将.exe封装成软件安装包。
electron-packager:electron的打包插件,将项目打包成exe文件;
安装方式:命令行安装 npm install electron-packager -g
NSIS软件:封装工具,可以将.exe文件封装成安装包
安装方式:NSIS汉化包下载地址https://httpsimg.dsx2020.com/NSIS_v251_Build_20160601+-+NSISFANS.zip
通过命令行安装electron-packager,以下是全局安装electron-packager的命令行
npm install electron-packager -g
安装成功后,就可以将页面打包成exe文件。在项目目录中打开cmd。运行以下命令行打包:
electron-packager ./build library-management-system --platform=win32 --arch=x64 --icon=public/favicon.ico --out=./exes --app-version=1.0.0 --overwrite --ignore=node_modules
打包成功以后我们会发现项目目录里面多了一个exes文件夹。里面就是我们打包出来的文件了,里面包含了.exe文件,可以直接双击运行页面。
如果你能走到这一步,那么说明你离成功不远了,接下来就是将exe封装成安装包。
打开nsis软件,文件>新建脚本:向导。
下一步。
填写软件基本信息;应用程序名称、应用程序版本、应用程序出版人可以随意填写,应用程序网站如果没有则留空即可。然后就进行下一步。
选择安装程序的图标,定义程序安装包的文件名,安装程序语言选择简体中文。然后下一步。
默认,然后下一步。
填写程序的安装目录,默认即可。没有授权文件就空着,又可以选择,然后下一步。
删除这两个默认的文件。
然后添加打包生产的exe文件,点击确定。
添加文件目录
选择打包生成的文件目录(是文件夹),然后勾选包含子目录。点击确定。
下一步
下一步。
下一步
下一步
保存脚本,点击完成,将脚本保存在本地。
保存脚本后,在nsis中打开脚本。然后在菜单栏中选择编译脚本。
然后就是等待,编译时间大概是2到3分钟左右,编译成功以后就会出现一下提示。
然后我们会发现在exes文件夹中多了一个react_Setup .exe可执行文件,这个文件就是我们通过NSIS工具编译出来的安装包文件。我们双击执行它,就可以进入正常的安装步骤了。
我们直接下一步就可以安装软件了。
安装完成后,我们看到电脑桌面上多了一个名叫react项目安装的图标,我们直接双击打开软件。
最后我们成功打开了软件。
到这里,我们实现了将前端页面打包成软件安装包的需求了。Electron让前端开发人员实现了从网页到桌面应用的跨越式提升。作为前端开发人员,你不用会写C++,只要你会写JavaScript,也可以独自开发桌面应用程序。
以上就是本次分享的全部内容,这篇教程如果大家感兴趣的话可以点个赞。
谢谢大家的支持!!!
Rust因其性能和安全性而获得了很多吸引力,使其成为系统级编程的绝佳选择。然而,在构建桌面应用程序时,它也非常强大。在本指南中,我们将指导您使用Rust创建简单的桌面应用程序。我们将使用tauri,这是一个为所有主要桌面平台构建小型、快速二进制文件的框架。
在我们开始之前,请确保您在系统上安装了以下内容:
npm安装-g @tauri-apps/cli
首先,让我们创建一个新的Tauri项目。打开您的终端并运行:
货物新my_desktop_app
cd my_desktop_app
接下来,在您的Rust项目中初始化一个新的Tauri项目:
tauri init
按照提示设置您的Tauri项目。您现在可以选择默认选项。
您的项目现在应该有一个类似于这个的结构:
我的桌面应用程序
├── src
│ └── main.rs
├── src-tauri
│ ├── src
│ │ └── main.rs
│ ├── tauri.conf.json
│ └── Cargo.toml
└── Cargo.toml
src-tauri目录包含Tauri应用程序的主要配置和入口点。
Tauri使用基于Web的UI,因此我们需要一些HTML、CSS和JavaScript。默认情况下,Tauri使用香草JavaScript,但您也可以集成React、Vue或Svelte等框架。
在src-tauri/src目录中创建一个index.html文件:
<!DOCTYPE html>
<html lang="en">
<头>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的Rust桌面应用程序</title>
</头>
<身体>
<h1>你好,陶里!</h1>
<button id="greet-btn">问候</button>
<脚本>
document.getElementById('greet-btn').addEventListener('click', ()=> {
窗口。__TAURI__.invoke('greet').then(response=> {
警报(响应);
});
});
</script>
</body>
</html>
打开src-tauri/src/main.rs并修改它以处理greet命令:
#![cfg_attr(
all(not(debug_assertions), target_os="windows"),
windows_子系统="windows"
)]
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![问候])
.run(tauri::generate_context!())
.expect(“运行tauri应用程序时出错”);
}
#[tauri::command]
fn greet() -> 字符串 {
格式!("你好,来自Rust!”)
}
此代码使用单个命令greet设置一个简单的Tauri应用程序,该命令返回问候消息。
现在,您可以运行您的Tauri应用程序。在您的终端中,导航到项目根目录并执行:
tauri dev
这将在开发模式下构建和运行您的Tauri应用程序。您应该看到一个带有简单HTML界面的窗口打开,单击“Greet”按钮将显示带有Rust消息的警报。
一旦您对应用程序满意,您可以将其用于生产:
牛座建造
此命令将在src-tauri/target/release/bundle目录中为您的应用程序创建一个优化的独立二进制文件。
恭喜!您使用Rust和Tauri构建了一个简单的桌面应用程序。此设置允许您利用Rust强大的性能和安全功能,同时为UI使用熟悉的Web技术。当您继续探索Tauri时,您会发现更多功能和自定义选项,以构建更复杂、功能更丰富的应用程序。编码愉快
Windows平台上开发桌面应用程序,可以使用多种编程语言和开发环境。以下是一些常见的开发语言,按照它们在Windows桌面应用开发中的流行度和使用频率大致排序:
1.?C++:由于其性能优势和对系统级操作的深入控制,C++是开发高性能桌面应用程序的首选语言之一。
2.?C#:随着.NET框架的发展,C#已成为开发Windows桌面应用程序的强大工具,特别是使用Windows Presentation Foundation (WPF) 和Windows Forms技术。
3.?Visual Basic .NET (VB.NET):VB.NET是.NET框架的一部分,它提供了一种快速开发Windows桌面应用程序的方式,尤其适合初学者和快速原型开发。
4.?Python:虽然Python主要用于Web开发和脚本编写,但也有库如Tkinter、PyQt或wxPython等,可以用于开发跨平台的桌面应用程序。
5.?JavaScript/TypeScript:通过Electron框架,可以使用JavaScript或TypeScript开发跨平台的桌面应用程序。
6.?Java:Java通过Swing或JavaFX框架可以开发桌面应用程序,尽管它在Windows平台上的流行度可能不如其他语言。
7.?Delphi/Object Pascal:Delphi是一种高级的编程语言,使用Object Pascal语法,它提供了快速应用程序开发(RAD)工具,适合开发Windows桌面应用程序。
8.?Rust:Rust是一种注重安全、并发和性能的系统编程语言,虽然它在桌面应用开发中的使用不如C++广泛,但正在逐渐获得关注。
9.?Go:Go语言以其并发能力和简洁的语法而受到青睐,尽管它主要用于服务器端开发,但也可以用来开发桌面应用程序。
10.?PowerShell:PowerShell是一种脚本语言和shell环境,主要用于系统管理和自动化任务,但也可以用来开发简单的桌面应用程序。
11.?BASIC:虽然不是现代的主流选择,但在某些特定场合,BASIC语言仍然被用于开发简单的Windows桌面应用程序。
请注意,这个排序并不是绝对的,不同的项目和团队可能会根据特定的需求、团队技能和项目目标选择不同的开发语言。此外,一些语言可能更适合特定的应用程序类型或开发场景。
*请认真填写需求信息,我们会在24小时内与您取得联系。