Electron 打包 Web 应用为桌面应用的教程

创作时间:

作者:

@小白创作中心

Electron 打包 Web 应用为桌面应用的教程

引用

CSDN

https://m.blog.csdn.net/qq_38421226/article/details/108486325

最近准备开发一款爬虫工具，就想到了如何创建pc端桌面应用。相比使用底层语言开发我更希望能够将web应用打包。毕竟我不太会底层语言。话不多说，开讲。

一、克隆electron-quick-start

git clone https://github.com/electron/electron-quick-start

进入克隆项目：electron-quick-start，此为样板项目。在该目录下执行以下指令安装依赖：

npm install (或者) cnpm install
说明：npm 升级 cnpm 指令： npm install cnpm -g
cnpm: 阿里提供的国内镜像指令

安装依赖完成可执行以下指令，查看样例：

npm start (或者) cnpm start

执行以上指令不出意外会弹出桌面窗口。接下来就是如何给为自个的web应用了，在克隆目录下（electron-quick-start目录）有个main.js文件，内容如下：

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

里面有一句mainWindow.loadFile(‘index.html’)。没错，这个就是关键。将index.html改为自个的web应用入口文件就完事大吉了，就是这么简单。

二、打包.exe文件

百度了好多，说的基本一个鸟样，然而没卵用。还好，找到几个靠谱的：
1、https://segmentfault.com/a/1190000011971612
2、https://blog.csdn.net/u013244720/article/details/103277583
3、https://www.jianshu.com/p/94cf5c1b0446
4、https://blog.csdn.net/cattleDrinkRedWine/article/details/108423122
货比四家，灵活运用，总是打包成功。

首先，安装electron和electron-packager

npm install electron (或者) cnpm install electron
npm install electron-packager -g (或者) cnpm install electron-packager -g

接着，执行以下指令打包：

官方说明：
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]
参考：
electron-packager ./ Hello -all 
说明：-all 其实就是  --platform=all --arch=all （在usage.txt里有解释），执行这个指令或者许会报错未指定版本号，可以在后面加上--electron-version=版本号，如：
electron-packager ./ Hello -all --electron-version=10.1.1
说明：可通过指令electron -v, 查看当前electron版本号

完事儿在当前目录下会生成一个文件夹，.exe文件就在里面。至此便已功德圆满了。