整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
次我給大家介紹了如何通過(guò)Electron將react項(xiàng)目構(gòu)建成桌面應(yīng)用，并且成功啟動(dòng)項(xiàng)目。這次我再教大家如何將前端頁(yè)面打包成.exe可執(zhí)行文件。接下來(lái)我將一步一步地介紹如何操作。
Nodejs
首先我們要打包頁(yè)面，就是將react的靜態(tài)頁(yè)面構(gòu)建成.exe文件。然后才能將.exe封裝成軟件安裝包。
electron-packager：electron的打包插件，將項(xiàng)目打包成exe文件；
安裝方式：命令行安裝 npm install electron-packager -g
NSIS軟件：封裝工具，可以將.exe文件封裝成安裝包
安裝方式：NSIS漢化包下載地址https://httpsimg.dsx2020.com/NSIS_v251_Build_20160601+-+NSISFANS.zip
通過(guò)命令行安裝electron-packager，以下是全局安裝electron-packager的命令行
npm install electron-packager -g
安裝成功后，就可以將頁(yè)面打包成exe文件。在項(xiàng)目目錄中打開cmd。運(yùn)行以下命令行打包：
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
打包成功以后我們會(huì)發(fā)現(xiàn)項(xiàng)目目錄里面多了一個(gè)exes文件夾。里面就是我們打包出來(lái)的文件了，里面包含了.exe文件，可以直接雙擊運(yùn)行頁(yè)面。
如果你能走到這一步，那么說(shuō)明你離成功不遠(yuǎn)了，接下來(lái)就是將exe封裝成安裝包。
打開nsis軟件，文件>新建腳本：向?qū)А?/p>
下一步。
填寫軟件基本信息；應(yīng)用程序名稱、應(yīng)用程序版本、應(yīng)用程序出版人可以隨意填寫，應(yīng)用程序網(wǎng)站如果沒(méi)有則留空即可。然后就進(jìn)行下一步。
選擇安裝程序的圖標(biāo)，定義程序安裝包的文件名，安裝程序語(yǔ)言選擇簡(jiǎn)體中文。然后下一步。
默認(rèn)，然后下一步。
填寫程序的安裝目錄，默認(rèn)即可。沒(méi)有授權(quán)文件就空著，又可以選擇，然后下一步。
刪除這兩個(gè)默認(rèn)的文件。
然后添加打包生產(chǎn)的exe文件，點(diǎn)擊確定。
添加文件目錄
選擇打包生成的文件目錄（是文件夾），然后勾選包含子目錄。點(diǎn)擊確定。
下一步
下一步。
下一步
下一步
保存腳本，點(diǎn)擊完成，將腳本保存在本地。
保存腳本后，在nsis中打開腳本。然后在菜單欄中選擇編譯腳本。
然后就是等待，編譯時(shí)間大概是2到3分鐘左右，編譯成功以后就會(huì)出現(xiàn)一下提示。
然后我們會(huì)發(fā)現(xiàn)在exes文件夾中多了一個(gè)react_Setup .exe可執(zhí)行文件，這個(gè)文件就是我們通過(guò)NSIS工具編譯出來(lái)的安裝包文件。我們雙擊執(zhí)行它，就可以進(jìn)入正常的安裝步驟了。
我們直接下一步就可以安裝軟件了。
安裝完成后，我們看到電腦桌面上多了一個(gè)名叫react項(xiàng)目安裝的圖標(biāo)，我們直接雙擊打開軟件。
最后我們成功打開了軟件。
到這里，我們實(shí)現(xiàn)了將前端頁(yè)面打包成軟件安裝包的需求了。Electron讓前端開發(fā)人員實(shí)現(xiàn)了從網(wǎng)頁(yè)到桌面應(yīng)用的跨越式提升。作為前端開發(fā)人員，你不用會(huì)寫C++，只要你會(huì)寫JavaScript，也可以獨(dú)自開發(fā)桌面應(yīng)用程序。
以上就是本次分享的全部?jī)?nèi)容，這篇教程如果大家感興趣的話可以點(diǎn)個(gè)贊。
謝謝大家的支持！??！
Rust因其性能和安全性而獲得了很多吸引力，使其成為系統(tǒng)級(jí)編程的絕佳選擇。然而，在構(gòu)建桌面應(yīng)用程序時(shí)，它也非常強(qiáng)大。在本指南中，我們將指導(dǎo)您使用Rust創(chuàng)建簡(jiǎn)單的桌面應(yīng)用程序。我們將使用tauri，這是一個(gè)為所有主要桌面平臺(tái)構(gòu)建小型、快速二進(jìn)制文件的框架。
在我們開始之前，請(qǐng)確保您在系統(tǒng)上安裝了以下內(nèi)容：
npm安裝-g @tauri-apps/cli首先，讓我們創(chuàng)建一個(gè)新的Tauri項(xiàng)目。打開您的終端并運(yùn)行：
貨物新my_desktop_app
cd my_desktop_app接下來(lái)，在您的Rust項(xiàng)目中初始化一個(gè)新的Tauri項(xiàng)目：
tauri init按照提示設(shè)置您的Tauri項(xiàng)目。您現(xiàn)在可以選擇默認(rèn)選項(xiàng)。
您的項(xiàng)目現(xiàn)在應(yīng)該有一個(gè)類似于這個(gè)的結(jié)構(gòu)：
我的桌面應(yīng)用程序
├── src
│ └── main.rs
├── src-tauri
│ ├── src
│ │ └── main.rs
│ ├── tauri.conf.json
│ └── Cargo.toml
└── Cargo.tomlsrc-tauri目錄包含Tauri應(yīng)用程序的主要配置和入口點(diǎn)。
Tauri使用基于Web的UI，因此我們需要一些HTML、CSS和JavaScript。默認(rèn)情況下，Tauri使用香草JavaScript，但您也可以集成React、Vue或Svelte等框架。
在src-tauri/src目錄中創(chuàng)建一個(gè)index.html文件：
<！DOCTYPE html>
<html lang="en">
<頭>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的Rust桌面應(yīng)用程序</title>
</頭>
<身體>
<h1>你好，陶里！</h1>
<button id="greet-btn">問(wèn)候</button>
<腳本>
document.getElementById('greet-btn').addEventListener('click', ()=> {
窗口。__TAURI__.invoke('greet').then(response=> {
警報(bào)（響應(yīng)）；
}）；
}）；
</script>
</body>
</html>打開src-tauri/src/main.rs并修改它以處理greet命令：
#![cfg_attr（
all(not(debug_assertions), target_os="windows"),
windows_子系統(tǒng)="windows"
）]
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![問(wèn)候]）
.run(tauri::generate_context!())
.expect（“運(yùn)行tauri應(yīng)用程序時(shí)出錯(cuò)”）；
}
#[tauri::command]
fn greet() -> 字符串 {
格式！("你好，來(lái)自Rust！”）
}此代碼使用單個(gè)命令greet設(shè)置一個(gè)簡(jiǎn)單的Tauri應(yīng)用程序，該命令返回問(wèn)候消息。
現(xiàn)在，您可以運(yùn)行您的Tauri應(yīng)用程序。在您的終端中，導(dǎo)航到項(xiàng)目根目錄并執(zhí)行：
tauri dev這將在開發(fā)模式下構(gòu)建和運(yùn)行您的Tauri應(yīng)用程序。您應(yīng)該看到一個(gè)帶有簡(jiǎn)單HTML界面的窗口打開，單擊“Greet”按鈕將顯示帶有Rust消息的警報(bào)。
一旦您對(duì)應(yīng)用程序滿意，您可以將其用于生產(chǎn)：
牛座建造此命令將在src-tauri/target/release/bundle目錄中為您的應(yīng)用程序創(chuàng)建一個(gè)優(yōu)化的獨(dú)立二進(jìn)制文件。
恭喜！您使用Rust和Tauri構(gòu)建了一個(gè)簡(jiǎn)單的桌面應(yīng)用程序。此設(shè)置允許您利用Rust強(qiáng)大的性能和安全功能，同時(shí)為UI使用熟悉的Web技術(shù)。當(dāng)您繼續(xù)探索Tauri時(shí)，您會(huì)發(fā)現(xiàn)更多功能和自定義選項(xiàng)，以構(gòu)建更復(fù)雜、功能更豐富的應(yīng)用程序。編碼愉快
Windows平臺(tái)上開發(fā)桌面應(yīng)用程序，可以使用多種編程語(yǔ)言和開發(fā)環(huán)境。以下是一些常見(jiàn)的開發(fā)語(yǔ)言，按照它們?cè)赪indows桌面應(yīng)用開發(fā)中的流行度和使用頻率大致排序：
1.?C++：由于其性能優(yōu)勢(shì)和對(duì)系統(tǒng)級(jí)操作的深入控制，C++是開發(fā)高性能桌面應(yīng)用程序的首選語(yǔ)言之一。
2.?C#：隨著.NET框架的發(fā)展，C#已成為開發(fā)Windows桌面應(yīng)用程序的強(qiáng)大工具，特別是使用Windows Presentation Foundation (WPF) 和Windows Forms技術(shù)。
3.?Visual Basic .NET (VB.NET)：VB.NET是.NET框架的一部分，它提供了一種快速開發(fā)Windows桌面應(yīng)用程序的方式，尤其適合初學(xué)者和快速原型開發(fā)。
4.?Python：雖然Python主要用于Web開發(fā)和腳本編寫，但也有庫(kù)如Tkinter、PyQt或wxPython等，可以用于開發(fā)跨平臺(tái)的桌面應(yīng)用程序。
5.?JavaScript/TypeScript：通過(guò)Electron框架，可以使用JavaScript或TypeScript開發(fā)跨平臺(tái)的桌面應(yīng)用程序。
6.?Java：Java通過(guò)Swing或JavaFX框架可以開發(fā)桌面應(yīng)用程序，盡管它在Windows平臺(tái)上的流行度可能不如其他語(yǔ)言。
7.?Delphi/Object Pascal：Delphi是一種高級(jí)的編程語(yǔ)言，使用Object Pascal語(yǔ)法，它提供了快速應(yīng)用程序開發(fā)（RAD）工具，適合開發(fā)Windows桌面應(yīng)用程序。
8.?Rust：Rust是一種注重安全、并發(fā)和性能的系統(tǒng)編程語(yǔ)言，雖然它在桌面應(yīng)用開發(fā)中的使用不如C++廣泛，但正在逐漸獲得關(guān)注。
9.?Go：Go語(yǔ)言以其并發(fā)能力和簡(jiǎn)潔的語(yǔ)法而受到青睞，盡管它主要用于服務(wù)器端開發(fā)，但也可以用來(lái)開發(fā)桌面應(yīng)用程序。
10.?PowerShell：PowerShell是一種腳本語(yǔ)言和shell環(huán)境，主要用于系統(tǒng)管理和自動(dòng)化任務(wù)，但也可以用來(lái)開發(fā)簡(jiǎn)單的桌面應(yīng)用程序。
11.?BASIC：雖然不是現(xiàn)代的主流選擇，但在某些特定場(chǎng)合，BASIC語(yǔ)言仍然被用于開發(fā)簡(jiǎn)單的Windows桌面應(yīng)用程序。
請(qǐng)注意，這個(gè)排序并不是絕對(duì)的，不同的項(xiàng)目和團(tuán)隊(duì)可能會(huì)根據(jù)特定的需求、團(tuán)隊(duì)技能和項(xiàng)目目標(biāo)選擇不同的開發(fā)語(yǔ)言。此外，一些語(yǔ)言可能更適合特定的應(yīng)用程序類型或開發(fā)場(chǎng)景。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
