何ですか.

Electronは、Githubによって開発され、HTML、CSS、JavaScriptでプラットフォーム間デスクトップアプリケーションを構築するオープンソースライブラリである.

ElectronはChromiumとNodeを通過する.jsは同じランタイム環境に統合され、Mac、Windows、Linuxシステムのアプリケーションにパッケージ化されて実現されます.

なぜelectronを選んだのですか?
まず公式の2つの言葉を見てみましょう
JavaScript、HTML、CSSを使用して、プラットフォーム間でデスクトップアプリケーションを構築
Webサイトを構築できれば、デスクトップアプリケーションを構築することができます.ElectronはJavaScript、HTML、CSSなどのWeb技術を使ってオリジナルプログラムを作成するフレームワークで、難しい部分を担当しています.アプリケーションの核心に集中すればいいだけです.
フロントエンドであれば、これがどんなに簡単か分かります.
ああ、そうだ.まだ知らないかもしれませんが、Visual Studio Code・wordpress・およびslackなどのクライアントはElectronに基づいて開発されています.
1.Webフロントエンド技術でプラットフォーム間デスクトップクライアントを開発できる
これはElectronの最も魅力的なところで、根本的にはChromiumとNodeの上に構築されているため、1つの担当インタフェース、1つの責任の背後にある論理、1つの言葉がどのように言っているのか ， ので、Electronはプラットフォームをまたぐデスクトップアプリケーションを開発することができて理解することができます.
前端の菜鳥として:

自分のよく知っている方法でアプリを書くことができます.ps:java、c言語は私に言わないでください.私は江湖を歩くとjsがあります.需要があればやることです.jsをマスターして、天下を歩き回っても怖くありません.

論理部分もJSですが、Nodeに精通していればもっといいです.バックエンドも一緒に書きました.ps:sorry、jsができるのは何でもできます.私はある言語に対してではありません.私は座っているすべてのことを言っています...△冗談だよ、私を殴ってはいけない.

so,1つのWebフロントエンド開発者は少ないコストでElectronを上手にすることができるが,従来のマルチプラットフォームクライアントの開発コストに比べて,Electronを利用してマルチプラットフォームクライアントを開発するコストは極めて低い.
2.ノードの生態から大きな助力を得ることができる
ElectronはNodeに基づいているため、Nodeという大きな生態の下のモジュールを意味し、Electronも使用することができます.これは多くの車輪を作る時間を減らしています.論理を書くと、自分がドアを閉めて車を作るのではなく、成熟したモジュールを導入することができるかどうかをまず考えなければなりません.
3.クライアントが必要な理由
ElectronがWebテクノロジーでクライアントを書いている以上、Electronがしなければならないことは、ウェブサイトに移ることができ、なぜクライアントに移るのか、ここでは3つの角度の答えがあります.

ユーザー角度:クライアントは独立したソフトウェアであり、その総合体験は一般的にウェブサイトより高く、特に「ツール」の範疇に関するアプリケーションである.また、特定のユーザー層においても同様の使用習慣がある

発行側角度:クライアントは別の製品形式であり、製品の配布方式と入口であり、クライアントは多くのローカルアプリケーション独自のニーズを実現してユーザーに触れることができ、より信頼できるサービスを提供することができる

開発角度:ついに…ブラウザの互換性を考慮する必要はありません!!!Chromiumもいくつかの先進的なCSSやJSの特性を開発するのに十分で、私たちは今まだwebpackやbabelを導入する計画がありません.今は十分なようですから、我慢するのが爱で、書くのがさっぱりしている以外に、開発にとって、やっとブラウザの砂箱から飛び出して、あなたは自分でElectronの中の「ブラウザ」をコントロールすることができて、何だか楽しいです

これらを総合してこの小節に答える質問は、Electronでクライアントを開発し、ユーザー体験がよく、開発が面倒で小さく、機能がより強く、世界がより平和であることです~~~
どう使いますか.
開発の観点から、Electronアプリケーションは本質的にノードである.jsアプリケーション.ノードとjsモジュールは同じで、アプリケーションのエントリはpackageです.jsonファイル.最も基本的なElectronアプリケーションには、一般的に次のディレクトリ構造があります.

your-app/
├── package.json
├── main.js
└── index.html

新しいElectronアプリケーションの新しい空のフォルダを作成します.コマンドラインツールを開き、フォルダから実行しますnpm init

npm init

npmは、基本的なpackage.jsonファイルを作成するのに役立ちます.mainフィールドに表示されるスクリプトは、メインプロセスで実行されるアプリケーションの起動スクリプトです.次のセグメントは、package.jsonの例です.

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}

注意:mainフィールドがpackage.jsonに表示されない場合、Electronindexをロードしようとします.jsファイル(Node.js自身のように).もしあなたが実際に簡単なノードアプリケーションを開発している場合は、start足の本来のガイドnode現在のパッケージを実行する必要があります.

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Electronのインストール
インストールする必要がありますelectron.私たちがお勧めするインストール方法は、appの開発依存項目として使用することです.これにより、異なるappで異なるElectronバージョンを使用することができます.次のコマンドをappフォルダで実行します.

npm install --save-dev electron

簡単なElectronを開発
Electron appsはJavaScriptを用いて開発し、その動作原理と方法はNode.js開発は同じです.ElectronモジュールはElectronが提供するすべてのAPIと機能、導入方法と普通のNodeを含む.jsモジュールは同じです.

const electron = require('electron')

electronモジュールが提供する機能はすべてネーミングスペースによって露呈している.たとえば、electron.appElectronアプリケーションのライフサイクルの管理、electron.BrowserWindowクラスがウィンドウの作成を担当します.次は簡単なmain.jsアプリケーションの準備ができたらウィンドウを開きます.

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

function createWindow () {   
  //        
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  //   index.html  
  win.loadFile('index.html')
}

app.on('ready', createWindow)

main.jsでウィンドウを作成し、プログラムで発生する可能性のあるすべてのシステムイベントを処理する必要があります.開発者ツールを開き、ウィンドウを閉じるイベントを処理し、macOSユーザーがdock上のアイコンをクリックしたときにウィンドウを再構築する機能を追加します.追加後、main. js次のようにします.

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

//    window       ，        ， JavaScript   
//        ，window         
let win

function createWindow () {
  //        。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  //   index.html  
  win.loadFile('index.html')

  //        
  win.webContents.openDevTools()

  //   window    ，        。
  win.on('closed', () => {
    //      window   ，             ，
    //        window            ，
    //     ，          。
    win = null
  })
}

// Electron          
//         ，      。
//    API   ready          。
app.on('ready', createWindow)

//           。
app.on('window-all-closed', () => {
  //   macOS  ，      Cmd + Q      ，
  //                   。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  //  macOS ，   dock             ，
  //                 。
  if (win === null) {
    createWindow()
  }
})

//       ，              。
//           ，    require   。

最後に、あなたが見せたいものを作成index.html:

  
    
    
  
  
    
Hello World!
    We are using node document.write(process.versions.node),
    Chrome document.write(process.versions.chrome),
    and Electron document.write(process.versions.electron).
  

あなたのアプリケーションを起動
作成と初期化が完了しましたmain.js・index.htmlおよびpackage.jsonその後、現在のプロジェクトのルートディレクトリでnpm startコマンドを実行して、作成したばかりのElectronプログラムを起動できます.
参考記事:
Electronは、おもちゃを遊ぶ気持ちから、ますます優秀なデスクトップクライアント製品を作るまで