Bina aplikasi GUI desktop menggunakan JavaScript dan Electron.js

Dalam era teknologi hari ini, aplikasi desktop mempunyai kepentingan yang besar dalam kehidupan seharian kita, memberikan pengalaman pengguna yang dipertingkatkan dan menggunakan sepenuhnya keupayaan komputer tempatan anda. Secara tradisinya, membangunkan aplikasi desktop memerlukan kepakaran dalam bahasa dan rangka kerja pengaturcaraan khusus platform, yang menimbulkan cabaran bagi pembangun web yang ingin memasuki pembangunan desktop. Walau bagaimanapun, Electron.js menyelesaikan cabaran ini dengan berkesan.

Electron.js, dahulunya dikenali sebagai Atom Shell, ialah rangka kerja sumber terbuka yang diperoleh daripada GitHub. Ia membolehkan pembangun membina aplikasi desktop merentas platform menggunakan teknologi web biasa seperti HTML, CSS dan JavaScript. Dengan merapatkan jurang antara pembangunan web dan pembangunan aplikasi desktop, Electron.js mencipta peluang baharu untuk pembangun mencipta aplikasi desktop yang berkuasa dan kaya dengan ciri.

Seni bina Electron.js

Untuk memahami cara Electron.js berfungsi, mari kita lihat dengan lebih dekat seni binanya. Electron.js menggabungkan dua komponen utama: enjin pemaparan Chromium dan masa jalan Node.js.

• Enjin Rendering Chromium−Electron.js menggunakan enjin pemaparan yang sama — Chromium — sebagai penyemak imbas web popular Google Chrome. Ini membolehkan aplikasi Electron.js membuat dan memaparkan kandungan web dengan fungsi dan prestasi yang sama seperti pelayar web.

• Node.js Runtime− span>Electron.js disepadukan dengan masa jalan Node.js, menyediakan akses kepada sistem pengendalian asas dan API asli. Ini bermakna pembangun boleh memanfaatkan kuasa penuh Node.js dan memanfaatkan ekosistem modul dan perpustakaannya yang luas untuk membina aplikasi desktop.

Electron.js menggunakan seni bina berbilang proses, di mana setiap aplikasi Electron.js terdiri daripada dua proses utama: proses utama dan proses pemapar.

• Proses utama− Proses utama berjalan sebagai proses Node.js bebas dan bertanggungjawab untuk mencipta dan mengurus tetingkap penyemak imbas. Ia berkomunikasi dengan proses pemapar, mengendalikan acara peringkat sistem dan mempunyai akses kepada API asli. Proses utama mengawal kitaran hayat aplikasi dan berfungsi sebagai titik masuk ke aplikasi Electron.js.

• Proses Renderer − Setiap aplikasi Electron.js boleh mempunyai berbilang proses pemapar, setiap proses sepadan dengan tetingkap penyemak imbas yang berasingan. Proses pemapar bertanggungjawab untuk memaparkan dan memaparkan kandungan web dalam setiap tetingkap penyemak imbas. Ia dijalankan dalam konteks JavaScript yang berasingan, memberikan tahap pengasingan dan keselamatan. Setiap proses pemapar mempunyai akses kepada API Electron.js, membolehkannya berinteraksi dengan proses utama dan melaksanakan tugas seperti memanipulasi DOM, membuat permintaan rangkaian dan mengendalikan interaksi pengguna.

Bina aplikasi Electron.js yang ringkas

Sekarang kita mempunyai pemahaman yang baik tentang Electron.js dan seni binanya, mari kita mendalami membina aplikasi Electron.js yang mudah menggunakan JavaScript. Kami akan mencipta aplikasi yang memaparkan tetingkap dengan mesej "Hello, Electron.js".

Untuk bermula, ikut langkah ini -

Sediakan persekitaran pembangunan

Pastikan anda memasang Node.js pada komputer anda kerana Electron.js dibina di atas Node.js. Anda boleh memuat turun dan memasang versi terkini Node.js dari tapak web rasmi (https://nodejs.org).

Buat projek Electron.js baharu

Buat folder projek baharu dan navigasi ke folder menggunakan baris arahan. Mulakan projek Node.js baharu dengan menjalankan arahan berikut -

npm init -y

Arahan ini memulakan projek Node.js baharu dengan tetapan lalai.

Pasang Electron.js

Pasang Electron.js sebagai kebergantungan pembangunan dengan melaksanakan arahan berikut -

npm install electron --save-dev

Arahan ini akan memasang pakej Electron.js dalam projek anda.

Buat pintu masuk utama

Buat fail baharu bernama index.js

dalam folder projek dan tambah kod berikut -

const { app, BrowserWindow } = require('electron');

function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true,
      },
   });

   // Load the index.html file
   mainWindow.loadFile('index.html');
}

// When Electron has finished initialising and is ready to create browser windows
app.whenReady().then(() => {
   createWindow();

   app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
   });
});

// Quit the application when all windows are closed
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit();
});

Arahan

Dalam kod ini, kami mengimport modul yang diperlukan daripada pakej Electron.js, mentakrifkan fungsi createWindow untuk mencipta tetingkap penyemak imbas dan menyediakan pengendali acara yang diperlukan untuk penciptaan tetingkap dan keluar aplikasi.

Buat fail HTML

Buat fail baharu bernama index.html dalam folder projek dan tambah kod berikut -🎜

示例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Electron.js Application</title>
   </head>
   <body>
      <h1>Hello, Electron.js</h1>
   </body>
</html>

此 HTML 文件将显示在 Electron.js 应用程序的窗口中。

运行 Electron.js 应用程序

npx electron.

结论

Electron.js 彻底改变了开发人员使用 Web 技术构建桌面应用程序的方式。它提供了一个强大的框架，结合了 Chromium 渲染引擎和 Node.js 运行时，使开发人员能够使用 HTML、CSS 和 JavaScript 创建跨平台桌面应用程序。凭借其丰富的插件和工具生态系统，Electron.js 使开发人员能够构建功能丰富、高性能且具有视觉吸引力的桌面应用程序。

在本文中，我们探讨了 Electron.js 的基础知识，并学习了如何使用 JavaScript 构建简单的 Electron.js 应用程序。我们讨论了 Electron.js 的架构、它的主要进程以及主进程和渲染进程的作用。我们还逐步完成了设置开发环境和构建 Electron.js 应用程序的过程。

Atas ialah kandungan terperinci Bina aplikasi GUI desktop menggunakan JavaScript dan Electron.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!