「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战」
初学Electron遇到的问题对学习本篇文章的过程中遇到的问题总结
1, 介绍
Electron 桌面开发应用系统,众所周知,目前越来越流行,为了跟上时代的步伐,活到老,学到老。
组成: Electron = Chromium + Node.js + Native API
(1) Chromium : 使用可以用web技术开发,并且不考虑浏览器的兼容性
(2) Node.js : 使用可以使用npm , 并具备底层操作能力
(3) Natvie API : 使用具有扩平台的原生能力
2, 目前比较流行使用的
VSCode, Atom, Slack, Wordpress
2, 环境搭建
(1) 环境配置
node -v
v12.20.0
( 2) 创建 项目, 初始化package.json文件
mkdir electron-project
cd electron-project
npm init -y
npm install electron --save-dev
(3) 检查安装版本
npx electron -v
或
./node_modules/.bin/electron -v
3, HelloWorld
(1) 创建main.js
var electron = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow // 窗口引入
var mainWindow = null; // 什么要打开的主窗口
app.on('ready', () => {
mainWindow = new BrowserWindow({ width: 800, height: 800})
mainWindow.loadFile('index.html') // 加载html网页
mainWindow.on('close', () => {
mainWindow = null;
})
})
(2) 运行
electron main.js
4, 运行流程
(1) 入口文件: main.js
(2) main.js 是主进程,通过loadFile去创建渲染进程
(3) 读取页面index.html
(4) 通过IPC在主进程执行任务并获取信息
主进程
一般一个程序只有一个主进程,一个主进程可以控制多个渲染进程
5, 读取一个文件
(1) 设置主窗口可以操作node
mainWindow = new BrowserWindow({
width: 800,
height: 800,
webPreferences: { nodeIntegration: true}
})
(2) 根目录新建一个文件.txt,引入node模块中的fs
var fs = require('fs')
window.onload = function() {
var btn = this.document.querySelector("#btn")
var baby = this.document.querySelector("#baby")
btn.onclick = function() {
fs.readFile('README.txt', (err, data) => {
baby.innerHTML = data
})
}
}
6, 菜单创建
(1) 常见menu.js
const { Menu, BrowserWindow } = require('electron')
var template = [
{
label: '读书馆',
accelerator: 'ctrl+n',
submenu: [
{
label: 'Vue',
onclick: ()=> {
var win = new BrowserWindow({
width: 500,
height: 500,
webPreferences: { nodeIntegration: true }
})
win.loadFile('index.html')
win.on('closed', () => {
win = null;
})
}
},
{ label: 'React' },
{ label: 'Java' }
]
},
{
label: '休息室',
submenu: [
{ label: '桌子' },
{ label: '椅子' }
]
}
]
var menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
其中: label是一级菜单, submenu是二级菜单
每一个二级菜单想要使用node的原生功能必须设置: webPreferences: { nodeIntegration: true }
, 而起二级菜单也是可以添加点击事件,并且打开一个新窗口,记住:最后都要监听closed
方法, 将窗口置为null, 如果不见他closed
事件,内存会越耗越大
如果想增肌菜单的快捷键需要设置: accelerator: 'ctrl+n',
7,项目地址
[持续更新中]