Bina aplikasi desktop yang selamat dengan elektron menjalin dan bertindak balas

Artikel ini menunjukkan membina aplikasi desktop editor teks yang mudah dan selamat menggunakan elektron dan bertindak balas, memanfaatkan elektron untuk pembangunan dan keselamatan yang diperkemas. Aplikasi, yang digelar "ScratchPad," autosaves berubah ketika anda menaip, mencerminkan fungsi dariScratch. Kami akan memberi tumpuan kepada amalan pengekodan yang selamat di seluruh.

Konsep Utama:

• Electron Forge: Alat yang komprehensif untuk membuat, menerbitkan, dan memasang aplikasi elektron moden, menyediakan persekitaran pembangunan yang selamat dan cekap.
Proses utama vs Renderer:
• Aplikasi elektron terdiri daripada proses utama (Node.js) Menguruskan interaksi OS dan penciptaan tingkap, dan proses penyokong (kromium) yang mengendalikan rendering UI.
React Integration:
• Kami akan mengintegrasikan React ke dalam proses penyokong untuk pengalaman pembangunan yang lancar.
codemirror:
• komponen editor teks yang kuat meningkatkan antara muka pengguna dan menyediakan kemas kini masa nyata.
Pengendalian Fail Selamat:
• Kami akan menggunakan proses utama dan penerima elektron dan skrip preload untuk menyimpan dan memuatkan kandungan dengan selamat dari cakera. Mencegah Flash Putih:
Tetapan tetingkap akan diselaraskan untuk menghapuskan kilat putih awal pada pelancaran aplikasi.
• Pembungkusan dan pengedaran:
Electron Forge memudahkan proses pembungkusan dan mengedarkan aplikasi di pelbagai sistem operasi.
Persediaan Pembangunan:

tutorial ini menganggap node.js dan git dipasang. Kami akan menggunakan Electron Forge dengan template webpack untuk integrasi reaksi yang cekap. Projek ini dimulakan dengan:

Ini mewujudkan struktur projek, termasuk

,

npx create-electron-app scratchpad --template=webpack

,

, dan direktori webpack.main.config.js yang mengandungi fail HTML, CSS, dan JavaScript awal. webpack.renderer.config.js webpack.rules.js src Menambah React:

Pasang kebergantungan yang diperlukan:

Konfigurasikan webpack untuk menyokong JSX dengan menambahkan Babel Loader ke

:

npm install --save-dev @babel/core @babel/preset-react babel-loader
npm install --save react react-dom

webpack.rules.js Uji integrasi React dengan menggantikan

dan mencipta

module.exports = [
  // ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  },
  // ...
];

seperti yang diterangkan dalam artikel asal. Running

harus memaparkan "Hello dari React in Electron!". src/renderer.js src/app.jsx npm start Membangun calar:

Pasang codemirror dan react-codemirror:

npx create-electron-app scratchpad --template=webpack

Import CSS yang diperlukan ke dalam src/renderer.js dan melaksanakan komponen ScratchPad dalam src/app.jsx menggunakan codemirror, mengendalikan kemas kini dan gaya seperti yang terperinci dalam artikel asal. Laraskan index.html dan index.css untuk menghapuskan unsur -unsur yang tidak perlu dan meningkatkan gaya.

Penjimatan dan pemuatan cakera selamat:

Tambahkan pengendalian sistem fail ke proses utama () menggunakan main.js. Buat fs dan loadContent fungsi untuk dibaca dari dan menulis ke fail yang terletak di direktori data aplikasi (). saveContent app.getPath('userData') Melaksanakan komunikasi antara proses (IPC) menggunakan

dalam

dan ipcMain dalam fail main.js yang baru dibuat untuk mengendalikan komunikasi dengan selamat antara proses utama dan penyokong. Skrip ipcRenderer bertindak sebagai jambatan yang selamat, hanya mendedahkan fungsi yang diperlukan untuk penyair. preload.js preload.js Ubah suai komponen

untuk menggunakan

untuk menyimpan dan ScratchPad (menggunakan window.scratchpad.saveContent) untuk memuatkan kandungan awal. Balut panggilan window.scratchpad.content dalam fungsi async untuk mengendalikan janji yang dikembalikan oleh ipcRenderer.invoke. ReactDOM.render window.scratchpad.content

mengoptimumkan pemuatan dan bangunan:

set dalam

penciptaan dan tambahkan pendengar acara

untuk meningkatkan pengalaman pemuatan, menghalang kilat putih awal. Keluarkan show: false. BrowserWindow ready-to-show Akhirnya, membina dan membungkus aplikasi menggunakan mainWindow.webContents.openDevTools(). Electron Forge akan menjana pemasang untuk sistem operasi anda.

Tanggapan yang disemak ini memberikan penjelasan yang lebih ringkas dan teratur mengenai artikel asal, mengekalkan fungsi teras dan aspek keselamatan sambil meningkatkan kebolehbacaan dan kejelasan. Penambahbaikan utama termasuk tajuk seksyen yang lebih jelas, pemformatan yang lebih baik, dan penjelasan yang lebih efisien mengenai mekanisme IPC dan pengendalian fail yang selamat. npm run make

Atas ialah kandungan terperinci Bina aplikasi desktop yang selamat dengan elektron menjalin dan bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!