体验 Electron 开发桌面应用程序
发布于 3 年前 作者 guoyong 3887 次浏览 来自 分享

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

参考文档
Electron 官方快速入门 - 点击进入

回到顶部