Electron 基础学习第一天

最新推荐文章于 2025-09-12 07:45:00 发布

原创最新推荐文章于 2025-09-12 07:45:00 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js

electron 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Electron框架构建跨平台桌面应用，包括环境搭建、基本应用创建、使用Node.js功能及创建菜单等内容。

Electron 基础学习（1）

背景

Electron是由Github开发的开源框架；
允许开发者使用Web技术构建跨平台的桌面应用。
构成：

Chromium +Node.js+Native Api
- Chromium为Electron提供强大的UI，并且不必考虑兼容性；
- Node.js让Electron有了底层的操作能力，比如文件读写等。还可以使用大量的npm包进行开发；
- Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

环境构建

下载并安装Node.js，官网下载链接
安装electron，这里可能要采取科学上网的方式进行下载
```
npm install electron
```

校验

// 查看版本
npx electron -v

// 启动试试
./node_modules/.bin/electron

创建应用

目录结构（基本内容）

index.html

main.js

package.json

main.js：入口

const {app, BrowserWindow} = require('electron') // 引入electron
var mainWindow = null // 主窗口

app.on('ready', () => { // 设置应用启动事件
    mainWindow = new BrowserWindow({width: 800, height: 800}) // 设置窗口大小
    mainWindow.loadFile('./index.html') // 设置窗口显示HTML路径
    mainWindow.on('closed', () => { // 设置窗口关闭后事件
        mainWindow = null
    })
})

index.html：显示任意内容的网页

pageage.json：（配置启动方式）

{
  "name": "code",
  "version": "1.0.0",
  "description": "study Electron",
  "main": "main.js", // 这里需要配置成你的程序入口，不然默认启动index.js
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ." // 这里需要添加这句，使用electron启动该应用，. 是对入口文件的简述
  }
}

最后使用npm start启动，就可以看到窗口程序了！

使用node.js

配置BrowserWindow，核心代码如下

// main.js
// 修改BrowserWindow参数选项
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true, // 是否集成node.js，默认为false。
            contextIsolation: false // 也需要配置，这个暂时不知道什么原因，12.0.0版本的问题
        }
    })
    mainWindow.loadFile('./index.html')
    mainWindow.on('closed', () => {
        mainWindow = null
    })
})

修改index.html，核心代码如下

<html>
    <body>
    	<button id="btn">点我啊</button>
    	<div id="box"></div>
   	    <script src="./readFile.js"></script>
	</body>
</html>

创建test.txt，内容随意填写

创建readFile.js，代码如下

// 引入node.js的fs模块
const { readFile } = require('fs')

window.onload = function() {
    let btn = this.document.querySelector('#btn')
    let box = this.document.querySelector('#box')
    
    btn.onclick = () => {
       // 需要注意的是，这里的路径是相对于入口文件（main.js）
       readFile('./test.txt', (err, data) => {
            if (err) {
                box.innerHTML = err
            } else {
                box.innerHTML = data
            }
        })
    }
}

最后启动项目，点击按钮，就会看见在test.txt中的内容被填充到窗口上了。

Remote

类似于打开新窗口的功能（不关闭主进程窗口）。

配置BrowserWindow，核心代码如下

// main.js
// 修改BrowserWindow参数选项
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            // 这句必须要有,否则无法创建新窗口对象
            enableRemoteModule: true
        }
    })
    mainWindow.loadFile('./index.html')
    mainWindow.on('closed', () => {
        mainWindow = null
    })
})

创建remote.html，核心代码如下

<html>
    <body>
    	<p>
            这里是使用remote开启的新窗口
        </p>
	</body>
</html>

创建remote.js，代码如下

const btn = this.document.querySelector('#btn')
const BrowserWindow = require('electron').remote.BrowserWindow

window.onload = function() {
    btn.onclick = () => {
        let win = new BrowserWindow({width: 300, height: 200})
        win.loadFile('.remote.html')
        win.on('closed', () => {
            win = null
        })
    }
}

修改index.html，核心代码如下

<html>
    <body>
    	<button id="btn">点我啊</button>
    	<div id="box"></div>
        <!-- 这里引入自定义的remote.js -->
   	    <script src="./readFile.js"></script>
	</body>
</html>

在启动主进程后，点击按钮就能打开新的窗口了。

菜单创建与事件绑定

创建menu.js，代码如下

const { Menu, BrowserWindow } = require('electron')

// 创建菜单对应结构数组
// 数组每一项对应一个菜单项
const menuList = [
    {
        // label是菜单项名
        label: '文件',
        // submenu是菜单项子项
        submenu: [
            {
                label: '新建文件',
                // 绑定快捷键
                accelerator: 'ctrl+n',
                // 设置子项click事件
                click: () => {
                    let win = new BrowserWindow({
                        width: 300,
                        height: 200
                    })
                    // 这里的menu.html纯测试用，随便创建一个页面就ok
                    win.loadFile('./menu.html')
                    win.on('closed', () => {
            			win = null
        			})
                }
            },
            {
                label: '新建窗口'
            }
        ]
    }
]

修改main.js，核心代码如下

const menu = require('./static/js/menu.js')

app.on('ready', () => {
      // 引入meun，这里其实可以不写，只要引入该js文件就ok
    menu
    mainWindow = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
            enableRemoteModule: true 
        }
    })
    mainWindow.loadFile('./static/html/index.html')
    mainWindow.on('closed', () => {
        mainWindow = null
    })
})