把网页打包成桌面应用程序

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 4k 阅读时长 ≈ 4 分钟
用Electron将网页变成桌面app

前言

现在的应用一般都需要多端，Android 端、iOS 端、PC 端、Web 端，PC 端还包括了3个不同的操作系统平台，所以要想降低开发成本和开发难度，就需要寻找成熟的跨平台方案。Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造跨平台的桌面应用。软件开发者只需一次编写程序，即可在 Windows、Linux、Mac 等平台运行，不仅大大降低了程序员的工作量，也大大降低了开发难度（相比QT），使公司的产品可以快速迭代。Android端和iOS端作为两种不同的移动端技术，可以考虑用Flutter，暂且不表，今天我们只讨论Electron。

简介

Electron 是由 Github 开发，用 HTML，CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac ， Windows 和 Linux 系统下的应用。

title
（ 图片来自于：https://jlord.us/essential-electron/ ）

如上图所示，Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API。

Electron开发环境配置

安装最新版本的Node.js

按官方的建议，推荐您安装最新的 长期支持版本 或者 当前发行版本，去 nodejs.org 下载相应平台的安装包即可。

title

安装完成后执行如下命令确保正常展示版本号即可。

1
2
node -v
npm -v

用 npm 安装 electron

一般网上建议全局安装，但是局部安装可以让你在不同的 app 中使用不同的 Electron 版本，所以根据个人需要，在「自己编译ntfstool」 一文中，我们强调过，国内用户建议先更换 electron 源，不然有可能会比较慢。

1
npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/

或者

1
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

全局安装

1
2
3
4
5
6
7
8
# 全局安装 需要的话追加上 --registry='http://registry.npm.taobao.org' 使用淘宝npm源安装
sudo npm install electron -g --allow-root -unsafe-perm=true

# Windows使用下面语句 64位32位机器都是--win32
npm install electron -g --platform=win32

# 验证安装
electron -v

局部安装

建议新建个文件夹，然后进入到该文件夹进行操作

1
2
3
4
5
6
7
8
# 局部安装 需要的话追加上 --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

文件准备

为你的新Electron应用创建一个新的空文件夹。 打开你的命令行工具，然后从该文件夹运行

1
npm init

会根据你的输入生成 package.json 文件，也可以自己新建。

你的项目目录/
└── package.json

新建 main.js、index.html 三个文件（注：其中的 index.html 是你的网页首页）

1
2
3
4
你的项目目录/
├── package.json
├── main.js
└── index.html

如果是打算局部安装，继续运行下面的命令：

1
npm install --save-dev electron

你的项目目录/
├── node_modules
├── package-lock.json
├── package.json
├── main.js
└── index.html

package.json

如果你是自建，可以在 package.json 中添加如下内容

1
2
3
4
5
{
  "name"    : "app-name",
  "version" : "0.1.0",
  "main"    : "main.js"
}

main.js

package.json 中 "main" 指定的入口点文件，即程序主文件，可根据需要修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)

index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <!-- 此title会覆盖package.json中设置的name，作为应用顶部名称 -->
    <title>my-app</title>
</head>
<body>
    Hello World!
</body>
</html>

启动app

全局安装时

1
2
# 进入到包含 package.json 文件的目录，别忽略了后面的点
electron .

局部安装时

1
2
3
4
5
# 进入到包含 package.json 文件的目录
npm start

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

正常启动的话会出现如下界面代表成功，页面内容显示的就是index.html定义的页面

title

打包网站

修改 main.js

让我们来试试把 draw.io 打包成桌面 app，只要将 main.js 中的 mainWindow.loadFile('index.html') 改成 mainWindow.loadURL('https://app.diagrams.net/')就行。

完整的 main.js 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const {app, BrowserWindow} = require('electron')

let mainWindow

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

  // 加载主页面内容 index.html
  // 改为使用loadURL加载 draw.io 的url地址
  mainWindow.loadURL('https://app.diagrams.net/')

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

app.on('ready', createWindow)

重新启动app

1
2
3
4
5
6
7
# 全局安装
electron .

# 局部安装
node_modules/.bin/electron .
# or
npm start

第一次运行可能有点慢，毕竟是国外网站

title

程序打包发布

安装electron-builder

1
npm install --save-dev electron-builder

开始打包

以Mac为例

1
2
# 在Mac环境下执行
node_modules/.bin/electron-builder -m dmg

打包好的程序在当前目录dist文件夹下

title

如果你担心源代码泄漏，可以用 asar 来进行简单的加密，更复杂的还是要靠对代码进行加密混淆才行。

参考文档

Electron 文档
地址：https://www.electronjs.org/docs

Electron入门指南 | 一篇文章看懂Electron封装网页并打包应用
地址：https://qii404.me/2019/07/10/electron.html

【最简单】Electron 怎么将网页打包成桌面应用（web前端页面怎么生成exe可执行文件）
地址：https://blog.csdn.net/a727911438/article/details/70834467