Electron创建应用步骤

环境配置

安装最新版本的Node.js，在安装过程中的配置界面, 勾选Node.js runtime、npm package manager和Add to PATH三个选项。
安装完成后CMD执行node -v、npm -v确认是否安装成功

安装步骤

创建一个文件夹，在CMD进入文件夹，执行npm init
npm 会创建一个基本的 package.json 文件。其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。
安装 Electron,在CMD进入文件夹，执行npm install --save-dev electron

开发第一个应用

引入方法

const electron = require('electron')

创建main.js文件

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

function createWindow () {   
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 并且为你的应用加载index.html
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。

创建index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </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>

启动应用

创建初始化完成 main.js、index.html和package.json之后，在当前项目根目录执行 npm start
命令启动编写好的Electron程序了。

补充

package.json增加代码

"scripts": {
    "start": "electron ."
  }

当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »