Electron入门Demo之桌面应用计算器笔记（二）

在之前总结了一篇自学笔记，通过之前学习到的方法和知识，完成了一个较为简单的桌面应用程序，Electron 实现桌面计算器，并打包成 .exe 可执行文件和可安装包文件

简要绘制一下该Demo的主要功能：

简短描述一下所用到的基础知识：

初始化应用，创建窗口，加载内容

设置菜单文件，main.js 引入菜单文件

渲染进程创建子窗口

渲染进程与主进程之间通讯

执行用户选择操作，并进行本地缓存，便于下次启动应用时，读取用户设置

项目文件目录结构

准备工作

创建一个空的文件夹，并创建入口 main.js 文件，计算器必要文件，计算器的代码，此处就不贴了，已上传至百度云，可自行下载

链接：https://pan.baidu.com/s/1d-v4MimASMcYKkk_eSXz6Q 提取码：ft7f

安装electron

npm init -y：初始化配置文件 package.json

npm i electron

创建文件夹及文件

主进程菜单文件：./main-process/calculatorMenu.js

渲染进程颜色文件：./render-process/calculatorColor.js

main.js：基本构建

// app:控制应用的生命周期 BrowserWindow: 创建浏览器窗口 const { app ,BrowserWindow, ipcMain} = require('electron'); const path = require('path'); // 引入设置菜单文件 require('./main-process/calculatorMenu'); app.on('ready',ny_createWindow) let win; // 创建窗口 function ny_createWindow(){ win = new BrowserWindow({ width:345, height:370, webPreferences: { nodeIntegration: true, enableRemoteModule: true, } }); // 加载内容 win.loadURL(path.join(__dirname, './calculator/index.html')) // 计算器 win.on('close',function(){ win = null; // 关闭窗口 app.quit(); // 关闭应用 }) }

./main-process/calculatorMenu.js

// 1.创建菜单模板 const { Menu, BrowserWindow, app} = require('electron'); const path = require('path'); let template = [{ label: '计算器', submenu: [{ label: '关于计算器', click: function () { ny_createAboutWindow() } }, { label: '退出', accelerator: 'ctrl+Q', click: function () { app.quit(); } } ] }, { label: '格式', submenu: [{ label: '颜色', click: function () { ny_createColorWindow() } }, { type: 'separator' }, { label: '字体增大', accelerator: 'F11', click: function (item,win) { // 主进程 - > 渲染进程 通讯 if(win){ win.webContents.send('add') // 不需要发送数据 } } }, { label: '字体减小', accelerator: 'F12', click: function (item,win) { if(win){ win.webContents.send('cut') } } }, { label: '默认字体', accelerator: (function () { return 'ctrl+0' })(), click: function (item,win) { if(win){ win.webContents.send('normal') } } } ] } ] // 2.构建菜单，实例化一个菜单对象 let menu = Menu.buildFromTemplate(template); // 3. 把菜单对象设置到应用中 Menu.setApplicationMenu(menu); // 4.创建 about 窗口 function ny_createAboutWindow() { let win = new BrowserWindow({ width: 284, height: 198 }) win.loadURL(path.join(__dirname, '../calculator/about.html')); // 子窗口不要菜单 win.setMenu(null) win.on('close', function () { win = null; }) } // 5.创建 color 窗口 function ny_createColorWindow() { let win = new BrowserWindow({ width: 260, height: 95, webPreferences: { nodeIntegration: true } }); win.loadURL(path.join(__dirname, '../calculator/color.html')); win.setMenu(null); win.on('click', function () { win = null; }) }

./calculator/color.html

<script> require('../render-process/calculatorColor'); </script>

./render-process/calculatorColor.js

// 渲染进程 const {ipcRenderer} = require('electron') //<li data-color="#00ffff"></li> let lis = document.querySelectorAll('li'); // 遍历每个li，绑定点击事件 获取对应的颜色值 this.dataset.color, 发送到主进程 for (let i = 0; i < lis.length; i++) { var li = lis[i]; li.onclick = function(){ ipcRenderer.send('colorToMain',this.dataset.color) } } 进程之间的通讯，传递颜色值和字体大小变化的指令

color传值：渲染进程 --> 主进程 --> 渲染进程

fontSize传值：主进程 --> 渲染进程

代码补充：

main.js：

ipcMain.on('colorToMain',function(event,color){ win.webContents.send('colorToRender',color); })