electron桌面端开发 hello world

介绍

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中。它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。

1. 安装

新建文件夹，并命名为 my-electron-app
安装手脚架 npm install electron --save-dev
初始化文件夹 npm init

2. package.json配置

配置完成后，使用npm start启动项目，这时候会报错因为文件中还没有创建页面和脚本

   {
     "name": "my-electron-app",
     "version": "1.0.0",
     "description": "Hello World!",
     "main": "main.js",
     "scripts": {
     "start": "electron .",
     "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "Jane Doe",
     "license": "MIT",
     "devDependencies": {
     "electron": "23.1.3"
     }
    }

3. 创建页面

在项目根目录下创建一个名为index.html的文件

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
     <meta charset="UTF-8">
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
     <title>Hello World!</title>
    </head>
    
    <body>
     <h1>Hello World!</h1>
     We are using Node.js <span id="node-version"></span>,
     Chromium <span id="chrome-version"></span>,
     and Electron <span id="electron-version"></span>.
     <script src="./renderer.js"></script>
    </body>
    
    </html>

4. 在窗口中打开页面

在项目根目录下创建一个main.js文件，添加如下代码，让页面跑起来

    const { app, BrowserWindow, ipcMain } = require('electron')
    
    // 导入 Node.js 的 path 模块
    const path = require('node:path')
    
    // 创建一个窗口 
    const createWindow = () => {
     const win = new BrowserWindow({
     // 窗口大小 
     width: 800,
     height: 600,
     // 版本号 
     webPreferences: {
     preload: path.join(__dirname, 'preload.js')
     }
     })
    
     win.loadFile('index.html')
    }
    
    app.whenReady().then(() => {
     // 设置 handle 监听器。 在 HTML 文件加载_之前_完成，保证从渲染器发送 invoke调用 之前，处理程序能够准备就绪
     ipcMain.handle('ping', () => 'pong')
    
     // 创建一个窗口 
     createWindow()
    
     // 在没有窗口可用的情况下激活应用时会打开新的窗口
     app.on('activate', () => {
     if (BrowserWindow.getAllWindows().length === 0) createWindow()
     })
    })
    
    // 监听窗口的关闭 
    app.on('window-all-closed', () => {
     if (process.platform !== 'darwin') app.quit()
    })

5. 新建预加载脚本preload.js

通过预加载脚本从渲染器访问Node.js

    // 加载脚本在渲染器进程加载之前加载，并访问全局渲染器 (例如 window 和 document) 和 Node.js 环境
    window.addEventListener('DOMContentLoaded', () => {
     const replaceText = (selector, text) => {
     const element = document.getElementById(selector)
     if (element) element.innerText = text
     }
    
     for (const dependency of ['chrome', 'node', 'electron']) {
     replaceText(`${dependency}-version`, process.versions[dependency])
     }
    })
    
    // 进程之间通信 
    const { contextBridge, ipcRenderer } = require('electron')
    
    contextBridge.exposeInMainWorld('versions', {
     node: () => process.versions.node,
     chrome: () => process.versions.chrome,
     electron: () => process.versions.electron,
     ping: () => ipcRenderer.invoke('ping')
     // 除函数之外，我们也可以暴露变量
    })

6. 打包分发

成功启动项目后，可以打个包试试

安装
npm install --save-dev @electron-forge/cli
npx electron-forge import

打包
npm run make

tip:

安装报错可能是node版本过低
打包报错可能是链接不上github，开启代理后，清除缓存 npm cache clean --force，重新打包