使用 electron 创建一个应用

electron 基于 Node.js 和谷歌浏览器内核，可以轻松使用 Javascript 来构建一个跨平台的应用程序，支持 Windows、MacOS、Linux 三个平台。

微软著名的 Vistual Studio Code 就是基于 electron 开发的, 这里再推荐一个基于 electron 开发的全平台远程终端 Termius，在 Windows 下可以媲美 Xshell 工具。

官方图片

下面开始进入 electron 学习

安装 Node.js

访问官网
选择合适的平台下载安装

查看 Node.js 是否成功安装


# 查看 node 版本信息

node -v

# 查看 npm 版本信息

npm -v

上面两个看到版本信息，说明已经安装成功了！

创建一个 electron 应用


mkdir genesis


cd genesis

npm init

之后按照提示填写,可以全程回车键，注意 entry point 默认指定 index.js

执行完成之后会生成 package.json 配置文件，看一下配置文件的内容


{

  "name": "genesis", # 项目名称

  "version": "1.0.0", # 版本号

  "description": "", # 描述

  "main": "main.js", # 入口文件, 默认是 index.js

  "scripts": {

    "start":"electron .", # 启动脚本，指定 electron 运行时

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC"

}

注意配置文件中需要在 scripts 添加启动脚本，并指定 electron 运行时。

安装 electron


npm install --save-dev electron

main.js


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

function createWindws() {

    let win = new BrowserWindow({

        width:800,

        height:600,

        webPreferences:{

            nodeIntegration:true,

        }

    })

    // 加载 index.html

    win.loadFile('index.html')

    // 打开开发者工具

    win.webContents.openDevTools()

}

// 准备好之后调用创建窗口

app.whenReady().then(createWindws)

// 关闭后退出

app.on('windows-all-colsed',()=>{

    // 在 MacOS 上不是真正退出，保持激活

    if (process.platform != 'darwin') {

        app.quit()

    }

})

app.on('activate',()=>{

    // 在macOS上，当单击dock图标并且没有其他窗口打开时，

    // 通常在应用程序中重新创建一个窗口。

    if (BrowserWindow.getAllWindows().length == 0) {

        createWindws()

    }

})

index.js


<!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>

启动


npm start

好了，到这里就可以看到刚才创建的应用程序了。

参考资料

Electron 官方文档