使用electron 将网页打包成应用程序

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

需求：将一个已经上线的后台管理系统（只兼容Chrome）打包成一个不需要谷歌浏览器就可以运行的软件

需要安装：

npm install electron -g
npm install electron-packager -g
WinRAR解压工具（或者2345等其他解压工具也可以）
Powershell 3 或 3 以上版本（electron-packager打包需要）
NET 4.5 或 4.5 以上版本（electron-packager打包需要）

此例只进行最简单的转换，详细electron用法请参考electron中文文档

运行文件

新建文件夹，演示中暂命名为app，在文件夹中启动cmd,创建package.json，在package.json中必须有写入

{
  "name": "app",
  "main": "main.js",
}

在app文件夹中创建main.js文件，在文件中写入以下内容

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

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function () {
    // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
    // 应用会保持活动状态
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function () {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    // 加载应用的 index
    mainWindow.loadURL("http://www.baidu.com")

    // 打开开发工具
    // mainWindow.openDevTools();

    // 当 window 被关闭，这个事件会被发出
    mainWindow.on('closed', function () {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 但这次不是。
        mainWindow = null;
    });
});

如果安装了上边说的 npm install electron -g，就可以直接在命令窗口运行electron .,打开窗口了

导出文件

在app文件夹下，安装

npm install electron -D

npm install electron-package -D

安装后，在命令行输入 `electron-packager . app --win --out ./appBox --arch=x64 --version1.0.0 --icon=ico.ico --overwrite --ignore=node_modules`

这句命令的意思是electron-packager . exe文件名称 --win --out ./文件夹名称 --arch=64位 --version版本号 --icon=打包后文件的图标 --每次调用覆盖文件 --ignore=不打包的内容

可以按照个人需求适当删除内容

注意： electron-packager必须安装Powershell3或3以上版本和NET4.5或4.5以上版本，否则会报错

如果希望打开内容不是一个URL而是一个index.html的本地文件的话，可以使用

// 把
mainWindow.loadURL("http://www.baidu.com")
// 替换为
mainWindowloadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
}))

然后在app文件夹中创建index.html就可以了

如果需要打开后全屏显示

// 把
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 替换为
mainWindow = new BrowserWindow({show: false, autoHideMenuBar: true})
  mainWindow.maximize()
  mainWindow.show()

如果需要删除掉顶部的菜单栏

// 把
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 替换为
mainWindow = new BrowserWindow({width: 800, height: 600, autoHideMenuBar: true})