Electron构建桌面应用

CodingDogY2023-10-09 10:00

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。

bash 复制代码 
# 克隆示例项目的仓库
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/

官方有四个模板可供下载

sql 复制代码 
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

主进程中配置

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

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

javascript 复制代码 
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

xml 复制代码 
<!--
 * @Author: 493535562@qq.com
 * @Date: 2023-07-24 11:55:22
 * @LastEditors: 93535562@qq.com
 * @LastEditTime: 2023-09-27 23:48:08
 * @FilePath: \20230305_lzx\ARM\my-vue-viteApp\index.html
 * @Description: 新窗体页面
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self'" /> -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'" />
    <title>Vite + Vue</title>
    <script src="./render/index.js"></script>
  </head>
  <body>
      <div>我是一个弹出的新窗口</div>
  </body>
</html>

效果：

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

通过ipcRenderer 发送信息给主进程

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

});

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

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

csharp 复制代码 
// 接收渲染进程发送的消息
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系统为例

版本要求：

makefile 复制代码 
node: >16.x
npm:>7.x
镜像源切换到cnpm

setp1: 克隆仓库

bash 复制代码 
# 克隆示例项目的仓库
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的配置

csharp 复制代码 
"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配置

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：

css 复制代码 
> 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

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

  1. 使用官方源下载该版本的 Electron:
    --download.mirrorOptions.mirror=github.com/electron/el...
  2. 更换 Electron 版本,使用一个可用的版本:
    --electron-version=12.0.0
  3. 更换镜像源,例如使用淘宝镜像:
    --download.mirrorOptions.mirror=npm.taobao.org/mirrors/ele...
  4. 不使用预编译包,直接从源码编译 Electron:
    --electron-version=26.2.3 --no-compile
  5. 在下载失败时禁用镜像源:
    --download.mirrorOptions.mirror=false

更新package.json文件为：

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

github.com/electron/el...

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

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

使用 electron-builder 的配置

安装

css 复制代码 
npm i electron-builder -D

package.json 简易 配置

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"
  }
}
}

参数说明：

csharp 复制代码 
"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 文件正在被使用,无法被删除。

可以尝试以下方法解决:

  1. 重启电脑,关闭使用该文件进程
  2. 使用管理员权限运行 CMD/PowerShell,再执行打包
  3. 在打包前手动删除 chrome_100_percent.pak 文件
  4. 在 electron-builder 中配置 "asarUnpack": ["***.pak"],避免删除 pak 文件
  5. 在 package.json 中配置 "npmRebuild": false,跳过重建模块
  6. 升级 Electron 版本, newer versions don't have this file
    主要原因是文件被占用,所以可以通过重启计算机,手动删除文件,调整配置避免删除等方法来解决。
    增加重试也可以提高成功率。

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

Application entry file "main.js" in the "D:\20230305_lzx\ARM\yw-electron\electron-quick-start\release\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.

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

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

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

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

  1. vue-vben-admin
    一个开箱即用的中后台模版,使用Vue3、Vite和Element Plus构建。内置完整的权限管理和页面生成器,可以快速上手。
    GitHub:github.com/vbenjs/vue-...
  2. electron-vite-vue
    集成了Element Plus的Electron管理系统模板,采用Vue3、Vite2和TypeScript。
    GitHub:<github.com/SimulatedGR...>
  3. vue-element-admin
    功能完善的后台前端解决方案,Vue和Element UI为主,采用分模块开发方式。
    GitHub:github.com/PanJiaChen/...
  4. electront-admin
    基于Vue、Electron和Element的简洁美观的桌面管理系统。
    GitHub:github.com/ly525/luban...
  5. vite-electron-builder
    这个项目更偏向于提供集成Vite和Electron-Builder的解决方案代码。
    GitHub:github.com/cawa-93/vit...
相关推荐
隐形喷火龙9 分钟前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
Simaoya1 小时前
【vue】css模拟玻璃球体效果（带高光）
前端·css·vue.js
好脾气姑娘2 小时前
Electron应用实践——前端该如何开发桌面应用
前端·electron
ekskef_sef2 小时前
前端Vue框架基础介绍
前端·javascript·vue.js
椒盐大肥猫2 小时前
vue3 Proxy替换vue2 defineProperty的原因
前端·javascript·vue.js
旭久3 小时前
vue-计算两个日期之前的天数小方法
前端·javascript·vue.js
游王子3 小时前
Vue.js组件（6）：echarts组件
前端·vue.js·echarts
苹果酱05675 小时前
Golang的文件解压技术研究与应用案例
java·vue.js·spring boot·mysql·课程设计
谢道韫6667 小时前
今日总结 2024-12-24
javascript·vue.js·elementui
racerun7 小时前
vue VueResource & axios
前端·javascript·vue.js
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告