Electron 是 GitHub 开发的开源框架,让开发者可以使用熟悉的 HTML、CSS 和 JS 开发跨平台(Windows, macOS, Linux)的桌面程序。

使用 Electron 开发的产品不少:GitHub Desktop, VS Code, Atom, Slack, Typora …

现在也有人觉得 Electron 太“重”了,但这是一个经过验证的开发选择。

安装

首先你得安装了 node.js 和 npm

npm install -g electron

如果安装出错,可参考 日志|Electron 安装错误

Hello World

Electron 结合了 node.js 和 Chrominum ,所以还是需要一点 node.js 知识作为前提。

Step 1: 创建项目

npm init
npm install electron

运行时 Electron 有两种进程

Step 2: 编辑 main.js

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

let win

function createWindow(){
  win = new BrowserWindow({width:800, height:600})
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
  
  win.on('closed', () => win = null)
}

//Main Process: create BrowserWindow instance
app.on('ready', createWindow)

Step 3: 编辑 index.html

<h1>Hello World</h1>
<script>
  require('./renderer.js')
</script>

renderer.js 的代码在 index.html 的 renderer 进程中执行,此处略

Step 4: 运行 Hello world

electron .

一个跨平台的桌面 Hello world 程序就完成了。当然,严格来说还得研究一下 Electron 程序打包

虽然本人二十年专注各种 Hello World 从入门到不通,写这类文章,其实我的心里是拒绝的。不过不是经常用的,隔一阵子连怎么 Hello World 都能忘掉,而且写下来兴许对别人也有点用,就不计较虚名了。从这篇起,我打算来个「Hello World 从入门到不通」系列,为以后成为 Hello World specialist 打下坚实的基础。