1、電子エントリーHelloWorldのケース

まず、どのような電子こと？

電子がするHTML、CSSおよびJavaScriptで、GitHubのによって開発された構築クロスプラットフォームのデスクトップアプリケーションを、オープンソースのライブラリで。電子は同じランタイム環境にクロムとのNode.jsを組み合わせることでこれを実現し、およびMac、WindowsおよびLinuxシステムでアプリケーションとしてそれをパッケージ化します。

公式サイト：

電子は、デスクトップ・アプリケーションを作成するための豊富な純粋なJavaScript呼び出しのネイティブ（オペレーティングシステム）のAPIを使用することができます。あなたはノードと考えることができます。Jsのバリアント、それは代わりにWebサーバーのデスクトップアプリケーションに焦点を当てています。

これは、電子は、グラフィカル・ユーザ・インタフェース（GUI）ライブラリのJavaScriptのバージョンであることを意味しません。あなたがようであるとして、それを見ることができるので、その代わりに、電子は、そのGUIとしてWebページを使用して、JavaScriptの制御クロムブラウザの合理化バージョンを。

開発の観点から、電子応用自然。Jsのアプリケーション上のノード。同じモジュール、ポータルアプリケーションのNode.js package.json ファイルを。一般的に、基本的な電子アプリケーションには、次のディレクトリ構造を持つことになります。

あなたのアプリ/ 
├──package.json 
├──main.js 
└──index.htmlを

二、電子公式の例をはじめ

方法1作成：公式gitリポジトリに直接ダウンロードします。https：//github.com/electron/electron-quick-start

ダウンロードが完了抽出したら、次のように内容は以下のとおりです。

官方的这个仓库给我们初始化了一个electron项目，结构非常纯净，接下来你就可以直接改造成自己的项目了。还等什么，赶紧试试吧。

下载完成之后我们打开cmd命令行cd到electron-quick-start-master目录下执行npm install安装项目依赖：

启动项目：npm start

出现下面的窗口即表示成功！

创建方法2：参照官网提示从空白文件夹一步步创建：https://electronjs.org/docs/tutorial/first-app#trying-this-example

为你的新Electron应用创建一个新的空文件夹。打开你的命令行工具，然后cmd从该文件夹运行npm init：

下面name：后面的内容你可以自定义，一路回车即可：

npm 会帮助你创建一个基本的 package.json 文件。其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。如下片段是一个 package.json 的示例：

注意：如果 main 字段没有在 package.json 中出现，那么 Electron 将会尝试加载 index.js 文件（就像 Node.js 自身那样）。如果你实际开发的是一个简单的 Node 应用，那么你需要添加一个 start 脚本来指引 node 去执行当前的 package：

把这个 Node 应用转换成一个 Electron 应用也是非常简单的，我们只不过是把 node 运行时替换成了 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.app负责管理Electron 应用程序的生命周期， electron.BrowserWindow类负责创建窗口。下面是一个简单的index.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)

在项目目录下cmd执行：npm start：

您应当在 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 导入。