Electron开发跨平台桌面程序入门教程

时间 2019-11-06

标签 electron 开发跨平台桌面程序入门教程繁體版

原文原文链接

最近一直在学习 Electron 开发桌面应用程序，在尝试了 java swing 和 FXjava 后，感叹仍是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序，记录学习过程当中的坑。html

Electron是什么呢？

Electron 可让你使用纯 JavaScript 调用丰富的原生(操做系统) APIs 来创造桌面应用。你能够把它看做一个 Node. js 的变体，它专一于桌面应用而不是 Web 服务器端。前端

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面做为它的 GUI，因此你能把它看做成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。java

1、环境准备

本地环境：Node.js + npmnode

# 下面这行的命令会打印出Node.js的版本信息
node -v

# 下面这行的命令会打印出npm的版本信息
npm -vCopy

2、目录结构

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是 package.json 文件。一个最基本的 Electron 应用通常来讲会有以下的目录结构：linux

your-app/
├── package.json
├── main.js
└── index.html

为你的新Electron应用建立一个新的空文件夹，并新建上述三个文件。git

3、package.json

其中package.json的文件内容以下：github

{
  "name": "my-app",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC"
}

Tips：使用npm init命令能够便捷建立package.json。web

4、安装Electron

在终端进入到工程文件夹下进行操做，会在当前目录下安装Electron。docker

# 局部安装 须要的话追加上 --registry='http://registry.npm.taobao.org' 使用淘宝npm源安装
npm install electron --save-dev
# Windows使用下面语句 64位32位机器都是--win32
npm install electron --save-dev --platform=win32

# 验证安装
node_modules/.bin/electron -v

Tips：--save-dev参数会在package.json文件中导入该依赖到devDependencies属性下，--save参数会导入该依赖到dependencies属性下。npm

安装过程可能会很慢，正常的话，安装下载进度以下直至完成。

> electron@5.0.6 postinstall /home/qii/electron/eee/node_modules/electron
> node install.js

Downloading tmp-26643-1-SHASUMS256.txt-5.0.6
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm notice created a lockfile as package-lock.json. You should commit this file.

+ electron@5.0.6
updated 1 package and audited 201 packages in 499.235s
found 0 vulnerabilities

Tips：npm安装超时的话通常是网络问题。解决方法

5、main.js

package.json中指定的入口点文件，即程序主文件。

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

let mainWindow

// 建立主窗口，设置了宽高等信息
function createWindow () {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    webPreferences: {
      // node集成，便是否注入node能力
      nodeIntegration: true
    }
  })

  // 加载主页面内容 index.html
  mainWindow.loadFile('index.html')

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

6、index.html

main.js中加载的主窗口文件，即主布局文件

<!DOCTYPE html>
<html>
<head>
    <!-- 此title会覆盖package.json中设置的name，做为应用顶部名称 -->
    <title>my-app</title>
</head>
<body>
    Hello World!
</body>
</html>

7、启动应用

在建立并初始化完成 main.js、 index.html和package.json以后，您就能够在当前工程的根目录执行下述命令来启动刚刚编写好的Electron程序了。

# 进入到包含 package.json 文件的目录
npm satrt

# 或者直接使用脚本启动，别忽略了后面的点
node_modules/.bin/electron .

8、打包应用

以上所述都是在本地开发环境下使用，但若是要给被人使用，就必须得将Electron打包成一个程序包。幸运的是咱们能够经过electron-builder将程序打包成Win、Linux、Mac平台都兼容的版本，交给别人以后直接安装便可。

一、安装electron-builder

npm install --save-dev electron-builder

# 验证安装
node_modules/.bin/electron-builder -h

二、开始打包

注意生成各自平台的程序包最好在对应平台上执行，不然可能打包失败

# Linux打包成AppImage文件（在Linux环境上执行）
node_modules/.bin/electron-builder -l AppImage

# Windows打包成exe安装文件（在Windows环境下执行）
node_modules/.bin/electron-builder -w nsis
# 若是在非Windows上打包win程序，也能够借助docker 以下
# docker run --rm -it -v ${PWD}:/project electronuserland/builder:wine sh -c "node_modules/.bin/electron-builder -w nsis"

# Mac打包成dmg文件（在Mac环境下执行）
node_modules/.bin/electron-builder -m dmg

三、最终文件

打包好的程序在当前目录dist文件夹下，如图所示：

Linux生成my-app 0.1.0.AppImage文件，双击执行或者./my-app 0.1.0.AppImage执行便可。
Windows生成my-app 0.1.0.exe文件，双击安装便可。
Mac生成my-app 0.1.0.dmg，双击拖拽安装便可。

四、利用配置文件打包

上面的方法至关于临时打包，每次运行命令的时候都要指定打包命令，虽然很直接，可是有点不太方便，下面用另外一种方法来打包，将打包配置写到package.json中，方便使用。

打开package.json文件，发现前面的 devDependencies 属性下已经多出了 electron 和 electron-builder 依赖，咱们将与打包相关的配置信息所有写在build属性下，再添加脚本命令"dist": "electron-builder"。

{
  "name": "my-app",
  "version": "0.1.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "author": "",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^6.0.12",
    "electron-builder": "^21.2.0"
  },
  "build": {
    "win": {
      "icon": "icon.png",
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false,
      "menuCategory": true,
      "allowElevation": false
    },
    "linux": {
      "icon": "icon.png",
      "category": "Utility",
      "target": [
        "AppImage"
      ]
    },
    "mac": {
      "icon": "icon.png",
      "type": "development",
      "category": "public.app-category.developer-tools",
      "target": [
        "dmg"
      ]
    }
  }
}

运行命令：

npm run dist

9、进阶之路

Electron给个人认识是使用HTML文件渲染页面组件、使用CSS渲染页面组件的样式，使用JavaScript编写程序的逻辑，且支持Node以及DOM的API。

我在学习Electron的时候，写了一个本地音乐播放器的小项目，在这个项目中涉及了主进程与渲染进程如何通讯，如何使用CSS样式，如何使用electron-store本地存储。

项目的地址：https://github.com/yueshutong/SimpleMusicPlayer 欢迎Star！

关于Electron的进阶学习，我推荐下面几个学习网站：

Electron官方开发文档：开发Electron必须打开的网页。

electron.build官方配置文档：开发完最后参考的配置文档。

electron-store本地文件存储：这个挺简单的，用的时候看下。

icns图标生成指南：打包的时候自定义图标，icns是mac专属的图标格式。

Web开发者指南-MDN文档：写JavaScript必备的API文档神器，惋惜中文支持太差。

fontawesome字体图标库：丰富你的界面样式，优秀的图标库。

Electron 打包优化：腾讯的前端技术文档，有些文章写的不错。