電子で最初のデスクトップアプリケーションを作る

9759 ワード
electron desktop applications javascript テキストリンク
JavaScriptの多くを使用して、他の何かを学ぶことなく、デスクトップアプリケーションを作成するWeb開発者なら、電子はあなたのために正しいことです!
With Electron , JavaScript、HTML、およびCSSでクロスプラットフォームアプリケーションを構築できます.
元のポストはhttps://livecode247.com/making-your-first-desktop-application-with-electron

カヴァンヴァンリ / マイ電子アプリ



電子をインストール


プロジェクトを作成し、npm dev依存性として電子をインストールすることから始めましょう
mkdir my-electron-app && cd my-electron-app
npm init -y
npm install -D electron
プロジェクトの構造は以下のようになります
my-electron-app/
  |--node_modules/
  |--package.json
  |--main.js
  |--index.html

メイン作成.jsファイル


The main.js ファイルは私たちの電子アプリケーションのエントリポイントとして機能します.これは、メインプロセスを実行するアプリケーションを提供し、アプリケーションのライフサイクルを制御するGUIを表示し、ネイティブOSの相互作用を実行し、レンダラプロセスなどを作成します.

インポート依存


const { app, BrowserWindow } = require('electron');
これらの二つのモジュールを
  • アプリのライフサイクルイベントを管理する
  • ブラウザウィンドウの作成と制御

    • ブラウザウィンドウの作成


    function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webpreferences: {
            nodeIntegration: true
        }
    })

    win.loadFile('index.html')
}

app.whenReady().then(createWindow)
    この関数では、ブラウザウィンドウを作成しています.幅と高さをそれぞれ800と600に設定し、ノード統合を可能にしました.次にインデックスを読み込みます.私たちのウィンドウのHTMLファイルとそれを提供

    ボーナスチップ


    また、使用してファイルの代わりにURLを提供することができますて
    win.loadURL('http://localhost:3000')
// OR
win.loadURL('https://livecode247.com')

    ウィンドウ閉鎖


    app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
    この関数では、すべてのウィンドウが閉じられたときにアプリケーションを終了します.しかし、我々はダーウィン(OSX)でそれをしません

    新しい窓


    新しいブラウザウィンドウを作成する新しいリスナーを追加すると、アプリケーションがアクティブになった後にウィンドウが表示されない場合に限ります.たとえば、初めてのアプリケーションを起動した後、または既に実行中のアプリケーションを再起動します.
    app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})
    メインスクリプトファイルで終了しましたので、HTML部分に行きましょう

    Webページの作成


    以下を加えるindex.html ファイルを作成します.
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
</body>
</html>
    これは普通ですhtml 見出しのあるファイルHello World!

    アップデートパッケージ。JSON


    今、我々はアプリケーションを提供する前に、我々はいくつかの変更をする必要がありますpackage.json ファイル.

    メインエントリポイント


    更新"main" このように見えるキー
    "main": "main.js",

    スタートスクリプトの追加


    ように我々のアプリケーションにスタートスクリプトを追加しましょう.
    "scripts": {
    "start": "electron ."
},
    それだ!さあ、試してみましょう.

    アプリの実行


    端末で以下を実行します
    npm start
    今、あなたのデバイスでアプリケーションウィンドウを起動する必要があります

    ボーナス


    また、電子とプッシュ通知を追加することができます.試してみましょう
    以下を加えるindex.html
    <script>
    const myNotification = new Notification('Title', {
        body: 'Notification from Rederer process'
    })

    myNotification.onclick = () => {
        console.log('Notification clicked')
    }
</script>
    さて、アプリが起動すると、このようなものが表示されます

    Note: This will differ from OS to OS. The above is an image taken on OSX.


    そして、それをクリックするとNotification Clicked コンソールで.
    あなたが実行して開発ツールを開くことができますCmd-option-i MacまたはCtrl-alt-i Windows/Linuxで
    これはこれです
    【初心者向け】いいね機能でハートマークを切り替える方法といいね数の表示をする
    JavaScriptユニバースパート2