首页手记使用Electron开发一个文件上传小工具实践

使用Electron开发一个文件上传小工具实践

标签：

Html5 JavaScript 前端工具

ID: 符合预期的CoyPan
CoyPan，BAT某厂符合预期的FE，正努力成为一名出色的工程师

写在前面

Electron支持我们使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。也就是说，前端工程师也可以利用自己熟悉的技术栈，开发桌面应用。著名的VS Code 是基于 Electron 进行开发的。本文将简单介绍一些利用Electron开发一个文件上传小工具的实践。

搭建开发环境

Electron 基于 Node.js（作为后端运行时）和 Chromium（作为前端渲染)。搭建开发环境比较简单，保证本地有Node环境即可。然后依次执行以下命令：

# 初始化项目
$ npm init
# 安装electron
$ npm install --save-dev electron

修改package.json文件：

{
  "name": "cdn-uploader",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
  	"start": "electron .", // 启动electron运行时
	}
}

接下来，新建一个简单的main.js：

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

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow() {
    // 创建浏览器窗口。
    win = new BrowserWindow({
        width: 800,
        height: 800
    });

  	// 并且为你的应用加载index.html
  	win.loadFile('index.html');
  
    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null
    });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit();
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
        createWindow();
    }
})

// 在这个文件中，你可以续写应用剩下主进程代码。这里的主进程，就是Node进程.

接下来，我们只需要新建一个简单index.html就可以了。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>cdn-uploader</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

在命令行执行npm start，即可启动一个Electron应用了。

开发前端页面

Electron的GUI界面，其实就是一个网页。我们可以按照正常开发网页的方式，来开发界面。只需要将main.js中的地址改为你本地启的前端页面地址即可，如：

win.loadURL('http://localhost:8003');

和传统的前端页面开发不同的是，我们的网页不是运行在浏览器内，而是运行在Electron中。

这里，我选择了react和ant-design来开发前端页面。

前后端通信

Electron后端是使用Node.js作为运行时的。我们可以直接通过Electron的Node.js运行时，提供后台服务。

在本文所介绍的示例中，由于没有http的文件直传接口，因此我是在Node端完成的文件上传服务。

// 前端向后台Node进程发送消息：
const { ipcRenderer } = require('electron');
ipcRenderer.send('uploadFile', {
    payload: {...}
});
  
// 前端监听后台Node进程发过来的消息：
ipcRenderer.on('uploadFileSuccess', (event, arg) => {
    const { msg，code } = arg;
    console.log('上传成功', msg);
  	...
});
  
// 后台Node进程(main.js)接收前端的消息：
const { ipcMain } = require('electron');
ipcMain.on('uploadFile', (event, arg) => {
    const { payload } = arg;
  	...
    // 后台Node进程通知前端上传成功
    event.sender.send('uploadFileSuccess', {
        msg: 'ok',
      	code: 0
    });
});

项目打包

当开发完成，需要打包时，首先，我们按照正常网页开发一样，完成前端代码的打包。然后，修改主进程main.js的代码：

win.loadURL(url.format({
    pathname: path.join(__dirname, './dist/h5/index.html'), // 前端代码打包产出的html地址
    protocol: 'file:',
    slashes: true
}))；

当然，我们可以直接增加环境变量，避免开发和打包时，反复修改代码。

// main.js
if (process.env.NODE_ENV === 'dev') {
    win.loadURL('http://localhost:8003');
    win.webContents.openDevTools();
} else {
    win.loadURL(url.format({
        pathname: path.join(__dirname, './dist/h5/index.html'),
        protocol: 'file:',
        slashes: true
    }));
}

// package.json
{
  "name": "cdn-uploader",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
  	"start": "cross-env NODE_ENV=dev electron ." // 加上环境变量
	}
}

有一点需要注意的是，在前端页面打包配置中（以webpack为例），需要指定

 target: 'electron-renderer'

最后，使用命令行工具electron-packager，就可以产出桌面应用了。

// package.json
{
  "name": "cdn-uploader",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
  	"start": "cross-env NODE_ENV=dev electron .",  // 加上环境变量
  	"make": "electron-packager ./ cdn-uploader --out ./outApp --overwrite --progress" // 产出桌面应用
	}
}