Membina aplikasi desktop silang platform dengan nw.js
nw.js: Rangka kerja untuk membina aplikasi asli menggunakan teknologi web
berbanding dengan rangka kerja aplikasi hibrid yang lain, elektron, NW.JS mempunyai kelebihan berikut: sokongan untuk krom. dan mengintegrasikan node.js dalam pekerja web.
Proses membuat aplikasi hibrid menggunakan NW.JS termasuk menubuhkan struktur projek, mewujudkan fail yang nyata, dan mewujudkan pandangan utama. Anda boleh merujuk kepada aplikasi sampel pada GitHub.
nw.js boleh dibangunkan dan dihasilkan dan dipasang menggunakan pakej
dan nw
masing -masing. Proses pembungkusan dan pengedaran boleh dipermudahkan dengan menambahkan skrip NPM ke fail nw-builder
. package.json
Artikel ini dikaji semula oleh Tim Sevien dan Joan Yin. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint sempurna!
NW.JS adalah rangka kerja untuk membuat aplikasi asli menggunakan teknologi web seperti HTML, JavaScript dan CSS. Ringkasnya, anda menggunakan proses biasa untuk membangunkan aplikasi web. Pada akhir proses, anda menjalankan penjana yang menyusun segala -galanya ke dalam aplikasi asli, dan aplikasi memaparkan aplikasi web anda seperti penyemak imbas. Aplikasi ini dipanggil "aplikasi hibrid."
Aplikasi hibrid sangat bagus bukan sahaja kerana mereka ditulis dalam bahasa yang sudah anda kenal (HTML, JavaScript, dan CSS), tetapi juga kerana mereka mempunyai kelebihan penting berikut mengenai aplikasi web biasa:
Kawalan penyemak imbas dan versi penyemak imbas (anda tahu penyemak imbas mana aplikasi anda dipanggil). Aplikasi hibrid NW.JS dipaparkan menggunakan Chromium (pelayar sumber terbuka yang berjalan di belakang Google Chrome). Oleh itu, aplikasi yang dijalankan di Chrome juga harus dijalankan dengan NW.Js.
- Kawalan Viewport. Sebagai contoh, anda boleh menentukan viewport tetap atau minimum/maksimum.
- Oleh kerana fail tempatan, tidak ada batasan dasar yang sama. Jika anda membuka fail tempatan dari sistem fail, penyemak imbas menghalang permintaan XMLHTTPREQUEST untuk fail yang tidak dalam direktori yang sama. Tingkah laku ini boleh dilumpuhkan dalam aplikasi NW.JS.
- mereka juga menyediakan API tersuai, yang membawa kelebihan berikut:
- integrasi node.js
- akses clipboard
- mengakses sistem fail
- akses perkakasan (contohnya, dapatkan senarai pencetak)
- ikon palet
- kotak dialog pemilih fail tersuai
- integrasi shell (buka fail atau url dalam penyemak imbas fail lalai atau penyemak imbas)
- Pilihan untuk menyesuaikan keseluruhan tetingkap (butang tutup, bar menu) dan menu konteks
- Keupayaan untuk menetapkan dan mendapatkan tahap zum.
terdengar baik? Kemudian mari kita mulakan. Dalam artikel ini, kita sebenarnya akan belajar tentang NW.JS dan belajar bagaimana untuk membuat aplikasi hibrid. Anda boleh mencari contoh aplikasi yang dibina menggunakan arahan dalam artikel ini di GitHub.
Kelebihan NW.JS berbanding dengan elektron
Pertama sekali, satu perkara yang disebutkan: NW.JS bukanlah satu -satunya rangka kerja untuk aplikasi hibrid. Pesaing lain dipanggil Electron. Ia dilancarkan pada tahun 2013, dua tahun di belakang NW.JS, tetapi dengan cepat menjadi terkenal kerana ia datang dari GitHub. Sekarang anda mungkin berminat dengan perbezaan di antara mereka. Berikut adalah kelebihan NW.JS berbanding dengan elektron:
- Sokongan Chrome.* API. API ini boleh digunakan untuk berinteraksi dengan penyemak imbas. (Anda boleh mendapatkan lebih banyak maklumat berkaitan dalam dokumentasi NW.JS.)
- menyokong aplikasi Chrome. Aplikasi Chrome adalah aplikasi yang dibungkus ditulis dalam bahasa web. (Lihat dokumentasi pemaju Chrome untuk maklumat lanjut.) Aplikasi ini berbeza daripada NW.JS kerana mereka tidak mempunyai integrasi Node.js dan diterbitkan menggunakan kedai web Chrome. (Chromium akan membatalkan sokongannya pada bulan Ogos 2018 (lihat catatan blog mereka). Tetapi menurut jawatan ini, NW.JS masih akan menyokong aplikasi Chrome.)
- Menyokong aplikasi NaCl (Native Client) dan PNACL (Pelanggan Native Portable). Mereka memberi tumpuan kepada prestasi, jadi mereka ditulis terutamanya dalam C dan C. (Lihat tutorial ini untuk menggunakannya di NW.Js.)
- mempunyai perlindungan kod sumber V8 Snapshot untuk melindungi kod sumber permohonan. Dengan alat NWJC, kod anda akan disusun menjadi kod asli. (Lihat artikel ini untuk maklumat lanjut.)
- mempunyai penonton PDF terbina dalam.
- Sila cetak Pratonton.
- menyokong integrasi node.js dalam pekerja web. Mereka digunakan untuk menulis aplikasi multithreaded.
- program kemas kini automatik terbina dalam (anda boleh mengikuti soalan mengenai program kemas kini automatik NW.JS).
- Secara automatik menghantar laporan kemalangan ke pelayan jauh. NW.JS hanya menulis kepada fail tempatan dan kemudiannya boleh dihantar secara manual.
Sebaliknya, aplikasi elektron menentukan fail JavaScript sebagai titik masuknya. Fail JavaScript ini dibuka dalam proses utama yang berasingan, dan fail HTML kemudiannya boleh dibuka di GUI. Ini bermakna bahawa dalam teori anda boleh menjalankan aplikasi elektron tanpa GUI. Juga, menutup GUI tidak menutup proses utama;
Walaupun Electron membuka pintu untuk aplikasi desktop yang ditulis dalam JavaScript dan tanpa GUI, aplikasi NW.JS mungkin lebih mudah untuk disediakan jika anda hanya ingin memaparkan aplikasi berasaskan HTML.
Nota: Jika anda benar -benar menyukai kelebihan elektron, lihat artikel terbaru SitePoint mengenai membuat aplikasi desktop dengan elektron.
Buat aplikasi demo
Mari mula membuat aplikasi yang akan disusun menjadi aplikasi asli kemudian. Memandangkan terdapat banyak cara untuk menyediakan aplikasi web - menggunakan pelbagai bahasa JS (typescript, coffeescript, dll.), Pemuat modul (memerlukanJs, webpack, systemjs, dll.), Rangka kerja (AngularJS, React, vue.js, dan lain -lain) dan preprocessors (SCSS, kurang, HAML, dll.) - dan setiap orang mempunyai keutamaan mereka sendiri, kami hanya menggunakan teknologi HTML, CSS dan JS (ES6 standard) asas.
tidak ada nw.js boilerplate (projek mula) untuk sebarang tetapan. Semua ini dibina untuk rangka kerja tertentu, loader modul, atau preprocessor. Oleh itu, kami akan melaksanakan aplikasi NW.JS yang mudah dari awal. Sangat mudah difahami dan anda boleh menyesuaikannya dengan mudah kemudian ke keperluan anda, atau beralih ke boilerplate.
Struktur Projek
Pertama, kita perlu membuat struktur dan fail projek kita:
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
Arahan:
- src/mengandungi fail sumber aplikasi.
- src/ app/ mengandungi fail JavaScript kami.
- src/ views/ mengandungi fail paparan html.
- src/package.json adalah fail manifes untuk aplikasi NW.JS (lihat format manifes). Kami juga menentukan kebergantungan aplikasi di sini.
- Package.json adalah fail pakej NPM yang perlu kita lakukan aliran kerja membina dan menentukan kebergantungan yang tidak diperlukan dalam aplikasi NW.JS sebenar (seperti kebergantungan bangunan).
Sekarang kita telah mencipta struktur dan fail projek, kita boleh mula menggunakan fail manifest nw.js src/pakej.json. Menurut dokumentasi, fail pada dasarnya memerlukan hanya dua sifat, nama (nama aplikasi) dan utama (laluan ke fail HTML yang digunakan sebagai titik masuk). Tetapi kami menambah lebih banyak maklumat, seperti laluan ikon tetingkap, serta lebar dan ketinggian minimum, untuk memastikan pengguna tidak melihat apa -apa yang tidak dijangka:
<code>{ "name":"nw.js-example", "main":"views/main.html", "window":{ "min_width":400, "min_height":400, "icon":"assets/icon.png" } }</code>
Buat paparan rumah
Pada ketika ini, kita boleh menulis aplikasi tugasan. Tetapi kami mahu memberi tumpuan kepada NW.JS dan ciri -cirinya. Untuk ini, saya lebih suka membiarkan
anda memutuskan apa aplikasinya. Saya mencipta contoh Projek NW.JS-Examples pada GitHub untuk menunjukkan beberapa ciri NW.JS seperti Integrasi Node.js dan akses papan klip. Jangan ragu untuk mencubanya dalam permohonan anda. Tetapi anda boleh menggunakan kandungan lain juga.
Untuk apa sahaja yang anda memutuskan, anda mesti sekurang -kurangnya membuat fail src/views/main.html kerana ia adalah titik masuk aplikasi. Ia mungkin kelihatan seperti ini:
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
Dalam aplikasi sebenar, anda mungkin mempunyai beberapa fail pandangan lain dan memuatkannya menggunakan AJAX. Untuk kesederhanaan, anda juga boleh membuat hiperpautan asli dan rujukan fail HTML yang lain. Contohnya:
<code>{ "name":"nw.js-example", "main":"views/main.html", "window":{ "min_width":400, "min_height":400, "icon":"assets/icon.png" } }</code>
Pasang nw.js
Kami kini telah mencipta projek NW.JS, termasuk manifes dan pandangan utama. Kami akhirnya memerlukan cara untuk menjalankan NW.JS secara langsung pada mesin pembangunan kami untuk pembangunan dan melaksanakan proses binaan yang menjana aplikasi asli untuk pelbagai sistem operasi.
untuk melakukan ini, kita memerlukan dua pakej berikut:
- nw (pembangunan)
- NW-Builder (Pengeluaran)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NW.js-example | main</title> <link rel="stylesheet" href="../styles/common.css"> </head> <body> <h1 id="Hello-World">Hello World :-)</h1> <🎜> </body> </html>
<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>
Pembungkusan dan pengedaran
Untuk memudahkan pembungkusan, kami menambah skrip NPM ke fail pakej.json kami. Mereka membenarkan kami menjalankan arahan CLI, yang ditakrifkan di sebelah kanan dan menggunakan NPM berjalan di sebelah kiri menggunakan jalan pintas. Kami menambah dua skrip, satu untuk pembangunan dan satu untuk pengeluaran:
{ "name":"nw.js-example", "version":"1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" } }
Untuk memulakan aplikasi NW.JS secara langsung, hanya jalankan:
$ npm install
Pembinaan Pengeluaran
Pembentukan pengeluaran akan menggunakan NW-Builder, yang menyokong output dari Windows, Linux, dan MacOS. Dalam contoh kami, kami membina satu pakej untuk semua platform ini, termasuk versi 32-bit dan 64-bit. Untuk macOS, pada masa ini, hanya 32-bit boleh dibina dalam mod versi lama. (Lihat soalan ini mengenai GitHub.) Jadi, hanya 64-bit dibina.
untuk menjalankan pengeluaran pengeluaran kami, hanya jalankan:
{ "name":"nw.js-example", "version":"1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" }, "scripts":{ "dev":"nw src/", "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/" } }
akan mengambil sedikit masa ...
Apabila selesai, periksa dist/folder anda. Ia sepatutnya kelihatan seperti ini:
Hebat, kami hampir selesai!
$ npm run dev
Ujian dan Debug
manual
Sejak nw.js didasarkan pada kromium, ujian manual semudah dalam Chrome. Apabila anda menghadapi ralat (visual atau berfungsi), anda boleh membuka alat pemaju menggunakan pintasan papan kekunci F12 atau secara programatik:
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
Automasi
Ujian unit automatik (bernasib baik) digunakan secara meluas untuk memastikan ia berfungsi dengan baik dalam pelbagai pelaksanaan tanpa memerlukan ujian manual yang berterusan.
Jika aplikasi anda tidak menggunakan kaedah API khusus NW.JS, anda secara teorinya boleh menyimpan aliran kerja aplikasi web biasa anda-sebagai contoh, menggunakan karma sebagai pelari spesifikasi, digabungkan dengan melati sebagai rangka kerja ujian.
Kesimpulan
Saya harap artikel ini akan memberi anda pemahaman yang mendalam tentang kelebihan dan penggunaan kes-kes NW.JS. Terdapat banyak sebab mengapa menggunakan aplikasi hibrid lebih baik daripada mengedarkan folder .zip yang mengandungi fail HTML (dan kemudian berjalan dari sistem fail). NW.JS juga boleh digunakan sebagai pengganti aplikasi asli, kerana anda tidak perlu memberi tumpuan kepada GUI kompleks, dan anda mempunyai banyak ciri terbina dalam seperti pemain video. Oleh kerana anda dapat mengesan persekitaran, anda juga boleh membangunkan aplikasi yang boleh dijalankan pada pelayan web dan mesin klien biasa menggunakan NW.JS. Dengan beberapa helah, dan terima kasih kepada enjin Chromium yang kuat, pengguna tidak dapat merasakan perbezaan dari aplikasi asli.
Apabila membuat projek NW.JS baru, mula -mula menentukan kerangka kerja, loader modul, dan preprocessor yang anda mahu gunakan -bergantung pada apa yang anda kenal -atau mula terus dari awal. Selepas membuat keputusan ini, anda boleh mencari nw.js boilerplate yang sesuai dengan keperluan anda. Sekiranya tidak ada boilerplate yang sesuai, anda boleh menggunakan aplikasi berdasarkan tutorial ini sebagai asas.
Apakah model pilihan anda? Atau teknologi apa yang anda pilih untuk membangunkan aplikasi NW.JS? Adakah ia berkesan untuk menggunakan contoh NW.JS dan bukannya pelaksanaan aplikasi tugasan dalam artikel ini? Tolong beritahu saya dalam komen.
Soalan Lazim (Soalan Lazim) Mengenai Aplikasi Desktop Cross-Platform Menggunakan NW.JS
Apakah perbezaan utama antara NW.JS dan kerangka aplikasi desktop silang platform yang lain?
nw.js adalah alat yang berkuasa untuk membangunkan aplikasi desktop silang platform. Tidak seperti kerangka lain, NW.JS membolehkan pemaju menulis kod dalam HTML, CSS, dan JavaScript, yang biasanya digunakan dalam pembangunan web. Ini memudahkan pemaju web beralih ke pembangunan aplikasi desktop. Di samping itu, NW.JS mempunyai ciri unik yang membolehkan akses langsung ke API Node.js di DOM, membolehkan ciri -ciri yang lebih kompleks dan berkuasa.
Bagaimana untuk memulakan dengan nw.js?
Untuk memulakan dengan nw.js, anda perlu memuat turun dan memasangnya dari laman web rasmi. Sebaik sahaja pemasangan selesai, anda boleh membuat direktori projek baru, tambahkan fail HTML, CSS, dan JavaScript anda, dan kemudian jalankan aplikasi anda menggunakan NW.JS Executable. Dokumentasi NW.JS menyediakan panduan terperinci tentang cara memulakan.
Bolehkah saya menggunakan nw.js untuk projek komersial?
Ya, anda boleh menggunakan NW.JS untuk projek komersial. NW.JS adalah sumber terbuka dan tersedia secara percuma, menjadikannya penyelesaian kos efektif untuk membangunkan aplikasi desktop silang platform. Walau bagaimanapun, perlu diperhatikan bahawa mana-mana modul pihak ketiga yang digunakan mungkin mempunyai keperluan pelesenan sendiri.
Bagaimana untuk membungkus dan mengedarkan aplikasi NW.JS saya?
Pembungkusan dan pengedaran aplikasi NW.JS melibatkan membuat fail yang boleh dilaksanakan secara mandiri yang boleh dijalankan pada platform sasaran. Ini boleh dilakukan menggunakan alat seperti NW-Builder atau Webpack. Setelah dibungkus, aplikasi itu boleh diedarkan melalui pelbagai saluran, seperti muat turun langsung atau kedai aplikasi.
Platform apa yang disokong oleh NW.JS?
nw.js menyokong pelbagai platform. Ia boleh digunakan untuk membangunkan aplikasi untuk Windows, Mac, dan Linux. Sokongan rentas platform ini adalah salah satu kelebihan utama menggunakan NW.JS kerana ia membolehkan pemaju menulis kod sekaligus dan dijalankan pada pelbagai platform.
bagaimana debug aplikasi nw.js saya?
Debugging Aplikasi NW.JS adalah serupa dengan aplikasi web debugging. Anda boleh debug menggunakan alat pemaju Chrome yang disediakan oleh bundle NW.JS. Alat ini menyediakan banyak fungsi untuk memeriksa dan menyahpepijat kod.
Bolehkah saya menggunakan modul Node.js dalam aplikasi NW.JS saya?
Ya, salah satu ciri utama NW.JS adalah keupayaan untuk menggunakan modul Node.js secara langsung di DOM. Ini membolehkan fungsi yang lebih kompleks dan berkuasa dilaksanakan dalam permohonan anda. Anda boleh menggunakan mana -mana beribu -ribu modul yang terdapat pada NPM dalam aplikasi NW.JS anda.
Bagaimana untuk mengemas kini aplikasi NW.JS saya?
Mengemas kini aplikasi NW.JS melibatkan menggantikan versi lama aplikasi dengan versi baru aplikasi. Ini boleh dilakukan secara manual oleh pengguna, atau anda boleh menggunakan modul seperti NW-updater untuk melaksanakan kemas kini automatik dalam aplikasi.
Bolehkah saya mengakses API asli menggunakan nw.js?
Ya, nw.js membolehkan akses langsung ke API asli melalui Node.js. Ini bermakna anda boleh menggunakan ciri -ciri asli seperti sistem fail, rangkaian, peranti, dan lain -lain dalam aplikasi anda. Ini adalah kelebihan utama NW.JS melalui teknologi web tradisional.
Bagaimana untuk mengoptimumkan prestasi aplikasi NW.JS saya?
Mengoptimumkan prestasi aplikasi NW.JS melibatkan pelbagai teknologi seperti meminimumkan dan menghubungkan fail JavaScript, mengoptimumkan imej, dan menggunakan algoritma yang cekap dan struktur data. Di samping itu, anda boleh menggunakan alat pemaju Chrome untuk menganalisis dan menyahpepijat isu prestasi.
Output yang disemak semula ini mengekalkan penempatan dan format imej asal, ayat -ayat dan perenggan untuk keaslian semasa memelihara makna teras, dan menggunakan bahasa yang lebih ringkas dan berkesan.
Atas ialah kandungan terperinci Membina aplikasi desktop silang platform dengan nw.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Masalah kemas kini data dalam operasi Zustand Asynchronous. Apabila menggunakan Perpustakaan Pengurusan Negeri Zustand, anda sering menghadapi masalah kemas kini data yang menyebabkan operasi tak segerak menjadi tidak lama lagi. � ...
