Electron简单实战Demo(二）：操作说明

2022-08-05

需要了解的背景知识是Node.js，熟悉其运行环境。

本文通过一个简单实战Demo——网站套壳，讲述打包构建的必备元素和流程。

从未接触过Electron的小伙伴，建议先看一下官方的这篇快速入门。

准备工作：

  1. 一个网站地址（随意，能用浏览器正常访问即可）。
  2. 本机安装好Node.js（版本越高越好）。

第一步：创建新项目

$ mkdir electron_demo && cd electron_demo
$ yarn init

基本一路回车键下去就行，创建好后获得package.json，参考：

{
  "name": "electron_demo",
  "version": "1.0.0",
  "description": " ",
  "main": "index.js",
  "author": "Pury",
  "license": "MIT"
}

然后依赖electron：

yarn add --dev electron

顺带添加运行脚本命令：

  "scripts": {
    "start": "electron ."
  }

第二步：编写主程序

内容集中在index.js，最简单的逻辑就是新建一个窗口，用于加载网站，参考如下：

// main.js
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // preload: path.join(__dirname, 'preload.js')
    },
    icon: 'assets/logo.ico'  // 窗口小图标
  })

  mainWindow.loadURL('https://cpury.com/')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

其中：BrowserWindow中的icon是窗口小图标，测试demo可有可无。

第三步：打包

打包成可运行程序的工具有很多，如：Electron Forge、electron-builder等。

这里推荐用electron-builder，它能直接打包出可安装文件，一步到位，非常方便，如.dmg文件等。

yarn add --dev electron-builder

然后添加打包个平台的命令脚本即可。

完整项目：

package.json，支持三个平台打包：

{
  "name": "electron_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build:win64": "electron-builder --win --x64",
    "build:win32": "electron-builder --win --ia32",
    "build:mac": "electron-builder --mac --dir=outMac",
    "build:linux": "electron-builder --linux"
  },
  "build": {
    "productName": "Electron Demo",
    "appId": "com.electron.demo",
    "mac": {
      "icon": "assets/logo.icns"
    },
    "win": {
      "icon": "assets/logo.ico",
      "target": [
        "nsis"
      ]
    },
    "linux": {
      "icon": "assets/logo.png"
    },
    "nsis": {
      "oneClick": false,
      "guid": "NRD Studio",
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./assets/logo.ico",
      "uninstallerIcon": "./assets/logo.ico",
      "installerHeaderIcon": "./assets/logo.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "NRD Studio"
    }
  },
  "author": "pury <szwzjx@163.com>",
  "license": "MIT",
  "devDependencies": {
    "electron": "^20.0.1",
    "electron-builder": "^23.3.3"
  }
}

index.js

// main.js
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // preload: path.join(__dirname, 'preload.js')
    },
    icon: 'assets/logo.ico'  // 窗口小图标
  })

  mainWindow.loadURL('https://cpury.com/')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

这个demo基本就是空壳，没有什么内容，仅仅嵌入了一个网站地址，打包出来的一般是80M左右，各个平台包体积略有差异。

总结下流程：

  1. 安装node环境
  2. 初始化新项目：yarn init
  3. 安装框架依赖：electron
  4. 安装打包依赖：electron-builder
  5. 编写主程序项目
  6. 配置打包需要的相关命令

正常情况下，完成这样的demo，几分钟就可以了。

不过，期间往往很不顺利，50%以上的问题都是网络问题，需要安装资源都来自外网，经常会因为连接超时失败。有兴趣的可以去研究下替换国内的镜像源，效果差不多。

其次就是node版本较低。

吐槽：electron的坑其实挺多的，官网文档很不友好，网上的资料也不多，遇到问题很不好解决。

附

Github地址：https://github.com/pury/electron_demo

（版权归cpury.com所有，转载请注明出处。）

WEB开发