Electron 简介
相信大家多多少少都有听闻微软的 Visual Studio Code 是通过 Electron 框架搭建的，它不同于传统桌面应用，是使用JavaScript、HTML 和 CSS 构建的桌面应用。通过将 Chromium 和 Node.js 嵌入其二进制文件，Electron允许你维护一个JavaScript代码库，并创建适用于Windows、macOS和Linux的跨平台应用程序——不需要本机开发经验。
如何使用 web 前端的能力搭建传统的桌面应用，让我们通过简短的文章快速体验一下吧。
技术选型
Electron 项目我们可以简单的将其想象成一个 chrome 浏览器，浏览器本身有自己的主进程，每个页面（窗口）有各自的渲染进程，主进程连接操作系统 API 和渲染进程。Electron 项目我们只需要将程序的每个页面当成web单页面进行开发，并将页面入口文件配置到主进程即可完成不同窗口的渲染。
页面的开发不局限任何前端框架，根据各自项目需求进行选择即可，本次体验将采用 next.js 作为 web 框架。
由于调试过程中需要同时启动 electron 和 next ，可以使用 concurrently 进行多命令执行。
开发体验
下面是一个桌面应用的 Demo，源码地址：https://gitee.com/cinglong/my-electron-app.git
脚手架搭建
创建文件夹，并初始化 npm 包
mkdir my-electron-app && cd my-electron-app && npm init
tip：entry point 属性设置成项目的入口文件（主进程）；
安装开发依赖
npm install --save-dev electron concurrently
npm install next react react-dom
tip: 如无法正常安装请使用 vpn 工具或者第三方源
package.json 文件配置
···
"scripts": {
"Nstart": "next dev",
"Estart": "electron .",
"NEstart": "concurrently \"npm:Nstart\" \"npm:Estart\" -n next,electron --kill-others"
},
···
.
主程序文件编写
主程序文件即 entry point 属性配置项（默认：index.js）
const { app, BrowserWindow } = require('electron') //app：控制应用程序生命周期；BrowserWindow：创建和管理应用程序窗口；
//创建 createWindow() 方法加载页面
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
frame: false, //是否显示边框
resizable: false //窗口大小是否可调整
})
win.loadURL('http://localhost:3000') //next框架调试页面
}
//在 whenReady() 成功后调用 createWindow() 加载页面
app.whenReady().then(() => {
createWindow()
})
.
页面文件编写
由于是用的 next，我们新建 pages 文件夹，并新增 index.js 文件，代码如下：
function HomePage() {
return <h1 style={{textAlign:'center',lineHeight: '500px'}}>Welcome to my-electron-app!</h1>
}
export default HomePage
.
打开主程序
npm NEstart
.
页面调试
在主程序加载页面时，使用 openDevTool() API打开页面控制台
const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.webContents.openDevTools()
tip：使用 ctrl+shift+i 亦可在调试模式中快速打开控制台
桌面应用打包
调试过程中我们是通过 http://localhost:3000 访问页面的，打包的时候需要将其改成静态 HTML 文件
...
// win.loadURL('http://localhost:3000') //next框架调试页面
win.loadFile('./out/index.html') //通过 `next export`命令生成文件
...
.
我们选择 electron-builder 作为我们的打包工具
npm install --save-dev electron-builder
.
修改 package.json 配置
"build": {
"appId": "com.xxx.app",
"mac": {
"target": ["dmg","zip"]
},
"win": {
"target": ["nsis","zip"]
}
},
"scripts": {
"Nstart": "next dev",
"Estart": "electron .",
"NEstart": "concurrently \"npm:Nstart\" \"npm:Estart\" -n next,electron --kill-others",
"build": "next build && next export && electron-builder --win --x64"
},
执行打包
npm run build
打包完成后我们就可以在 dist 文件夹看到生成的文件
结束
Electron 的体验结束了，如果你需要了解 electron 和 nwjs 的区别，可以查看这篇文章：
https://www.electronjs.org/docs/development/electron-vs-nwjs
