電子とは何ですか?
Electron は、JavaScript、HTML、CSS を使用してデスクトップ アプリケーションを構築するためのフレームワークです。Chromium と Node.js を Electron バイナリに埋め込むと、JavaScript コード ベースを維持し、Windows macOS と Linux で実行できるクロスプラットフォーム アプリケーションを作成できます。
Electron Fiddle の実行例
Electron Fiddle は、Electron によって開発され、そのメンテナによってサポートされているサンドボックス プログラムです。Electron の API を試したり、開発中に機能のプロトタイプを作成したりするための学習ツールとしてインストールすることを強くお勧めします。
足場作成環境
mkdir my-electron-app && cd my-electron-app
npm init
パッケージ.json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
Electron.js をダウンロード
Electron.js Github ウェアハウスのアドレス: https://github.com/electron/electron/releases
npm installelectron をインストールするには、アクセラレータを開く必要があります (プロテスト)
npm install --save-dev electron
ダウンロード中の ELIFECYCLE、EAI_AGAIN、ECONNRESET、ETIMEDOUT などのエラーは、このようなネットワークの問題の兆候です。
--verbose低速のネットワークでは、フラグを使用してダウンロードの進行状況を表示することをお勧めします。
npm install --verbose electron
メインプロセスを実行する
Electron アプリケーションへのエントリ ポイントはメイン ファイルです。このファイルは、完全な Node.js 環境で実行されるメイン プロセスを制御し、アプリのライフサイクルの制御、ネイティブ UI の表示、特別な操作の実行、およびレンダラー プロセスの管理を担当します。
実行中、Electron は、アプリケーションの package.json 構成のメイン フィールドに構成された値に従ってこのファイルを検索します。この値は、アプリケーション スキャフォールディング ステップで構成する必要があります。
このメイン ファイルを初期化するには、プロジェクトのルートに main.js という名前の空のファイルを作成します。
main.jsにelectron環境パッケージを導入する
const {
app, BrowserWindow } = require('electron')
package.json に従って開始スクリプトを実行するように構成します。npm run start
"scripts": {
"start": "electron-forge start",
}
HTMLページを作成する
アプリケーションのウィンドウを作成する前に、そのウィンドウにロードされるコンテンツを作成する必要があります。Electron では、各ウィンドウに表示されるコンテンツはローカル HTML ファイルまたはリモート URL です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
我们正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
</body>
</html>
ウィンドウに HTML ページが読み込まれます
ページを作成したので、それをアプリケーション ウィンドウにロードします。これを行うには、2 つの Electron モジュールが必要です。
app 模块，它控制应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理应用程序 窗口。
メイン プロセスは Node.js を実行するため、それらを main.js ファイルの先頭に CommonJS モジュールとしてインポートできます。
const {
app, BrowserWindow } = require('electron')
createWindow()新しい BrowserWindow インスタンスにindex.htmlをロードするメソッドを追加します。
const createWindow = () => {
const win = new BrowserWindow({
width: 800, height: 600
})
win.loadFile('index.html')
}
createWindow() 関数を呼び出してウィンドウを開きます
Electron では、アプリ モジュールの Ready イベントが発生した後にのみブラウザ ウィンドウが作成されます。app.whenReady() API を使用して、このイベントをリッスンできます。whenReady()成功時に createWindow() を呼び出します。
app.whenReady().then(() => {
createWindow() })
ウィンドウのライフサイクル
すべてのウィンドウを閉じたときにアプリケーションを終了する (Windows および Linux)
Windows および Linux では、通常、すべてのウィンドウを閉じるとアプリケーションが完全に終了します。
これを行うには、アプリ モジュールの「window-all-closed」イベントをリッスンする必要があります。ユーザーが macOS(darwin) 上でプログラムを実行していない場合は、app.quit() を呼び出します。
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
process.platform で指定できる値
'aix' 'darwin' 'freebsd' 'linux' 'openbsd' 'sunos' 'win32'
プリロードスクリプト
プリロードされたスクリプトを介してレンダラーから Node.js にアクセスします。
最後に、Electron のバージョン番号とその依存関係を Web ページに出力します。
Node のグローバル プロセス オブジェクトを介してメイン プロセスでこの情報にアクセスするのは簡単です。ただし、DOM はレンダラ ドキュメント コンテキストにアクセスできないため、メイン プロセスで直接 DOM を編集することはできません。それらはまったく異なるプロセスで存在します。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${
dependency}-version`, process.versions[dependency])
}
})
このスクリプトをレンダラー プロセスに追加するには、既存の BrowserWindow コンストラクターの webPreferences.preload オプションへのパスでプリロード スクリプトを渡します。
const {
app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。
path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。
Web コンテンツと対話するには、レンダラー プロセスにスクリプトを追加する必要があります。レンダラーは通常の Web 環境で実行されるため、
<script src="./renderer.js"></script>
ウィンドウオープンデバッグ
によると：shift + ctrl + i
プロセスモデル
この問題を解決するために、Chrome チームは各タブを独自のプロセスでレンダリングすることで、1 つの Web ページ上の不正なコードまたは悪意のあるコードがアプリケーション全体に引き起こす可能性のある損害を制限することにしました。単一のブラウザ プロセスがこれらのタブ プロセスとアプリケーションのライフサイクル全体を制御します。Chrome コミックの以下の図は、このモデルを視覚化したものです。
Chrome マルチプロセス アーキテクチャ
Electron アプリは非常によく似た構造になっています。アプリケーション開発者は、メイン プロセスとレンダラ プロセスという 2 種類のプロセスを制御します。これは、上記で説明した Chrome のブラウザおよびレンダラーのプロセスに似ています。
メインプロセス メインスレッド
すべての Electron アプリケーションには、アプリケーションのエントリ ポイントとして機能する単一のメイン プロセスがあります。メイン プロセスは Node.js 環境で実行されます。つまり、モジュールを要求し、すべての Node.js API を使用する機能があります。
ウィンドウ管理
メイン プロセスの主な目的は、BrowserWindow モジュールを使用してアプリケーション ウィンドウを作成および管理することです。
BrowserWindow クラスの各インスタンスはアプリケーション ウィンドウを作成し、別のレンダラー プロセスで Web ページを読み込みます。ウィンドウの webContent オブジェクトを使用して、メイン プロセスから Web コンテンツを操作できます。
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
width: 800, height: 1500 })
win.loadURL('https://github.com')
const contents = win.webContents
console.log(contents)
注: レンダラー プロセスは、BrowserView モジュールなどの Web 埋め込み用にも作成されます。埋め込み Web コンテンツも webContents オブジェクトにアクセスできます。
BrowserWindow モジュールは EventEmitter であるため、さまざまなユーザー イベント (ウィンドウの最小化または最大化など) のハンドラーを追加することもできます。
BrowserWindow インスタンスが破棄されると、対応するレンダラー プロセスも終了します。
ネイティブAPI
Electron の機能を Web コンテンツのカプセル化に限定しないようにするために、メイン プロセスには、ユーザーのオペレーティング システムと対話するためのカスタム API も追加されます。Electron には、メニュー、ダイアログ、トレイ アイコンなどのネイティブ デスクトップ機能を制御するさまざまなモジュールがあります。
レンダラプロセス
すべての Electron アプリは、開いた BrowserWindow ごとに個別のレンダラー プロセスを生成します。名前が示すように、レンダラーは Web コンテンツのレンダリングを担当します。したがって、実際には、レンダラ プロセスで実行されるコードは Web 標準に準拠する必要があります (少なくとも Chromium が現在使用されている限り)。
したがって、ブラウザ ウィンドウ内のすべてのユーザー インターフェイスとアプリケーション機能は、Web 開発で使用するのと同じツールと仕様を使用して作成する必要があります。
各ページの仕様の説明はこのガイドの範囲を超えていますが、最低限知っておく必要があるのは次のとおりです。
以一个 HTML 文件作为渲染器进程的入口点。
使用层叠样式表 (Cascading Style Sheets, CSS) 对 UI 添加样式。
通过 <script> 元素可添加可执行的 JavaScript 代码。
さらに、これはレンダラーが require または他の Node.js API に直接アクセスできないことも意味します。NPM モジュールをレンダラーに直接組み込むには、Web 開発に使用するのと同じパッケージ化ツール (例: webpack や Parcel) を使用する必要があります。
開発を容易にするために、完全な Node.js 環境を使用してレンダラー プロセスを生成できます。これまではこれがデフォルトでしたが、セキュリティ上の理由から、これは無効になっています。
プリロード プリロード スクリプト
プリロード スクリプトには、レンダラー プロセスで実行され、Web ページ コンテンツの前に読み込みを開始するコードが含まれています。これらのスクリプトはレンダラーの環境で実行されますが、Node.js API にアクセスできるため、より多くの権限が与えられます。
プリロード スクリプトは、BrowserWindow コンストラクターの webPreferences オプションでメイン プロセスに添付できます。
const {
BrowserWindow } = require('electron')
const win = new BrowserWindow({
webPreferences: {
preload: 'path/to/preload.js'
}
})
プリロード スクリプトはブラウザと同じグローバル ウィンドウ インターフェイスを共有し、Node.js API にアクセスできるため、Web コンテンツが使用できるようにグローバル ウィンドウで任意の API を公開することでレンダラーを強化します。
プリロード スクリプトとそれにアタッチされているレンダラーはグローバル ウィンドウ オブジェクトを共有しますが、contextIsolation がデフォルトであるため、そこからウィンドウに変更を直接アタッチすることはできません。
プリロード.js
window.myAPI = {
desktop: true }
レンダラー.js
console.log(window.myAPI)
コンテキスト分離 contextIsolation
コンテキストの分離とは、プリロード スクリプトがレンダラーのメイン実行環境から分離されて、特権 API が Web コンテンツ コードに漏洩するのを避けることを意味します。
代わりに、contextBridge モジュールを使用してインタラクションを安全に実装します。
プリロード.js
const {
contextBridge } = require('electron')
contextBridge.exposeInMainWorld('myAPI', {
desktop: true
})
レンダラー.js
console.log(window.myAPI)