検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript と Electron.js を使用してデスクトップ GUI アプリケーションを構築する

JavaScript と Electron.js を使用してデスクトップ GUI アプリケーションを構築する

王林
王林転載
2023-09-14 09:57:031635ブラウズ

使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序

今日のテクノロジー時代において、デスクトップ アプリケーションは、強化されたユーザー エクスペリエンスを提供し、ローカル コンピューターの機能を最大限に活用することで、私たちの日常生活において非常に重要な役割を果たしています。従来、デスクトップ アプリケーションの開発にはプラットフォーム固有のプログラミング言語とフレームワークに関する専門知識が必要であり、デスクトップ開発を検討している Web 開発者にとっては課題となっていました。ただし、Electron.js はこの課題を効果的に解決します。

Electron.js (以前は Atom Shell として知られていました) は、GitHub を起源とするオープンソース フレームワークです。これにより、開発者は HTML、CSS、JavaScript などの使い慣れた Web テクノロジーを使用してクロスプラットフォームのデスクトップ アプリケーションを構築できます。 Electron.js は、Web 開発とデスクトップ アプリケーション開発の間のギャップを埋めることにより、開発者が強力で機能豊富なデスクトップ アプリケーションを作成する新たな機会を生み出します。

Electron.js アーキテクチャ

Electron.js がどのように動作するかを理解するために、そのアーキテクチャを詳しく見てみましょう。 Electron.js は、Chromium レンダリング エンジンと Node.js ランタイムという 2 つの主要コンポーネントを組み合わせたものです。

  • Chromium レンダリング エンジン − Electron.js は、人気のある Web ブラウザ Google Chrome と同じレンダリング エンジン、Chromium を使用します。これにより、Electron.js アプリケーションは、Web ブラウザーと同じ機能とパフォーマンスで Web コンテンツをレンダリングおよび表示できるようになります。

  • Node.js ランタイム − span>Electron.js は Node.js ランタイムを統合し、基盤となるオペレーティング システムへのアクセスを提供します。そしてネイティブAPI。これは、開発者が Node.js の能力を最大限に活用し、モジュールとライブラリの広範なエコシステムを活用してデスクトップ アプリケーションを構築できることを意味します。

Electron.js はマルチプロセス アーキテクチャを利用しており、各 Electron.js アプリケーションは、メイン プロセスとレンダラ プロセスという 2 つの主要プロセスで構成されます。

  • メイン プロセス − メイン プロセスは、独立した Node.js プロセスとして実行され、ブラウザ ウィンドウの作成と管理を担当します。 。レンダラー プロセスと通信し、システム レベルのイベントを処理し、ネイティブ API にアクセスします。メイン プロセスはアプリケーションのライフサイクルを制御し、Electron.js アプリケーションへのエントリ ポイントとして機能します。

  • レンダラー プロセス − 各 Electron.js アプリケーションには複数のレンダラー プロセスを含めることができ、それぞれが個別のブラウザ ウィンドウに対応します。レンダラー プロセスは、各ブラウザ ウィンドウで Web コンテンツをレンダリングして表示する役割を果たします。これらは別の JavaScript コンテキストで実行され、一定レベルの分離とセキュリティを提供します。各レンダラー プロセスは Electron.js API にアクセスできるため、メイン プロセスと対話し、DOM の操作、ネットワーク リクエストの作成、ユーザー インタラクションの処理などのタスクを実行できます。

単純な Electron.js アプリケーションの構築

Electron.js とそのアーキテクチャについて十分に理解できたので、JavaScript を使用して単純な Electron.js アプリケーションを構築してみましょう。 「Hello, Electron.js」というメッセージをウィンドウに表示するアプリケーションを作成します。

開始するには、次の手順に従ってください -

開発環境をセットアップする

Electron.js は Node.js の上に構築されているため、コンピューターに Node.js がインストールされていることを確認してください。最新バージョンの Node.js を公式 Web サイト (https://nodejs.org) からダウンロードしてインストールできます。

新しい Electron.js プロジェクトを作成する

新しいプロジェクト フォルダーを作成し、コマンド ラインを使用してそのフォルダーに移動します。次のコマンドを実行して、新しい Node.js プロジェクトを初期化します。 -

リーリー

このコマンドは、新しい Node.js プロジェクトをデフォルト設定で初期化します。

Electron.jsをインストールする

次のコマンドを実行して、開発依存関係として Electron.js をインストールします -

リーリー

このコマンドは、プロジェクトに Electron.js パッケージをインストールします。

メインエントリポイントを作成する

プロジェクト フォルダーに index.js という名前の新しいファイルを作成し、次のコードを追加します -

リーリー

イラスト

このコードでは、Electron.js パッケージから必要なモジュールをインポートし、createWindow 関数を定義してブラウザー ウィンドウを作成し、ウィンドウの作成とアプリケーションの終了に必要なイベント ハンドラーを設定します。

HTMLファイルの作成

index.html という名前の新しいファイルをプロジェクト フォルダーに作成し、次のコードを追加します -

示例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Electron.js Application</title>
   </head>
   <body>
      <h1>Hello, Electron.js</h1>
   </body>
</html>

此 HTML 文件将显示在 Electron.js 应用程序的窗口中。

运行 Electron.js 应用程序

npx electron.

结论

Electron.js 彻底改变了开发人员使用 Web 技术构建桌面应用程序的方式。它提供了一个强大的框架，结合了 Chromium 渲染引擎和 Node.js 运行时，使开发人员能够使用 HTML、CSS 和 JavaScript 创建跨平台桌面应用程序。凭借其丰富的插件和工具生态系统，Electron.js 使开发人员能够构建功能丰富、高性能且具有视觉吸引力的桌面应用程序。

在本文中，我们探讨了 Electron.js 的基础知识，并学习了如何使用 JavaScript 构建简单的 Electron.js 应用程序。我们讨论了 Electron.js 的架构、它的主要进程以及主进程和渲染进程的作用。我们还逐步完成了设置开发环境和构建 Electron.js 应用程序的过程。

以上がJavaScript と Electron.js を使用してデスクトップ GUI アプリケーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript node.js 架构 css chrome electron html JS 事件 dom github https atom
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：HTML で JavaScript 関数を呼び出すにはどうすればよいですか?次の記事：HTML で JavaScript 関数を呼び出すにはどうすればよいですか?

関連記事

続きを見る