目录↑

将网页打包成应用程序

By blockXun

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

需要安装:

  1. npm install electron -g
  2. npm install electron-packager -g
  3. WinRAR解压工具(或者2345等其他解压工具也可以)
  4. Powershell 3 或 3 以上版本(electron-packager打包需要)
  5. 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})

打包完成后,打开文件夹中的app.exe就可以运行了

app.exe文件图片

打包

现在已经可以使用了,但是我们的需求是制作成一个可运行的文件,可以采用把文件夹制作成自解压程序的方式解决这个问题

做成单个的执行文件

现在的文件夹
现在的文件夹

  1. 右键已经打包好的文件夹(app-win32-x64),添加到压缩文件,在 常规 选项卡中选择 创建自解压格式压缩文件 (不同的压缩文件按钮的位置可能会不同)

常规

  1. 在 高级 选项卡中点击 自解压选项 ,在 设置 选项卡中设置 提取后运行 ,输入app.exe的路径

高级

  1. 在 模式 选项卡中点击 解包到临时文件夹 静默模式 选择 全部隐藏

模式

  1. 在 更新 选项卡中 覆盖方式 选择 覆盖所有文件

更新

  1. 在 文本和图标中可以自定义文件的图标等信息(就不放图了)

  2. 点击确定,开始创建压缩文件

创建完成后,会生成一个exe文件,双击文件就可以打开了~

exe文件

做成安装包形式

做成单个的执行文件有一个致命的缺点,就是每次打开都相当于重新解压一次文件夹,运行速度缓慢,所以可以做成一个安装包(其实也是自解压格式)

  1. 前两部和做成单个的执行文件一样,右键已经打包好的文件夹(app-win32-x64),添加到压缩文件,在 常规 选项卡中选择 创建自解压格式压缩文件 (不同的压缩文件按钮的位置可能会不同)

常规

  1. 在 高级 选项卡中点击 自解压选项 ,在 设置 选项卡中设置 提取后运行 ,输入app.exe的路径

高级

  1. 在 常规 选项卡中可以设置自解压路径,解压路径是设置的默认解压时解压在你设置的文件夹下
    如果设置 在“Program Files”中创建 的话,安装时的默认路径会在C盘的Program Files中

常规

  1. 在 更新 选项卡中 覆盖方式 选择 覆盖所有文件

更新

  1. 如果想自动创建桌面快捷方式的话,可以在 高级 选项卡中选中 请求管理员密码 ,并点击 添加快捷方式 按钮,在里边设置相应的参数(注意源文件名要加路径)

高级

  1. 点击确定,开始创建压缩文件

创建完成后,会生成一个exe文件,双击文件安装