从零开始的electron入门与避坑

置顶

蛋炒贩炒蛋

已于 2024-09-06 17:30:59 修改

阅读量1.9k

点赞数 34

分类专栏： electron 文章标签： electron javascript 前端 node.js websocket

于 2024-02-26 15:22:00 首次发布

本文链接：https://blog.youkuaiyun.com/Danchaofan_23/article/details/136025918

版权

1.开始之前

你需要注意以下内容
1.需要掌握html+js+css ，这个不用多说，页面展示、页面交互必备
2.需要掌握node.js 这是js 的运行时环境，用于使JavaScript在服务器端运行，开发时会用到许多node.js的api
3.包管理工具的使用
4.本项目，以electron程序开发流程为主，不注重页面内容所以没有使用vue/react 等前端框架
5. 了解electron文档

2.搭建基本目录结构

2.1 初始化项目文件夹

我这里新建了一个 D:\Project\electron-learning 文件夹，并使用npm init -y 初始化项目，会得到一个package.json的包配置文件，他的内容如下

{
   
  "name": "electron-learning",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}**加粗样式**

2.2 文件结构

基本文件结构
nodeServer文件夹
是node服务，与主进程代码分开，这样看着不混乱，这有什么作用呢？其实是为了处理一些特殊业务，而nodeServer/server.js是node 的启动文件

src文件夹
这个是页面文件夹，用于存放html、js、css,建议有这么一个文件夹单独存放页面文件，如果你想要做热更新的话可以这里替换src中的文件，而非更新整个程序，毕竟electron打包的程序体量还是挺大的。

index.js文件
这个是electron的主程序文件，它需要放到文件夹的根目录下，如果你想改变他的名字和位置，可以到package.json中修改mian:"index.js"配置项

3 起步

3.1安装electron

cnpm i electron
如果你是用的是npm i electron命令，不出意外的话，你应该会出意外诶嘿(〃‘▽’〃) 你的下载很有可能会卡住。

此时需要设置cnpm淘宝镜像 (注意 npm 和 cnpm 在同一个项目中下载包时不要混用)
先ctrl + C 两下将npm下载停止
可以清理下缓存
npm cache clean --force
设置淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
删除node_modules文件夹,后执行cnpm i electron -D,出现版本号就是成功了，如果你想下载特定版本可以使用 cnpm i electron@你要下载的版本号,(注意一定要安装到开发依赖 -D)

PS D:\Project\electron-learning> cnpm i electron -D
√ Linked 4 latest versions fallback to D:\Project\electron-learning\node_modules\.store\node_modules
Recently updated (since 2024-02-13): 1 packages (detail see file D:\Project\electron-learning\node_modules\.recently_updates.txt)
  Today:
    → electron@latest(29.0.0) (13:23:54)
√ Run 1 script(s) in 12s.
√ Installed 1 packages on D:\Project\electron-learning
√ All packages installed (1 packages installed from npm registry, used 15s(network 15s), speed 35.35KB/s, json 1(373.52KB), tarball 150.01KB, manifests cache hit 3, etag hit 3 /tag hit 3 / miss 1)

devDependencies:
+ electron ^29.0.0

3.2 从hello world开始

在src/index.html页面中编写一些内容，例如显示一个hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

在index.js文件中编写基本代码点击查看electron API 文档地址

// 使用commonjs引入electron 
// app为主程序，
// BrowserWindow浏览器窗口，顾名思义，桌面端是以窗口来显示页面的
// dialog 弹窗，用于弹出提示、选择器、错误等
const {
    app, BrowserWindow, dialog } = require("electron");
//定义主窗口实例的变量
let mainWindow = null;
//创建主窗口实例的方法
const createMainWindow = () => {
   
    // 设置浏览器窗口基本信息,更多参数请看文档 https://www.electronjs.org/zh/docs/latest/api/browser-window
    mainWindow = new BrowserWindow({
   
        webPreferences: true,//自带的窗口上方调试工具,默认就是true,不过打包的时候，改成false
        icon: "./applogo.ico",//窗口图标
        title: "我的程序",//窗口标题
        resizable: false,//是否允许托拽边框调整大小，默认true,如果设置为true的话，则需要你在html页面中作自适应布局
        width: 1200,//宽度
        height: 800//高度
    });
    // 加载需要展示的页面文件
    mainWindow.loadFile('./src/index.html');
};


// 主程序事件监听
// 当程序准备就绪
app.whenReady().then(async () => {
   
    createMainWindow()
}).catch(e => {
   
    // 一定要多使用错误提示 dialog.showErrorBox(标题，内容)，不然的话，当程序运行不起来时你根本不知道什么错误
    dialog.showErrorBox('主程序错误', e.toString());
});

现在运行它，使用 electron .命令，或者更好的做法，在package.json中添加配置,使用我们熟知的npm run start启动

"scripts": {
   
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

执行命令

PS D:\Project\electron-learning> npm run start

> electron-learning@1.0.0 start
> electron .
[1172:0205/094017.879:ERROR:network_change_notifier_win.cc(267)] WSALookupServiceBegin failed with: 0
[9852:0205/094018.472:ERROR:network_change_notifier_win.cc(267)] WSALookupServiceBegin failed with: 0

![index页面效果](https://i-blog.csdnimg.cn/blog_migrate/aa6ddf03ae5063457375a55e9298aca3.png#pic_center
很好！页面出现了!不过可以看到标题并没有应用上，因为这是使用的index.html 中的title,electron中以页面标题、图标为优先显示。现在我们修改html中的标题，使它正确显示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的程序</title>
</head>

使用ctrl + s保存，页面并没有刷新，我们也不能在页面中使用F5刷新，需要手动在窗口首选项中点击reload或者使用ctrl + r刷新
r刷新
那么我们每次修改都需要手动去刷新，这样太麻烦了，能不能让它修改后自动刷新呢？那就是使用electron-reload包，使用cnpm i electron-reload -D

PS D:\Project\electron-learning> cnpm i electron-reload -D
√ Linked 15 latest versions fallback to D:\Project\electron-learning\node_modules\.store\node_modules
√ Installed 1 packages on D:\Project\electron-learning
√ All packages installed (15 packages installed from npm registry, used 519ms(network 506ms), speed 13.07KB/s, json 1(6.61KB), tarball 0B, manifests cache hit 15, etag hit 15 / miss 1)

devDependencies:
+ electron-reload ^2.0.0-alpha.1

PS D:\Project\electron-learning>

在index.js中添加配置应用它注意，一定要判断开发环境，不然打包后就会报错，因为打包后的程序文件类型、路径会改变

// 使用commonjs引入electron 
// app为主程序，
// BrowserWindow浏览器窗口，顾名思义，桌面端是以窗口来显示页面的
// dialog 弹窗，用于弹出提示、选择器、错误等
const {
    app, BrowserWindow, dialog } = require("electron");
// 引入node 路径管理
const path =require("node:path");
//定义主窗口实例的变量
let mainWindow = null;
//创建主窗口实例的方法
const createMainWindow = () => {
   
    // 设置浏览器窗口基本信息,更多参数请看文档 https://www.electronjs.org/zh/docs/latest/api/browser-window
    mainWindow = new BrowserWindow({
   
        webPreferences: true,//自带的窗口上方调试工具,默认就是true,不过打包的时候，改成false
        icon: "./applogo.ico",//窗口图标
        title: "我的程序",//窗口标题
        resizable: false,//是否允许托拽边框调整大小，默认true,如果设置为true的话，则需要你在html页面中作自适应布局
        width: 1200,//宽度
        height: 800//高度
    });
    // 加载需要展示的页面文件
    mainWindow.loadFile('./src/index.html');
};

// app.isPackaged用于判断是否是开发环境
if (!app.isPackaged) {
   
	// 引入热重载
	const electronReload = require('electron-reload');
    // 监视渲染进程代码文件，当文件发生变化时，自动重新加载应用程序
    // __dirname 用来动态获取当前文件模块所属目录的绝对路径 
    electronReload(path.join(__dirname, 'src'), {
   
      electron: path.join(__dirname, 'node_modules', '.bin', 'electron'),
    });
};


// 主程序事件监听
// 当程序准备就绪
app.whenReady().then(async () => {
   
    createMainWindow()
}).catch(e => {
   
    // 一定要多使用错误提示 dialog.showErrorBox(标题，内容)，不然的话，当程序运行不起来时你根本不知道什么错误
    dialog.showErrorBox('主程序错误', e.toString());
});

现在修改src 中的内容就可以自动刷新了,不过，当你修改主进程内容时，程序并不会刷新,仍然需要手动重新启动项目

4.通信

4.1 配置预加载脚本

要想页面和主程序通信，则需要使用electron提供的方法，而要想在html页面中使用electron,则需要使用预加载脚本，那么什么是预加载脚本？来看看官方文档中是怎么说的!

什么是预加载脚本？
Electron 的主进程是一个拥有着完全操作系统访问权限的 Node.js 环境。 除了 Electron 模组 之外，您也可以访问 Node.js 内置模块 和所有通过 npm 安装的包。 另一方面，出于安全原因，渲染进程默认跑在网页页面上，而并非 Node.js里。

为了将 Electron 的不同类型的进程桥接在一起，我们需要使用被称为 预加载 的特殊脚本。

使用预加载脚本来增强渲染器
BrowserWindow 的预加载脚本运行在具有 HTML DOM 和 Node.js、Electron API 的有限子集访问权限的环境中。

::: info 预加载脚本沙盒化

从 Electron 20 开始，预加载脚本默认 沙盒化 ，不再拥有完整 Node.js 环境的访问权。 实际上，这意味着你只拥有一个 polyfilled 的 require 函数，这个函数只能访问一组有限的 API。

也就是说要想在html中使用electron、node中的一些方法，则需要配置一下，让我们跟着官方文档做一下!
在根目录下创建preload.js 预加载文件

const {
    contextBridge } = require('electron')
// 暴露方法给渲染器
contextBridge.exposeInMainWorld('versions', {
   
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
  // 除函数之外，我们也可以暴露变量
})

在index.js中的创建浏览器窗口代码中应用预加载脚本

//创建主窗口实例的方法
const createMainWindow = () => {
   
    // 设置浏览器窗口基本信息,更多参数请看文档 https://www.electronjs.org/zh/docs/latest/api/browser-window
    mainWindow = new BrowserWindow({
   
        webPreferences: true,//自带的窗口上方调试工具,默认就是true,不过打包的时候，改成false
        icon: "./applogo.ico",//窗口图标
        title: "我的程序",//窗口表演
        resizable: false,//是否允许托拽边框调整大小，默认true,如果设置为true的话，则需要你在html页面中做自适应布局
        webPreferences: {
   //应用预加载脚本
            preload: path.join(__dirname, 'preload.js')
        },
        width: 1200,//宽度