Pembangunan Aplikasi Desktop Electron · Pelajaran

Menggunakan Rangka Kerja Frontend

Terokai cara mengintegrasikan rangka kerja frontend popular seperti React, Vue atau Angular ke dalam projek Electron anda untuk melancarkan pembangunan UI.

Pelajaran 2 daripada 411 langkah

Menggunakan Rangka Kerja Frontend ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 2 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.

Pengenalan: Rangka Kerja dalam Electron

Rangka kerja frontend seperti React, Vue dan Angular membantu membina antara muka pengguna (UI) yang kompleks dengan cekap. Rangka kerja ini menawarkan cara berstruktur untuk mengurus komponen UI dan keadaan aplikasi.

Dalam Electron, rangka kerja ini berjalan dalam persekitaran seperti pelayar bagi proses renderer, sama seperti dalam pelayar web.

Teras Web Electron

Ingatlah, setiap tetingkap Electron pada asasnya ialah pelayar mini yang dikuasakan oleh Chromium. Ini bermakna apa-apa sahaja yang boleh dijalankan dalam pelayar web standard – HTML, CSS dan rangka kerja JavaScript – boleh dijalankan terus dalam proses pemapar Electron.

Kemahiran pembangunan web sedia ada anda boleh digunakan secara langsung!

Pilihan Popular

Banyak rangka kerja JavaScript yang popular merupakan pilihan yang sangat baik untuk membina UI Electron:

React: Dikenali dengan pendekatan berasaskan komponen dan ekosistem yang luas.
Vue.js: Dihargai kerana kesederhanaannya dan penerimaan secara berperingkat.
Angular: Rangka kerja menyeluruh untuk aplikasi berskala besar.

Pilihan tersebut selalunya bergantung pada kebiasaan pasukan anda dan keperluan projek.

Titik Integrasi

Mengintegrasikan rangka kerja melibatkan dua bahagian utama:

main.js Electron: Mencipta BrowserWindow dan menentukan fail index.html yang perlu dimuatkan.
Aplikasi Rangka Kerja Anda: index.html ini kemudiannya bertindak sebagai titik masuk untuk rangka kerja anda, dengan memuatkan JavaScript dan CSS yang dihimpunkan.

Hal ini serupa dengan cara pelayan web menyampaikan aplikasi satu halaman.

Proses Binaan Diterangkan

Tidak seperti HTML/CSS/JS yang ringkas, kebanyakan rangka kerja memerlukan "langkah binaan". Alat seperti Webpack atau Vite menyusun kod sumber rangka kerja anda (contohnya, JSX untuk React dan SFC untuk Vue) menjadi himpunan HTML, CSS dan JavaScript standard.

Electron kemudiannya memuatkan fail statik yang dioptimumkan ini, biasanya daripada folder dist atau build.

Menyediakan Rangka Kerja

Untuk bermula, anda biasanya menggunakan CLI rangka kerja tersebut (contohnya, npx create-react-app my-app, vue create my-app atau ng new my-app) untuk menjana projek baharu.

Kemudian, anda melaraskan main.js Electron anda supaya memuatkan fail index.html rangka kerja yang telah disusun.

Electron Mengehos UI Dinamik

Berikut ialah contoh Electron yang lengkap dengan sendirinya. Contoh ini menggunakan main.js untuk mencipta tetingkap, kemudian menetapkan kandungannya secara teratur dengan JavaScript dinamik. Hal ini mensimulasikan cara output rangka kerja dipaparkan, iaitu dengan mengemas kini elemen secara dinamik dalam proses pemapar.

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

function createWindow () {
  const win = new BrowserWindow({
    width: 400,
    height: 300,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    }
  });

  // Simulate framework-generated HTML content
  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <title>Framework-like UI</title>
      <style>
        body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f0f0; }
        h1 { color: #333; }
        button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; border-radius: 5px; background-color: #007bff; color: white; }
      </style>
    </head>
    <body>
      <h1 id="greeting">Hello from Electron!</h1>
      <button onclick="updateGreeting()">Click Me</button>
      <script>
        let count = 0;
        function updateGreeting() {
          count++;
          document.getElementById('greeting').innerText = 'You clicked ' + count + ' times!';
        }
      </script>
    </body>
    </html>
  `;

  win.loadURL(`data:text/html;charset=utf-8,${encodeURIComponent(htmlContent)}`);
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

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

Manfaat Rangka Kerja

Menggunakan rangka kerja bahagian hadapan dengan Electron menawarkan beberapa kelebihan penting:

Pembangunan Lebih Pantas: Seni bina berasaskan komponen mempercepat penciptaan UI.
Kebolehselenggaraan: Kod yang berstruktur lebih mudah difahami dan dikemas kini.
UI yang Kaya: Bina antara muka yang kompleks dan interaktif dengan usaha yang lebih sedikit.
Sokongan Komuniti: Dapatkan akses kepada pustaka, alat dan komuniti pembangun yang luas.

Pertimbangan dan Amalan Terbaik

Walaupun berkuasa, terdapat beberapa perkara yang perlu dipertimbangkan:

Saiz Aplikasi: Rangka kerja menambah saiz himpunan akhir.
Kerumitan Binaan: Memerlukan penyediaan alat binaan.
Keselamatan: Sentiasa gunakan contextIsolation: true dan skrip preload.js untuk komunikasi yang selamat antara proses pemapar dan proses utama.

Pastikan main.js anda minimum dan serahkan logik UI kepada pemapar.

Semakan Pantas: Integrasi Rangka Kerja

Uji pemahaman anda tentang pengintegrasian rangka kerja bahagian hadapan ke dalam Electron.

Jawab dalam pelajaran interaktif

Imbas Kembali: Rangka Kerja dalam Electron

Dalam pelajaran ini, kita meneroka cara mengintegrasikan rangka kerja bahagian hadapan yang popular seperti React, Vue dan Angular ke dalam projek Electron anda. Kita mempelajari bahawa rangka kerja berjalan dalam proses pemapar dengan memanfaatkan asas Chromium Electron.

Anda kini memahami peranan proses binaan dan cara Electron bertindak sebagai hos untuk UI yang dipacu oleh rangka kerja anda, sekali gus membolehkan anda membina aplikasi desktop yang berkuasa menggunakan teknologi web yang sudah biasa.

Percuma untuk bermula

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

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menggunakan Rangka Kerja Frontend” percuma?

Ya — teks penuh “Menggunakan Rangka Kerja Frontend” 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 “Menggunakan Rangka Kerja Frontend”?

Terokai cara mengintegrasikan rangka kerja frontend popular seperti React, Vue atau Angular ke dalam projek Electron anda untuk melancarkan pembangunan UI. 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 2 daripada 4.

Berapa lamakah pelajaran “Menggunakan Rangka Kerja Frontend” 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

← Kembali ke Pembangunan Aplikasi Desktop Electron