Masalah utama dengan pilihan ini ialah mereka secara umumnya melibatkan pembelajaran bahasa lain (yang mengalahkan titik) atau pengguna terpaksa memasang plugin yang dilanda kestabilan, prestasi dan masalah keselamatan.
kita semua tahu kuasa teknologi JavaScript dan Web dan telah melihat gelombang pilihan untuk membangun dan membungkus aplikasi desktop silang platform menggunakan pengetahuan ini.
Electron, oleh GitHub adalah satu pilihan, tetapi kerana saya sudah dengan senang hati menggunakan beberapa aplikasi yang dibina dengannya, nampaknya pilihan yang baik untuk disiasat. Selepas dua tahun pembangunan, termasuk satu perubahan nama (dari Atom Shell), Electron baru -baru ini mencapai versi 1.0, sentiasa menjadi peristiwa penting dalam kewujudan projek. Apa masa yang lebih baik untuk melihat apa yang mampu.
Memasang elektron
Electron mempunyai projek permulaan yang cepat dan siaran pra-bina yang ada, tetapi mari menyelam lurus di ujung dalam dan pasang elektron melalui NPM:
<span>npm install electron-prebuilt -g </span>
mana pilihan yang anda ikuti, anda harus berakhir dengan binari elektron yang boleh dilaksanakan.
Projek elektron memerlukan tiga fail:
anda memerlukan wira
anda boleh mencari projek akhir di GitHub.
buka pakej.json dan tambahkan yang berikut:
Ini adalah fail pakej.json standard dan mengikuti format dan pilihan yang sama seperti node.js. Di sini menetapkan nama aplikasi, versi, fail javascript utama dan kebergantungan.
brew <span>install Caskroom/cask/electron </span>
Jalankan NPM Pasang selepas menambahkan ini untuk memastikan anda mempunyai dependensi dipasang.
main.js mengendalikan interaksi antara sistem operasi tuan rumah dan kod JavaScript anda. Ini akan menjadi contoh mudah, anda boleh mengetahui lebih lanjut mengenai apa yang mungkin dalam dokumentasi Electron.
Pertama, mari kita sediakan keperluan yang diperlukan (iaitu elektron), buat aplikasi, tetingkap penyemak imbas asli dan tempat letak tetingkap utama untuk bekerja dengan.
Pemegang seterusnya berhenti aplikasi jika Windows ditutup. Jika platform adalah OS X, aplikasi biasanya tetap terbuka selepas semua tingkap ditutup dan pengguna biasanya akan berhenti secara eksplisit, jadi mengendalikan kes penggunaan.
<span>{
</span> <span>"name": "hero-browser",
</span> <span>"version": "0.1.0",
</span> <span>"main": "main.js",
</span> <span>"dependencies": {
</span> <span>"dotenv": "^2.0.0",
</span> <span>"md5": "^2.1.0"
</span> <span>}
</span><span>}
</span>Setelah elektron diasaskan, buat tetingkap penyemak imbas dan muatkan kod aplikasi. Jika tetingkap ditutup, dereference objek tetingkap.
<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app; // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>; // Module to create native browser window.
</span><span>var mainWindow = null;
</span>Buat subfolder yang dipanggil App. Dalam app/index.html tambahkan rujukan kepada stylesheets dan fail JavaScript yang diperlukan dan sediakan struktur HTML antara muka.
app<span>.on('window-all-closed', function() {
</span> <span>if (process.platform != 'darwin') {
</span> app<span>.quit();
</span> <span>}
</span><span>});
</span>Buat apl/css/index.css dan tambahkan beberapa CSS asas untuk membantu susun atur.
app<span>.on('ready', function() {
</span> mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span> mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
mainWindow<span>.on('closed', function() {
</span> mainWindow <span>= null;
</span> <span>});
</span><span>});
</span>Buat apl/js/index.js. Ini akan menjadi tempat kebanyakan fungsi aplikasi berlaku. Mulakan dengan menubuhkan kebergantungan dan pembolehubah yang diperlukan:
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Marvel Super Hero Browser<span><span></title</span>></span>
</span> <span><span><span><link</span> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span>/></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><h1</span>></span>Marvel Super Hero Browser<span><span></h1</span>></span>
</span> <span><span><span><em</span>></span>Thanks to Marvel for their API.<span><span></em</span>></span>
</span>
<span><span><span><div</span> id<span>="character_list"</span>></span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="js/index.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span><span>npm install electron-prebuilt -g </span>
API Marvel adalah API yang menyeronokkan untuk digunakan, tetapi ia adalah pengesahan dan struktur data boleh mengelirukan. Daftar di sini untuk kunci dan ikuti arahan ini untuk mendapatkan tiga parameter yang diperlukan di atas. Kekunci awam dan peribadi yang diperlukan untuk pengesahan disimpan dalam fail .env dan diakses menggunakan pakej dotenv.
brew <span>install Caskroom/cask/electron </span>
Nilai had menetapkan berapa banyak rekod yang diminta dan terdapat parameter lain yang boleh ditetapkan.
Jika anda lebih suka melangkau menyambung dan mengesahkan dengan API Marvel, maka saya membuat fail data JSON untuk anda gunakan sebaliknya. Gantikan kod JavaScript di atas dengan:
<span>{
</span> <span>"name": "hero-browser",
</span> <span>"version": "0.1.0",
</span> <span>"main": "main.js",
</span> <span>"dependencies": {
</span> <span>"dotenv": "^2.0.0",
</span> <span>"md5": "^2.1.0"
</span> <span>}
</span><span>}
</span>seterusnya Buat pembolehubah HTML dan tempat pemegang letak yang diperlukan untuk mengeluarkan setiap aksara ke dalam div aksara:
<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app; // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>; // Module to create native browser window.
</span><span>var mainWindow = null;
</span>Seterusnya, buat panggilan ke API dan memproses respons, menggerudi ke dalam struktur JSON untuk senarai sebenar aksara di dalam resp.data.results.
Buat elemen HTML untuk setiap watak, memasuki mereka ke Watak_LIST. Imej dalam API Marvel dipisahkan ke dalam nama fail dan lanjutan. Sekiranya tidak ada imej yang tersedia, ia memaparkan imej 'tiada imej yang tersedia', kita boleh mengendalikan ini, tetapi tidak akan dalam contoh ini.
Apabila gelung selesai, paparkan pemberitahuan sistem, kaedah rapat dan mengendalikan kesilapan yang berpotensi yang menghubungkan ke API.
app<span>.on('window-all-closed', function() {
</span> <span>if (process.platform != 'darwin') {
</span> app<span>.quit();
</span> <span>}
</span><span>});
</span>Jalankan permohonan dengan melaksanakan arahan di bawah dalam direktori root projek:
app<span>.on('ready', function() {
</span> mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span> mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
mainWindow<span>.on('closed', function() {
</span> mainWindow <span>= null;
</span> <span>});
</span><span>});
</span> 
NOTA: Kami menggunakan sifat Marvel yang berhak cipta di sini untuk tujuan ilustrasi. Tolong jangan mengedarkannya sebagai anda sendiri!
Saya kemudian menggunakan iconverticons.com/online/ untuk menukar PNG ke fail ikon Mac, tetapi ada alat lain yang tersedia.
Cara paling mudah untuk membungkus projek ini adalah dengan menggunakan modul NPM Pemasangan Elektron (nota: ini perlu dipasang secara berasingan). Ia boleh menjana binari yang besar, untuk aplikasi desktop ini mungkin tidak menjadi masalah, tetapi jika ia, pilihan lain diterangkan di sini.
Jika anda pembungkusan untuk Windows pada platform bukan Windows, anda perlu memasang wain, yang merupakan kebergantungan yang besar.
mereka berkumpul, inilah cara membuat permohonan permohonan. Dalam folder projek anda, jalankan (
menggantikan dengan nilai yang relevan untuk projek anda):
mengikut urutan, parameter ini ditetapkan:<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Marvel Super Hero Browser<span><span></title</span>></span>
</span> <span><span><span><link</span> href<span>="css/index.css"</span> rel<span>="stylesheet"</span> type<span>="text/css"</span>/></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><h1</span>></span>Marvel Super Hero Browser<span><span></h1</span>></span>
</span> <span><span><span><em</span>></span>Thanks to Marvel for their API.<span><span></em</span>></span>
</span>
<span><span><span><div</span> id<span>="character_list"</span>></span><span><span></div</span>></span>
</span>
<span><span><span><script</span> src<span>="js/index.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>Nota: Semua parameter boleh dipisahkan koma untuk pelbagai nilai dan jika anda ingin menghasilkan semua platform dan seni bina, anda boleh menggantikan parameter yang berkaitan dengan -semua.
Saya suka mendengar tentang aplikasi yang anda bina dengan elektron dalam komen di bawah.
soalan yang sering ditanya mengenai aplikasi nod desktop dengan elektron
Memasang elektron agak mudah. Sebaik sahaja anda mempunyai Node.js dan NPM yang dipasang, anda boleh memasang elektron secara global pada sistem anda menggunakan arahan berikut di terminal atau command prompt: NPM Install -g Electron. Perintah ini memasang elektron secara global, membolehkan anda mengaksesnya dari mana -mana direktori pada sistem anda.
Untuk membuat projek elektron baru, pertama, membuat direktori baru untuk projek anda. Navigasi ke direktori ini di terminal anda atau command prompt, dan kemudian mulakan projek node.js baru menggunakan perintah NPM init. Perintah ini mewujudkan fail pakej.json baru dalam direktori projek anda. Anda kemudian boleh memasang elektron dalam projek anda menggunakan perintah NPM Install -Save Electron.
Bolehkah saya menggunakan teknologi web dalam aplikasi elektron saya? permohonan elektron anda. Elektron pada dasarnya adalah penyemak imbas web yang membolehkan anda membuat aplikasi desktop menggunakan teknologi web seperti HTML, CSS, dan JavaScript. Menggunakan alat pemaju krom. Elektron dibina di atas kromium, jadi ia termasuk alat pemaju terbina dalam yang boleh anda gunakan untuk debug aplikasi anda. Membina aplikasi silang platform dengan elektron. Elektron membolehkan anda membina aplikasi yang berjalan pada Windows, MacOS, dan Linux.
Atas ialah kandungan terperinci Buat aplikasi nod desktop silang platform dengan elektron. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Cara menggunakan ungkapan tanda soal dalam bahasa C
Sejarah operasi jadual paparan Oracle
Apakah perisian Twitter?
Cara membuat halaman web responsif
Kaedah pelaksanaan fungsi benteng js
Apakah maklumat peribadi yang akan dilihat oleh rakan rapat Douyin?
Apa itu ECharts
Bagaimana untuk berdagang di Binance
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
