Electron构建桌面应用

Electron简介

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。
Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

发展历程

Electron 的发展历程可以概括如下:

• 2013年,GitHub 开发了 Atom 文本编辑器,这个编辑器是用 JavaScript、HTML 和 CSS 构建的桌面应用。
• 2015年,Atom 的开发团队从代码库中提取出可以用于构建跨平台桌面应用的框架,命名为 Electron,开源发布。- 2016年,发布了 Electron 1.0 版本,标志进入正式稳定发布阶段。
• 2017年,Electron 被越来越多的应用采用,如 Microsoft Teams、Skype、Visual Studio Code、GitHub Desktop 等。
• 2018年,Electron 3.0 版本发布,重构了主进程和渲染进程代码,提升性能和内存使用等。
• 2019年,Electron 7.0 版本发布,提升了安全性,并减小打包大小。
• 2020年,Electron 11.0 版本发布,进一步优化性能,支持 Chrome 83 等。
• 2021年,Electron 13.0 版本发布,支持使用 WebView2,并开始支持 Mac ARM芯片。
• 2022年,Electron 19.0 版本发布,默认支持 Chrome 106,并引入了线程池提高性能。
• 2023年,Electron 26.2.x 版本发布,修复了在添加到 BrowserViews 之前设置边界 BrowserWindow 可能会出现意外的错误偏移的问题。#39850

Electron 一直在积极地迭代和改进,使其成为构建跨平台桌面应用的首选框架。未来Electron会继续适配更先进的技术和平台。 

写作背景

记得第一次使用Electron 是将H5网页打包成.exe，当初版本6.0.x，依稀记得打包win也是花了很久时间，这几年跨平台技术发展迅速，从Electron发展历史不难看出，它已经占有一席之地，行业中也越来越多的使用，也出现了很多出色的脚手架，最近也正好看相关的资讯及代码，所以花时间整理一下 。

1、调研创建Electron项目的几种方式

方式1：

手动创建，npm init

创建 主进程main.js ,渲染进程index.html， 配置package.json

执行 npm run dev

官方推荐：electron-quick-start ,它是 Electron 官方推荐的 Electron 入门示例，通过这个示例，我们可以快速认识 Electron。

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start

# 进入这个目录
cd electron-quick-start

# 添加.npmrc文件
  electron_mirror=https://npm.taobao.org/mirrors/electron/
  registry=https://registry.npm.taobao.org

# 安装依赖并运行
yarn && yarn start

方式2：

使用electron-vue 利用 vue-cli 作为脚手架工具 快速搭建

该样板代码被构建为 vue-cli 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本项目需要使用 node@^7 或更高版本。

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

方式3：

使用 electron -forge 创建

官网： www.electronforge.io/

官方有四个模板可供下载

npm init electron-app@latest my-new-app -- --template=webpack
npm init electron-app@latest my-new-app -- --template=webpack-typescript

npm init electron-app@latest my-new-app -- --template=vite
npm init electron-app@latest my-new-app -- --template=vite-typescript

方式4：

使用 create vite 创建

npm create vite@latest my-vue-viteAPP --template vue

官网：cn.vitejs.dev/guide/

本项目中使用方式4 ，其它几种方式感兴趣可自行去体验

方式5：

使用Tauri 创建

官网：tauri.app/zh-cn/v1/gu…

方式6：

使用 electron-egg 创建

官网：www.kaka996.com/

以上几种创建方式，没时间一一体验，本文项目部分使用 create vite 创建

2、Electron渲染进程中通过remote调用主进程中的元素

@electron/remote包的使用 14.x以上版本内置remote已废弃，必须使用@electron/remote

npm i @electron/remote -D

主进程中配置

const remote = require('@electron/remote/main'); // 引入
remote.initialize(); //初始化remote
remote.enable(win.webContents) //主进程启用

渲染进程 ，项目根目录下创建render/index.js文件

const {BrowserWindow} = require("@electron/remote")
// const path = require("path");
const  { resolve } =require("node:path");

document.addEventListener('DOMContentLoaded', () => {
    let btnDom =document.getElementById("btn")
    console.log(666,btnDom.innerHTML)
    btnDom.onclick = () => {
        const newWin = new BrowserWindow({
            width:300,
            height:200,
            title:'remote-渲染进程调用主进程的信息',
        })
       //  newWin.loadFile(resolve(__dirname, '../dist/second.html'))
       // 开启一个新的窗体
       newWin.loadFile('second.html');
    }

});

根目录创建second.html

  
    
    
    
    
    
    Vite + Vue
    
  
  
      我是一个弹出的新窗口
  

效果：

3、Electron渲染进程和主进程之间通信

通过ipcRenderer 发送信息给主进程

// 接收主进程返回的消息
ipcRenderer.on('async_reply', (event, arg) => {
    console.log(arg)
})
// 向主进程发送消息
ipcRenderer.send('async_message', '发送信息')

});

// 向主进程同步sync_message发送消息，并接收返回结果
console.log(1212,ipcRenderer.sendSync('sync_message', '123'))

通过ipcMain 接收渲染进程信息并

// 接收渲染进程发送的消息
ipcMain.on('sync_message', (event, data) => {
  console.log(333,data)
  // 返回的值
  event.returnValue = '456'
})

// 接收渲染进程发送的消息
ipcMain.on('async_message', (event, data) => {
  console.log(111,data)
  // 回复消息
  event.reply('async_reply', '回复信息')
})

效果：

win环境下，cmd 控制台中文乱码问题？

chcp 65001 是 Windows 系统下的一个命令，用于将控制台的代码页设置为 UTF-8 编码。

在默认情况下，Windows 控制台使用的是 GBK 或者其他本地编码，导致在控制台中输出中文等非 ASCII 字符时可能会出现乱码。 使用 chcp 65001 命令可以将控制台的代码页设置为 UTF-8 编码，以便正确显示中文等非 ASCII 字符。

解决方案：
"dev": "chcp 65001 && vite",

4、使用electron-quick-start 快速将react/vue项目打包成一个.exe文件

以win10系统为例

版本要求：

node: >16.x
npm:>7.x
镜像源切换到cnpm 

setp1: 克隆仓库

# 克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start

# 进入这个目录
cd electron-quick-start

# 安装依赖并运行
npm run  start

注意安装包失败，请使用nrm 切换至cnpm源

setp2: 打包已有react/vue项目

以yw-admin 业务组件项目为例，执行：npm run build 打包

仓库地址：codeup.aliyun.com/6322fc75d4d…

有需要可以私信加权限

step3: 使用electron-packager或electron-builder

安装：

cnpm install electron-packager -D
cnpm install  electron-builder -D
cnpm install electron -D

使用 electron-packager的配置

"package-win": "electron-packager . Path --platform=window --electron-version=26.2.3 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --out=release --icon=icons/icon.icns",
electron-packager . app-name --platform=win32 --arch=x64
electron-packager . app-name --overwrite --asar=true --platform=win32 --arch=x64 --prune=true --out=release --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="AppName"

package.json配置

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "chcp 65001 && cross-env NODE_ENV=development && electron .",
    "package-win": "electron-packager ./ Vite App --platform=win32 --arch=x64 --overwrite --ignore=path-key"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^26.2.3",
    "electron-packager": "^17.1.2"
  }
}

参数说明：

• platform：设置平台，window，linux还是Mac,darwin:代表的是mac环境，win32:代表win平台
• arch：x84还是x64，
• Path的位置可以替换成你打包后的exe名字,这里就会生成Path.exe文件。
• electron-version：electron的版本，必须要指定，这里设置为26.2.3，可查看package.json中electron安装的版本号
• icon 图标地址
• . 是当前应用目录
• --overwrite 覆盖已存在的打包文件
• --asar=true 将源代码打包成 asar 格式
• --platform=win32 平台设置为 Windows
• --arch=x64 架构设置为 64位
• --prune=true 清除调试信息
• --out=release 输出目录
• --version-string.xxx 设置版本信息
  其他一些常用参数还有:
• --icon 设置应用图标
• --app-copyright 设置版权信息
• --app-version 设置版本号
• --win32metadata 设置 exe 文件元数据

上述配置好之后，执行 npm run start

此时说明已在开发环境下集成了react项目

下一步执行命令 npm run packager-win

执行npm run packager-win时报错

打包时,无法定位 "@electron/asar" 模块。 手动安装 npm i @electron/asar -D

报错2：

> electron-packager . Path --platform=window --electron-version=26.2.3 --overwrite --ignore=commander --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --out=release
Response code 404 (Not Found) for https://cdn.npmmirror.com/binaries/electron/v26.2.3/electron-v26.2.3-window-x64.zip

要解决这个问题,可以尝试以下几种方法:

更新package.json文件为：

git官方对于最新版本的win 版链接

github.com/electron/el…

运行成功后就会在项目根目录中看到release文件夹，运行exe文件就可以看到构建后的项目了。

最后，执行npm run packager命令就可以完成打包了，执行完之后就可以在如上图目录下找到Vite.exe文件了！ 生成一个可执行文件不用安装的文件，点击可以直接运行

使用 electron-builder 的配置

安装

npm i electron-builder -D

package.json 简易 配置

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "chcp 65001 && cross-env NODE_ENV=development && electron .",
    "package-win": "electron-packager ./ Vite App --platform=win32 --arch=x64 --overwrite --ignore=path-key",
    "build": "electron-builder --win --x64"
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^26.2.3",
    "electron-builder": "^24.6.4",
    "electron-packager": "^17.1.2"
  },

"build": {
  "appId": "test-app",
  "productName": "testApp",
  "copyright":"lzxdonsoft@126.com",
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true
  },
  "files": [
    "dist/**/*"
  ],
  "directories": {
    "buildResources": "assets",
    "output": "release"
  }
}
}

参数说明：

"build": {
      "productName":"xxxx",   // 项目名称
      "appId": "electron.app",  // 安装包名称
      "directories": { 			
        "output": "build" // 输出文件夹
      }, 
      "copyright":"xxxx", // 版权信息
      "nsis": {	//nsis相关配置，打包方式为nsis时生效
        "oneClick": false, 				// 是否一键安装
        "allowElevation": true, 			// 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
        "allowToChangeInstallationDirectory": true, 	// 允许修改安装目录
        "installerIcon": "./build/icons/aaa.ico",	// 安装图标
        "uninstallerIcon": "./build/icons/bbb.ico",	// 卸载图标
        "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
        "createDesktopShortcut": true, 			// 创建桌面图标
        "createStartMenuShortcut": true,		// 创建开始菜单图标
        "shortcutName": "xxxx", 			// 图标名称
        "include": "build/script/installer.nsh", 	// 包含的自定义nsis脚本
      },
      // 发布到github
      "publish": {
        "provider": '',
        "repo": '', // git仓库
        "owner": '', // 拥有者
        "token": '', // gitToken
        "releaseType": '',
        "publishAutoUpdate": true // 发布自动更新（需要配置GH_TOKEN）。 默认true
      },
      //配置windows环境
      "win": {
        "icon": "build/icons/aims.ico",
        "target": ["nsis","zip"]
      },
      //配置mac环境
      "mac": {
        "target": ["dmg","zip"]
      },
      //配置linux环境
      "linux": {
        "icon": "build/icons"
      }
  }

执行npm run build 打包

错误解析

根据错误日志,electron-builder 在删除 release/win-unpacked/chrome_100_percent.pak 文件时报告权限被拒绝。
这是一个已知的问题,在 Windows 下打包 Electron 应用时可能会遇到。
主要原因是 chrome_100_percent.pak 文件正在被使用,无法被删除。
可以尝试以下方法解决:

解决方案： 删除进程，重新执行打包

Application entry file "main.js" in the "D:20230305_lzxARMyw-electronelectron-quick-startreleasewin-unpackedresourcesapp.asar" does not exist. Seems like a wrong configuration.

这个错误表示在打包好的 app.asar 文件中无法找到 main.js 入口文件,很可能是 electron-builder 的配置问题。

解决方案： 手动将main.js 文件复制到dist 目录下，有更好的解决方案欢迎请教并留言

如上图显示，electron-build 也打包成功， 至此利用官方提供的脚手架集成项目的两种方式完成，感兴趣可亲自体验

推荐几个使用 Electron + Vite 构建的开源管理系统项目: