Electron-Hello World

プロジェクト用に package.json ファイルを作成しました。ここで、Electronを使用して最初のデスクトップアプリを作成します。

_main.js_という新しいファイルを作成します。それに次のコードを入力してください-

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'indexl'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

別のファイルを作成します。今回は_indexl_というHTMLファイルです。次のコードを入力してください。

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
   </head>

   <body>
      <h1>Hello World!</h1>
      We are using node <script>document.write(process.versions.node)</script>,
      Chrome <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>.
   </body>
</html>

次のコマンドを使用してこのアプリを実行します-

$ electron ./main.js

新しいウィンドウが開きます。次のようになります-

Electron Hello World

このアプリはどのように機能しますか？

メインファイルとHTMLファイルを作成しました。メインファイルは、_app_と_BrowserWindow_の2つのモジュールを使用します。アプリモジュールはアプリケーションのイベントライフサイクルを制御するために使用され、BrowserWindowモジュールはブラウザーウィンドウを作成および制御するために使用されます。

新しいBrowserWindowを作成し、このBrowserWindowにURLを添付する_createWindow_関数を定義しました。これは、アプリの実行時にレンダリングおよび表示されるHTMLファイルです。

htmlファイルでは、ネイティブのElectronオブジェクトプロセスを使用しました。このオブジェクトはNode.jsプロセスオブジェクトから拡張されており、 t = its のすべての機能を含み、さらに多くを追加します。

Electron-hello-world

Electron-Hello World

このアプリはどのように機能しますか？