Aplikasi Electron Pertama Anda
Ikuti panduan langkah demi langkah untuk mencipta aplikasi Electron asas 'Hello World', termasuk asas proses utama dan pemapar.
Aplikasi Electron Pertama Anda ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.
Helo, Dunia Electron!
Tiba masanya untuk membina aplikasi Electron pertama anda — aplikasi desktop "Hello World" yang ringkas. Ia memperkenalkan fail teras yang membawa teknologi web ke desktop.
Menyediakan Projek Anda
Mula-mula, sediakan rangka projek: cipta folder, jalankan npm init, kemudian pasang Electron sebagai kebergantungan pembangunan. Perintahnya diberikan di bawah.
Proses Utama (main.js)
Setiap aplikasi mempunyai proses utama — persekitaran Node.js yang mengawal kitar hayat, berkomunikasi dengan OS, dan mencipta tetingkap. Ia bermula dalam main.js.
main.js: Persediaan Tetingkap Asas
Dalam main.js, anda mengimport modul Electron dan mentakrifkan cara untuk mencipta tetingkap yang akan memuatkan kandungan web anda. Cuba persediaan asas di bawah.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
// We'll load our HTML file here soon!
}
app.whenReady().then(createWindow);
// Handle closing all windows for non-macOS
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// Handle re-activating app on macOS
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Proses Pemapar (index.html)
Proses pemapar ialah tempat antara muka pengguna anda berada — pada asasnya, tetingkap Chromium yang memaparkan HTML, CSS, dan JS. Ia dimuatkan daripada index.html.
index.html: Kandungan Antara Muka Pengguna Kami
index.html ini mengandungi mesej Hello World anda — hanya halaman web biasa, sama seperti halaman yang anda bina untuk pelayar.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron App</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 50px; background-color: #f0f0f0; }
h1 { color: #333; }
p { color: #666; }
</style>
</head>
<body>
<h1>Hello from Electron!</h1>
<p>This is your very first desktop application.</p>
</body>
</html>Menyambungkan Proses Utama dan Pemapar
Sekarang sambungkan kedua-duanya: beritahu tetingkap supaya memaparkan halaman anda menggunakan win.loadFile() di dalam createWindow. Satu baris menghubungkan antara muka pengguna dengan proses utama.
main.js: Memuatkan HTML
Berikut ialah main.js yang telah dikemas kini untuk memuatkan halaman. Perhatikan cara __dirname mencari index.html secara relatif kepada skrip, tanpa mengira lokasi skrip itu dijalankan.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
win.loadFile(path.join(__dirname, 'index.html')); // Load the HTML file
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Menjalankan Aplikasi Electron Anda
Tambahkan skrip permulaan pada package.json supaya anda boleh melancarkan aplikasi dengan satu perintah, tanpa menaip electron setiap kali.
package.json: Skrip Permulaan
package.json anda sepatutnya kelihatan seperti ini. "electron ." menjalankan main.js dalam folder semasa — simpan fail itu, kemudian jalankan "npm start" untuk melancarkannya.
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "My first Electron app",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^28.0.0"
}
}Semakan Ringkas: Peranan Proses Utama
Anda telah melihat cara main.js dan index.html berfungsi bersama. Mari uji pemahaman anda tentang peranan utama kedua-duanya.
Ringkasan: Aplikasi Electron Pertama Anda
Anda telah membina aplikasi Electron pertama anda: proses utama untuk kitar hayat dan tetingkap, serta pemapar untuk antara muka pengguna, yang disambungkan melalui skrip permulaan.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 12
- Pelajaran
- 47
Soalan Lazim
Adakah pelajaran “Aplikasi Electron Pertama Anda” percuma?
Ya — teks penuh “Aplikasi Electron Pertama Anda” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Aplikasi Electron Pertama Anda”?
Ikuti panduan langkah demi langkah untuk mencipta aplikasi Electron asas 'Hello World', termasuk asas proses utama dan pemapar. Anda berlatih Pembangunan Aplikasi Desktop Electron menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Desktop Electron?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Aplikasi Electron Pertama Anda” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Desktop Electron ini?
Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Apakah Electron?
- Menyediakan Persekitaran Pembangunan Anda
- Aplikasi Electron Pertama Anda
- Memahami Seni Bina Electron