菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

开通VIP

领取更多软件工程师实用特权

 入驻

搜索

类型： 全部 | 视频教程 | 实战项目 | 项目源码 | 技术手册 | 课件 | 测试题 | 技术文章 | 软件下载 | 问答求助
水平： 全部 | 入门 | 普通 | 进阶

历史记录 清除记录

    你还没搜索过喔。

近期热搜

项目开发全程实录（电商EW_Shop）

8674 人 1年前

轻松学会Laravel-项目篇（商城API）

2022 人 1年前

Python数据分析2.0-金融

325 人 1年前

Python办公自动化2.0

241 人 1年前
猿创博文
猿创博文 / 其他 /
正文
58
0

使用Electron构建跨平台的桌面应用

原创
TimJuly
其他
05/13 14:22
阅读数 1853
尊享10+项VIP特权
会员卡
开通学习猿地会员卡

作者：李晓健。苏宁视频云前端部门经理。拥有7年前端业务研发和架构经验，目前负责苏宁云视频前端研发和架构工作。

Electron简介

Electron 是一个使用 JavaScript,HTML 和 CSS 等 Web 技术创建原生桌面程序的框架。官网是https://electronjs.org/

Electron就是使用Web技术来开发，然后打包成桌面客户端的一个框架。它渲染Web内容使用的是Chromium，Chromium基本上和大家常用的chrome浏览器差不多，并且Electron在打包时是将Chromium嵌入到了应用里，所以它并不依赖用户机器上安装的浏览器，大家都知道做Web开发，最大的一个问题就是兼容性的问题，经常相同的代码在不同操作系统中不同的浏览器里，甚至不同版本的浏览器里都可能会出现不同的效果。Electron相当于是把一个固定版本的浏览器嵌入到应用中，所以他就不存在兼容性问题，只要我们开发时写的代码可以正常运行，就不存在打包后在用户的机器上因为兼容性问题无法使用的情况。

Electron支持Node.js的原生模块，也就是说可以在Electron应用中直接使用Node.js的模块。Web应用为了安全等一系列的问题考虑，限制了很多的功能，比如本地文件的读写、操作系统中硬件设备的调用等等，但是Node.js并没有这些限制。也就是说在Electron应用中,我们不光可以使用Web技术的特点，还能够突破Web技术的限制，使用Node.js的模块功能，使应用功能更加丰富。

Electron开发出来的应用是跨平台的，当应用开发完成后，我们可以将同一套代码打包成Linux、macOS、Windows平台上的可执行程序或安装包。

Electron中比较重要的概念

学习任何一门框架，里面或多或少都会有一些新的概念，只有把这些新的概念都弄懂了，才能更好的掌握和运用这门框架，Electron中新的概念并不是很多，接下来我就就来说说最重要的3个概念。

1. 主进程：Electron应用中运行package.json的main脚本的进程被称为主进程，在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。

2. 渲染进程：Electron应用中是通过在主进程里创建web页面来展示用户界面的，在主进程中可以通过BrowserWindow 实例创建页面，这里的一个web页面就是运行在一个渲染进程里的，一个Electron应用可以包含多个web页面，所以一个Electron 应用中是可以有多个渲染进程的，当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

3. IPC：既然有主进程和渲染进程，而主进程管控的是一个应用全局的设置和方法，而渲染进程只在一个web页面中存在，那他们肯定不会始终完全孤立的存在，有时也是需要有通信的，比如我在页面做了一个操作，整个应用需要去做一个响应，就是就需要用到主进程和渲染进程的通信。就里就有一个概念IPC（Inter-Proess Communication），进程中通信。IPC就提供了相应的方法来供主进程和渲染进程间进行通信。

所以他们大概的关系就是一个应用中有一个主进程，然后主进程可以创建多个渲染进程，主进程和渲染进程间通过IPC来通信。如下图：

Electron的安装

Electron是以Node.js中的模块的方式进行发布的，所以他的安装也非常简单，通过npm来进行安装就可以了。既然Electron是通过Node.js的模块起先发布的，那它的安装就需要依赖Node.js的环境，也就是需要在我们的电脑上安装Node.js,安装Node.js直接去其官网( https://nodejs.org)下载相应的安装包，然后按照默认的设置一路安装就行了，在安装Node.js的同时也会安装上npm，安装完成后检测Node.js和npm是否安装成功，只需要在命令行工具拦执行相应的版本查看命令就行了，如果能看到有版本号输出，则说明安装成功。如下图：

接下来我们就可以直接使用npm来安装我们所需要的模块了。首先进入到我们的项目开发目录，然后初始化好项目（创建好package.json文件），然后在该目录执行

npm install electron –save

然后等待安装完成就行了。

在这个安装过程中，可能由于网络问题会安装失败，我们可以修改npm的镜像源，将npm的镜像源修改成国内的镜像源：在命令行执行 npm config set registry http://registry.npm.taobao.org/ 或者安装cnpm，然后通过cnpm来安装Node.js的模块。

安装完成后，在命令行执行

electron -v

可以看到electron的版本号，就说明Electron安装成功了。

Electron项目的搭建

Electron安装好就，就可以搭建项目了。官网给我们提供了一个空的种子项目，这个项目里面非常的干净，所以可以直接使用，首先我们通过命令行进入我们工作目录，克隆下这个项目（前提是我们的电脑需要安装git），执行

git clonehttps://github.com/electron/electron-quick-start.git

克隆完成后，我们的工作目录中就多了一个 electron-quick-start 目录，这个目录就是

我们的项目目录，这里面有几个文件是我们项目需要用到的文件

1. package.json：项目的一些依赖和配置文件，里面有一些我们项目的基本信息，我们可以根据自己项目的情况来修改这里的值 bash

{
  "name": "electron-quick-start", //项目的名称
  "version": "1.0.0", //项目的版本号
  "description": "A minimal Electron application", //项目的描述
  "main": "main.js", //主入口文件
  "scripts": { //快捷脚本
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start", //代码仓库
  "keywords": [ //项目的关键词
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub", //项目的作者
  "license": "CC0-1.0", //项目的许可协议
  "devDependencies": { //项目的依赖
    "electron": "^2.0.0"
  }
}

2. main.js：这个文件是项目的启动文件，也是项目的入口文件，该文件就是运行在主进程中的。

// 引入electron中的API

const {app, BrowserWindow} = require(‘electron’)

//定义一个web窗口 这个窗口就运行在一个一个渲染进程中

let mainWindow

//创建web窗口的方法

function createWindow () {

  // 通过BrowserWindow来创建一个窗口

  mainWindow = new BrowserWindow({width: 800, height: 600})

  // 在web窗口中加载html页面

  mainWindow.loadFile(‘index.html’)

  // 监听窗口关闭的事件

  mainWindow.on(‘closed’, function () {

    mainWindow = null

  })

}

// 当应用准备好了  就调用创建web窗口的方法

app.on(‘ready’, createWindow)

// 当所有的窗口都关闭后，就退出应用

app.on(‘window-all-closed’, function () {

    //在非MAC平台下退出应用

    //在MAC平台下所有窗口关闭 应用并不需要退出，它还可以通过dock来重新激活应用

  if (process.platform !== ‘darwin’) {

    app.quit()

  }

})

//当应用被激活事件 

app.on(‘activate’, function () {

  //如果窗口不存在 就创建一个窗口

  if (mainWindow === null) {

    createWindow()

  }

})

3. index.html：这是web窗口里展示需要展示的内容，当然这里也可以是一个远程html的url

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

这里就是一个普通的html，但是这里面也有和普通html不同之处，我们可以看到html的script标签里有用到process.xxx.xxx;并且前面没没有定义process，这里确可以直接访问，html里引入script用了require(‘./renderer.js’)。这些写法在我们平常的script里都会报错的，但是这里确可以正常运行的，原因就是我们前面说过的Electron应用中可以直接使用Node.js的Api，这里的process就是Node.js里的变量，require就是Node.js中引入外部文件的关键字。

renderer.js：这个文件是被引入到index.html中的，所以它就是用来写html中逻辑的文件，所以这个文件也是运行在渲染进程中的。

我们上面说到的4个文件的文件名和路径并不是固定的，也可以根据项目需要进行修改，他们的关系是main.js 就是 package.json中main属性对应的值，如果需要修改main.js的名称，这两处需要同时修改。index.html 就是在main.js中 mainWindow.loadFile(‘index.html’) 引入的文件，如果需要修改这两处也需要同时修改。renderer.js就是在index.html中require(‘./renderer.js’) 引入的js文件，当然这里也可以引入多个js谁的，和我们普通的html一样。

文件作用和关系都理清楚了，我们就可以安装依赖了。在命令行执行

npm install

等待安装完成之后，就可以运行项目了，在命令行执行

npm run start

这里的start 就是我们在package.json中scripts属性中配置的值 “start”: “electron .”，我们在命令行运行 npmrun start 就相当于我们运行 npm run electron . ;因为有时有些命令比较长或带了比较多的参数，所以我们在package.json中配置一些别名会大大减少我们在命令行的输入。等命令运行完成我们就可以看到我们的桌面上打开了一个客户端，如下图：

这样我们的一个初始项目就算搭建完成了。

Electron中常用的功能模块

electron不光是可以将我们的页面打包成客户端应用，它也为我们提供了大量的功能模块，方便我们的开发，下面我们就简单介绍一下用的比较多的功能模块。

1. app: 控制应用程序的事件生命周期,用于监听应用的的事件,该模块在主进程中。

2. BrowserWindow：创建和控制浏览器窗口，在创建窗口时可以传入很多的参数，来控制窗口的样式和行为该模块在主进程中。

3. ipcMain：从主进程到渲染进程的异步通信，该模块在主进程中。

4. ipcRenderer：从渲染进程到主进程的异步通信，该模块在渲染进程中。

5. remote：在渲染进程中引入主进程模块，该模块在渲染进程。

6. dialog：显示用于打开和保存文件、警报等的本机系统对话框，该模块在主进程中。

7. crashReporter：将崩溃日志提交给远程服务器

8. globalShortcut：当应用程序没有键盘焦点时监听全局键盘事件，该模块在主进程中。

9. Menu：创建原生应用菜单和上下文菜单，该模块在主进程中。

10. desktopCapturer：可以访问那些用于从桌面上捕获音频和视频的媒体源信息，该模块在渲染进程中。

11. net：使用Chromium的原生网络库发出HTTP/ HTTPS请求，该模块在主进程中。

12. autoUpdater：使应用程序能够自动更新，该模块在主进程中。

以上的这些模块都是比较常用的模块，所有的功能模块并不是在任何地方都可以调用，有些模块在主进程中可以直接引入，有些模块只能在渲染进程中引入，当然也有些模块可以直接主进程和渲染进程中引入使用。这些在主进程中的模块也是可以在渲染进程中引入的，不过不能直接引入，需要通过remote模块来间接引入，所以在主进程中的模块也是可以在渲染进程中使用，例如我们想在渲染进程中使用BrowserWindow：

//我们需要先引入remote模块
const {remote} = require('electron');
//再从remote模块中引入BrowserWindow
const {BrowserWindow} = remote
let win = new BrowserWindow({width: 800, height: 600})
win.loadURL('http://www,pptvyun.com')

更多的功能模块和使用方法可以参考Electron的文档：https://electronjs.org/docs

Electron的Demo

Electron的大概内容已经介绍的差不多了，接下来我们就使用Electron来做一个拍照保存的小demo,能正常运行需要您的电脑上有摄像头。我们的这个demo就基于前面搭建好的空项目来做。前面我们说过，项目的文件名和路径并不是固定的，接下来我们就来调整一下前面那个项目的目录结构，我们将我们需要写代码都放到src目录下，调整个目录如下：

我们将html代码放到view目录下，将样式文件放到style目录下，将图片放入到images目录下，将我们的js代码放到scripts目录下，将main.js改名为index.js（这里改文件只是为了说明这个文件名是可以修改的，并不是固定的），然后直接放到src目录下。

package.json 修改如下

{
  "name": "take-photo",
  "version": "0.0.1",
  "description": "A take photo Electron application",
  "main": "src/index.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "",
  "keywords": ["Electron","demo"],
  "author": "pptvyun",
  "license": "MIT",
  "devDependencies": {
    "electron": "^2.0.0"
  }
}

index.js 修改如下

// 引入electron中的API

const {app, BrowserWindow} = require(‘electron’)

//定义一个web窗口 这个窗口就运行在一个一个渲染进程中

let mainWindow

//创建web窗口的方法

function createWindow () {

    // 通过BrowserWindow来创建一个窗口

    mainWindow = new BrowserWindow({width: 800, height: 600})

    // 在web窗口中加载html页面

    mainWindow.loadFile(`${__dirname}/view/index.html`)

    // 监听窗口关闭的事件

    mainWindow.on(‘closed’, function () {

        mainWindow = null

    })

}

// 当应用准备好了  就调用创建web窗口的方法

app.on(‘ready’, createWindow)

// 当所有的窗口都关闭后，就退出应用

app.on(‘window-all-closed’, function () {

    //在非MAC平台下退出应用

    //在MAC平台下所有窗口关闭 应用并不需要退出，它还可以通过dock来重新激活应用

    if (process.platform !== ‘darwin’) {

        app.quit()

    }

})

//当应用被激活事件

app.on(‘activate’, function () {

    //如果窗口不存在 就创建一个窗口

    if (mainWindow === null) {

        createWindow()

    }

})

index.html 修改如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
       //这里修改了renderer.js的引入路径
      require('../scripts/renderer.js')
    </script>
  </body>
</html>

接下来我们就根据我们的业务来写具体的代码,首先我们的代码肯定是需要调试的，Electron使用的是Chromium来做渲染的，所以它也给我们提供了chrome的开发者工具供我们使用。开发完成后的代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>take photo</title>
    <link rel="stylesheet" href="../style/index.css">
</head>
<body>
<header>拍照保存</header>
<div class="content">
    <video src="" id="video"></video>
    <canvas width="250" height="187" id="canvas"></canvas>
    <div class="button-box">
        <a href="javascript:;" id="openCamera" class="button">打开摄像头</a>
        <a href="javascript:;" id="takePhoto" class="button">拍摄照片</a>
        <a href="javascript:;" id="savePhoto" class="button">保存照片</a>
    </div>
</div>

<script>
    require('../scripts/renderer.js')
</script>
</body>
</html>

src/style/index.css

src/index.js

// 引入electron中的API
const {app, BrowserWindow,globalShortcut} = require('electron')

//定义一个web窗口 这个窗口就运行在一个一个渲染进程中
let mainWindow

//创建web窗口的方法
function createWindow () {
    // 通过BrowserWindow来创建一个窗口
    mainWindow = new BrowserWindow({width: 800, height: 600})

    // 在web窗口中加载html页面
    mainWindow.loadFile(`${__dirname}/view/index.html`)

    // 监听窗口关闭的事件
    mainWindow.on('closed', function () {
        mainWindow = null
    })
    //这里我们注册一个打开 开发者工具有快捷键 win下是Ctrl+F12 macOS下是command+f12
    globalShortcut.register('CommandOrControl+F12', () => {
        mainWindow.webContents.openDevTools()
    })
}

// 当应用准备好了  就调用创建web窗口的方法
app.on('ready', createWindow)

// 当所有的窗口都关闭后，就退出应用
app.on('window-all-closed', function () {
    //在非MAC平台下退出应用
    //在MAC平台下所有窗口关闭 应用并不需要退出，它还可以通过dock来重新激活应用
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

//当应用被激活事件
app.on('activate', function () {
    //如果窗口不存在 就创建一个窗口
    if (mainWindow === null) {
        createWindow()
    }
})

src/sctipts/renderer.js

//引入Electron中的dialog 用来显示消息提示
const {dialog} = require('electron').remote
//引入Node.js的fs模块  用来写文件
const fs = require('fs');
//页面打开摄像头的按钮
const button = document.querySelector('#openCamera');
//页面拍摄照片的按钮
const takephoto = document.querySelector('#takePhoto');
//页面保存照片的按钮
const saveImage = document.querySelector('#savePhoto');
//页面的video标签,用来展示摄像头拍摄的画面
const video = document.querySelector('#video');
//页面的canvas标签,用来展示拍摄的照片
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

//获取摄像头的参数
const mediaConfig = {
    video: true
}
//点击打开摄像头的按钮
button.addEventListener('click',e=>{
    //调用电脑的摄像头
    navigator.mediaDevices.getUserMedia(mediaConfig)
        .then(function(stream) {
            //将摄像头拍摄的内容给到video标签，并从video标签上播放
            video.srcObject = stream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch(function(err) {
            alert('打开挺像头失败')
        });
})

//点击拍照按钮
takephoto.addEventListener('click',e=>{
    //将video上的画面画到canvas上
    ctx.drawImage(video,0,0,250,187);
})
//点击保存图片按钮
saveImage.addEventListener('click',e=>{
    //选择图片的保存路径
    dialog.showOpenDialog({properties:['openDirectory']},filePaths=>{
        if(filePaths && filePaths[0]){
            //保存图片的目录
            const floder = filePaths[0]+'/';
            //奖canvas上的图片转成base64编码
            let dataURL = canvas.toDataURL('image/png');
            var regex = /^data:.+\/(.+);base64,(.*)$/;
            if(dataURL){
                var matches = dataURL.match(regex);
                var buffer = new Buffer(matches[2], 'base64');
                //将文件流写入选择的目录里
                const file = floder+Date.now()+'.' + matches[1];
                fs.writeFile(file, buffer,err=>{
                    if(err){
                        dialog.showErrorBox("错误提示", '图片保存失败')
                    }else{
                        //图片保存成功的提示
                        dialog.showMessageBox({
                            type:'info',
                            title:'提示信息',
                            message:'图片保存成功，文件保存在'+file,
                        })
                    }
                });
            }
        }
    })
})

代码开发完成后，运行项目，在命令行输入

npm run start

就可以看到项目结果了，页面会出现3个按钮，点击打开摄头，客户端上就会出现摄像头拍摄的内容，然后点击保存照片按钮，客户端就会出现一张静态的图片，然后点击保存按钮，这张图片就会保存在我们选择的目录下。效果如下图：

Electron项目的构建

这个demo开发到这里就算完成了，但是我们的客户端还是需要给别人来使用，总不能让别人把我们的代码拷过去，然后安装依赖，在命令行运行npm run start吧，我们常见的客户端都是有一个安装程序，安装之后就可以直接双击运行的，或者是一个绿色版，有一个可执行程序，我们双击就可以运行的。接下来我们就也把我们的demo打包成一个安装程序，可供用户安装使用。

将Electron打包成安装程序有多种方式，今天我们说的是通过 electron-builder 模块来打包，electron-builder也是一个Node.js的模块，所以我们可以直接通过npm来安装，在命令行运行

npm install electron-builder –save-dev

等待安装完成就可以了,它的文档在https://github.com/electron-userland/electron-builder ，它可以打包出window、macOS、Linux上的可执行程序。然后我们参照文档修改配置文件，这里只需要修改package.json就好。修改后如下

{
  "name": "take-photo",
  "version": "0.0.1",
  "description": "A take photo Electron application",
  "main": "src/index.js",
  "scripts": {
    "start": "electron .",
    "build-all": "electron-builder -mwl",
    "build-win": "electron-builder --win --x64",
    "build-mac": "electron-builder --mac --x64",
    "build-linux": "electron-builder --linux --x64"
  },
  "build": {
    "appId": "com.pptvyun.test",
    "copyright": "pptvyun",
    "productName": "demo",
    "mac": {
      "target": "dmg"
    },
    "dmg": {
      "window": {
        "x": 200,
        "y": 200,
        "width": 800,
        "height": 600
      }
    },
    "win": {
      "icon": "logo.png",
      "target": "nsis"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "artifactName": "Setup-${productName}-${version}-${arch}.${ext}"
    },
    "snap": {}
  },
  "repository": "",
  "keywords": [
    "Electron",
    "demo"
  ],
  "author": "pptvyun",
  "license": "MIT",
  "devDependencies": {
    "electron": "^2.0.0",
    "electron-builder": "^20.19.2"
  }
}

在scripts中添加了在各个平台上的打包脚本，添加了build属性，用来配置在各个平台上的打包参数。我们用打包出window平台的安装程序为例，在命令行运行

npm run build-win

等待打包完成，第一次可能会有点慢，因为它需要下载一些依赖，打包完成后我们的项目里就会多出来一个build的目录，当然这个目录是我们在package.json中配置的，这个目录里就是打包之后的文件，里面有一个win-unpacked的目录，这个目录里有一个demo.exe的文件，这个文件就是可执行程序，这个win-unpacked目录里的文件就相当于是我们平常见的绿色免安装版，直接双击demo.exe就可以运行这个demo。还有一个Setup-demo-0.0.1.exe文件，这个文件就是我们需要的安装程序，双击它就可以运行安装，安装完成后也会在我们的桌面创建快捷方式，不同平台的打包命令可能需要到相应的平台上去执行，比如在window上执行macOS的打包命令可能会失败。

至此，我们的demo就算开发完成了，当然这里还有一些细节上的东西需要注意，比如我们的应用需要在各大平台上发布，供其他用户来下载安装，就需要对代码进行签名，代码签名具体可参考文档https://electronjs.org/docs/tutorial/code-signing ,这里的客户端界面我们用的是默认的，当然我们也可以做一个无边框的应用，然后自定义客户端的界面，还有自动升级等等功能，Electron都是可以支持的，可以查看它的官方文档做出功能丰富的客户端面应用。

58
0
1523

© 著作权归作者所有

举报

发表评论

0/200
58 点赞
0 评论
收藏
友情链接：

实猿科技 学习猿地-LMONKEY © 辽ICP备19013136号

学习猿地
程序员学习的地方

扫码关注