Asas Elektron: Cara Mengkonfigurasi dan Menjalankan Apl Elektron Sudut

Asas Elektron: Cara Mengkonfigurasi dan Menjalankan Apl Elektron Sudut

Electron membolehkan anda membina aplikasi desktop untuk Windows, Mac dan Linux. Apabila anda membina apl menggunakan Electron, anda boleh pratonton dan jalankan apl itu melalui tetingkap aplikasi desktop.





Anda boleh menggunakan Electron untuk mengkonfigurasi aplikasi Angular untuk dilancarkan pada tetingkap desktop, bukannya pelayar web biasa. Anda boleh melakukan ini menggunakan fail JavaScript dalam apl itu sendiri.





Sebaik sahaja anda mengkonfigurasi Elektron, anda boleh meneruskan pembangunan seperti yang anda lakukan pada aplikasi Angular biasa. Bahagian utama aplikasi masih akan mengikuti struktur Sudut standard yang sama.





Cara Memasang Elektron sebagai Sebahagian daripada Aplikasi Anda

Untuk menggunakan Electron, anda perlu memuat turun dan memasang node.js, dan menggunakan npm install untuk menambahkan Electron pada apl anda.

  1. Muat turun dan pasang node.js . Anda boleh mengesahkan anda telah memasangnya dengan betul dengan menyemak versi:
    node -v
    Nod juga termasuk npm, pengurus pakej JavaScript . Anda boleh mengesahkan bahawa anda telah memasang npm dengan menyemak versi npm:
    npm -v
  2. Cipta aplikasi Angular baharu menggunakan daripada baru perintah. Ini akan mencipta folder yang mengandungi semua yang diperlukan fail yang diperlukan untuk projek Angular untuk bekerja.
    ng new electron-app
  3. Dalam folder akar aplikasi anda, gunakan npm untuk memasang Electron.
    npm install --save-dev electron
  4. Ini akan mencipta folder baharu untuk Electron dalam folder node_modules apl.   lokasi fail JS utama di dalam projek
  5. Anda juga boleh memasang Electron secara global pada komputer anda.
    npm install -g electron 

Struktur Fail Aplikasi Elektron Bersudut

Elektron akan memerlukan fail JavaScript utama untuk mencipta dan mengurus tetingkap desktop. Tetingkap ini akan memaparkan kandungan apl anda di dalamnya. Fail JavaScript juga akan mengandungi peristiwa lain yang boleh berlaku, seperti jika pengguna menutup tetingkap.



  indeks lokasi fail HTML dalam projek

Semasa masa jalan, kandungan yang dipaparkan akan datang daripada fail index.html. Secara lalai, anda boleh mencari fail index.html di dalam src folder, dan semasa runtime salinan terbina daripadanya dibuat secara automatik di dalam dist folder.

  Lokasi komponen apl utama dalam folder

Fail index.html biasanya kelihatan seperti ini:





<!doctype html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html>

Di dalam teg badan terdapat teg . Ini akan memaparkan komponen aplikasi utama untuk aplikasi Angular. Anda boleh mencari komponen aplikasi utama dalam src/app folder.

  Elektron pada masa jalan dalam penyemak imbas

Cara Menggunakan Elektron untuk Membuka Aplikasi Sudut dalam Tetingkap Desktop

Cipta fail main.js dan konfigurasikannya untuk membuka kandungan aplikasi di dalam tetingkap desktop.





  1. Buat fail dalam akar projek anda bernama main.js . Dalam fail ini, mulakan Electron supaya anda boleh menggunakannya untuk mencipta tetingkap aplikasi.
    const { app, BrowserWindow } = require('electron');
  2. Buat tetingkap desktop baharu dengan lebar dan ketinggian tertentu. Muatkan fail indeks sebagai kandungan untuk dipaparkan dalam tetingkap. Pastikan laluan ke fail indeks sepadan dengan nama apl anda. Contohnya, jika anda menamakan apl anda 'apl elektron', laluannya ialah 'dist/electron-app/index.html'.
    function createWindow() { 
    win = new BrowserWindow({width: 800, height: 800});
    win.loadFile('dist/electron-app/index.html');
    }
  3. Apabila apl sedia, panggil fungsi createWindow(). Ini akan mencipta tetingkap aplikasi untuk apl anda.
    app.whenReady().then(() => { 
    createWindow()
    })
  4. Di dalam src/index.html fail, dalam asas teg, tukar atribut href kepada './'.
    <base href="./">
  5. Dalam package.json , tambahkan utama medan, dan masukkan fail main.js sebagai nilai. Ini akan menjadi titik masuk untuk apl, supaya aplikasi menjalankan fail main.js semasa ia melancarkan apl.
    { 
    "name": "electron-app",
    "version": "0.0.0",
    "main" : "main.js",
    ....
    }
  6. Di dalam .browserslistrc fail, ubah suai senarai untuk mengalih keluar iOS safari versi 15.2-15.3. Ini akan menghalang ralat keserasian daripada ditunjukkan dalam konsol semasa menyusun.
    last 1 Chrome version 
    last 1 Firefox version
    last 2 Edge major versions
    last 2 Safari major versions
    last 2 iOS major versions
    Firefox ESR
    not ios_saf 15.2-15.3
    not safari 15.2-15.3
  7. Padamkan kandungan lalai dalam src/app/app.component.html fail. Gantikannya dengan beberapa kandungan baharu.
    <div class="content"> 
    <div class="card">
    <h2> Home </h2>
    <p>
    Welcome to my Angular Electron application!
    </p>
    </div>
    </div>
  8. Tambah beberapa penggayaan untuk kandungan dalam src/app/app.component.css fail.
    .content { 
    line-height: 2rem;
    font-size: 1.2em;
    margin: 48px 10%;
    font-family: Arial, sans-serif
    }
    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 85%;
    padding: 16px 48px;
    margin: 24px 0px;
    background-color: whitesmoke;
    font-family: sans-serif;
    }
  9. Tambahkan beberapa penggayaan keseluruhan pada src/styles.css fail untuk mengalih keluar jidar lalai dan pelapik.
    html { 
    margin: 0;
    padding: 0;
    }

Cara Menjalankan Aplikasi Elektron

Untuk menjalankan aplikasi anda dalam tetingkap, konfigurasikan arahan dalam tatasusunan skrip package.json. Kemudian, jalankan apl anda menggunakan arahan dalam terminal.

  1. Dalam package.json , di dalam tatasusunan skrip, tambahkan arahan untuk membina apl Sudut dan jalankan Electron. Pastikan anda menambah koma selepas entri sebelumnya dalam tatasusunan Skrip.
    "scripts": { 
    ...
    "electron": "ng build && electron ."
    },
  2. Untuk menjalankan aplikasi Sudut baharu anda dalam tetingkap desktop, jalankan yang berikut dalam baris arahan, dalam folder akar projek anda:
    npm run electron
  3. Tunggu aplikasi anda disusun. Setelah selesai, bukannya apl Angular anda dibuka dalam penyemak imbas web, sebaliknya tetingkap desktop akan dibuka. Tetingkap desktop akan menunjukkan kandungan apl Angular anda.
  4. Jika anda masih mahu melihat aplikasi anda dalam penyemak imbas web, anda masih boleh menjalankan perintah ng serve.
    ng serve
  5. Jika anda menggunakan daripada servis arahan, kandungan apl anda masih akan dipaparkan dalam penyemak imbas web di localhost:4200.

Membina Aplikasi Desktop Dengan Elektron

Anda boleh menggunakan Electron untuk membina aplikasi desktop pada Windows, Mac dan Linux. Secara lalai, anda boleh menguji aplikasi Angular menggunakan pelayar web melalui arahan ng serve. Anda boleh mengkonfigurasi aplikasi Angular anda untuk turut dibuka dalam tetingkap desktop dan bukannya pelayar web.

Anda boleh melakukan ini menggunakan fail JavaScript. Anda juga perlu mengkonfigurasi fail index.html dan package.json anda. Aplikasi keseluruhan masih akan mengikuti struktur yang sama seperti aplikasi Angular biasa.

Jika anda ingin mengetahui lebih lanjut tentang cara membina aplikasi desktop, anda juga boleh meneroka aplikasi Windows Forms. Aplikasi Windows Forms membolehkan anda mengklik dan menyeret elemen UI ke atas kanvas sambil turut menambah sebarang logik pengekodan ke dalam fail C#.

bagaimana untuk mengetahui bila artikel diterbitkan