码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14307996.html

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

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

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

  1. 初始化应用,创建窗口,加载内容

  2. 设置菜单文件,main.js 引入菜单文件

  3. 渲染进程创建子窗口

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

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

  6. 项目文件目录结构

准备工作

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

  2. 安装electron

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

    • npm i electron

  3. 创建文件夹及文件

    • 主进程菜单文件:./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" style="background-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)
}
}

进程之间的通讯,传递颜色值和字体大小变化的指令

  1. color传值:渲染进程 --> 主进程 --> 渲染进程

  2. fontSize传值:主进程 --> 渲染进程

代码补充:

main.js:

ipcMain.on('colorToMain',function(event,color){

  win.webContents.send('colorToRender',color);

})

./calculator/index.js

// 获取屏幕input对象
let txt = document.getElementById("txt"); if (localStorage.getItem('color')) {
txt.style.color = localStorage.getItem('color')
} if (localStorage.getItem('fontSize')) {
txt.style.fontSize = localStorage.getItem('fontSize')
} // 接受 Color
ipcRenderer.on('colorToRender', function (event, color) {
txt.style.color = color
localStorage.setItem('color', color)
}) // 字体增大
ipcRenderer.on('add', function (event, data) {
let fontSize = window.getComputedStyle(txt).fontSize;
fontSize = parseInt(fontSize) + 3
txt.style.fontSize = fontSize + 'px'
localStorage.setItem('fontSize',fontSize + 'px');
}); // 字体减小
ipcRenderer.on('cut', function (event, data) {
let fontSize = window.getComputedStyle(txt).fontSize;
fontSize = parseInt(fontSize) - 3;
txt.style.fontSize = fontSize + 'px';
localStorage.setItem('fontSize',fontSize + 'px');
}) // 默认字体
ipcRenderer.on('normal', function (event, data) {
txt.style.fontSize = '30px';
txt.style.color = '#ffffff';
localStorage.setItem('fontSize','30px');
localStorage.setItem('color', '#ffffff')
});

打包为安装包

  • 下载:npm i electron-builder -g

  • electron-builder可以将应用程序打包为安装文件,如.exe .dmg,对于windows系统打包为.exe,对于mac系统打包为.dmg

  • 实现electron-builder的配置,package.json 文件, npm run XXX 执行

    "build":{
    "appId":"com.test.app",
    "productName":"calculator",
    "dmg":{
    "icon":"./images/mac.icns",
    "window":{
    "x":200,
    "y":150,
    "width":540,
    "height":380
    }
    },
    "mac": {
    "icon":"./images/mac.icns"
    },
    "win":{
    "icon":"./src/img/win.ico"
    }
    },
    "scripts": {
    "start": "electorn .",
    "buildwin":"electron-builder --win ",
    "buildwin":"electron-builder --mac ",
    "packager":"electron-packager ./ calculator --platform=win32 --out=./dist --arch=x64 --app-version=1.0.1 --ignore=node_modules --icon=./src/img/win.ico --overwrite ", }

    上述为应用全部源码,欢迎指教共同学习~~~!

Electron入门Demo之桌面应用计算器笔记(二)的更多相关文章

  1. 《python编程从入门到实践》读书实践笔记(二)

    本文是<python编程从入门到实践>读书实践笔记11章的内容,主要包含测试,为体现测试的重要性,独立成文. 11 测试代码 写在前面的话,以下是我这些年开发中和测试相关的血泪史. 对于一 ...

  2. Electron入门笔记(二)-快速建立hello world

    官方的文档我没有看懂,看了不少别人的博客和文章,终于慢慢看懂了如何快速的建立一个Electron app demo,前一篇文章不是使用官方快速搭建的,而且还出了小问题,所以去撸了一遍quick-sta ...

  3. electron 入门小白贴

    electron 入门小白贴 electron demo 跑起来! 毕设准备是做个 跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问 ...

  4. Electron - 创建跨平台的桌面客户的应用程序

    Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...

  5. 【SSH系列】初识spring+入门demo

    学习过了hibernate,也就是冬天,经过一个冬天的冬眠,当春风吹绿大地,万物复苏,我们迎来了spring,在前面的一系列博文中,小编介绍hibernate的相关知识,接下来的博文中,小编将继续介绍 ...

  6. 基于springboot构建dubbo的入门demo

    之前记录了构建dubbo入门demo所需的环境以及基于普通maven项目构建dubbo的入门案例,今天记录在这些的基础上基于springboot来构建dubbo的入门demo:众所周知,springb ...

  7. apollo入门demo实战(二)

    1. apollo入门demo实战(二) 1.1. 下载demo 从下列地址下载官方脚本和官方代码 https://github.com/nobodyiam/apollo-build-scripts ...

  8. lua入门demo(HelloWorld+redis读取)

    1. lua入门demo 1.1. 入门之Hello World!! 由于我习惯用docker安装各种软件,这次的lua脚本也是运行在docker容器上 openresty是nginx+lua的各种模 ...

  9. netty入门demo(一)

    目录 前言 正文 代码部分 服务端 客服端 测试结果一: 解决粘包,拆包的问题 总结 前言 最近做一个项目: 大概需求: 多个温度传感器不断向java服务发送温度数据,该传感器采用socket发送数据 ...

随机推荐

  1. 网站开发学习Python实现-Django项目部署-介绍(6.2.1)

    @ 目录 1.第一步:找源码 2.第二步:在windows中更改代码 2.第三步:同步到linux中 3.第三步:部署 4.第四步:运行 关于作者 1.第一步:找源码 从github上找一个djang ...

  2. vscode php转到定义

    点击再settings.json 中编辑 添加这一行,内容为php的安装路径

  3. yii\filters\AccessControl 访问权限控制

    Class yii\filters\AccessControl 所有类 | 属性 | 方法   继承 yii\filters\AccessControl » yii\base\ActionFilter ...

  4. 来吧,自己动手撸一个分布式ID生成器组件

    在经过了众多轮的面试之后,小林终于进入到了一家互联网公司的基础架构组,小林目前在公司有使用到架构组研究到分布式id生成器,前一阵子大概看了下其内部的实现,发现还是存在一些架构设计不合理之处.但是又由于 ...

  5. 小白数据分析——Python职位全链路分析

    最近在做Python职位分析的项目,做这件事的背景是因为接触Python这么久,还没有对Python职位有一个全貌的了解.所以想通过本次分析了解Python相关的职位有哪些.在不同城市的需求量有何差异 ...

  6. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

  7. vs2010新特性

    下面列出了一些新的功能:1.代码编辑器新的代码编辑器使代码更易于阅读.可以通过按 CTRL 并滚动鼠标轮放大文本.此外,单击 Visual C# 或 Visual Basic 中的符号时该符号的所有实 ...

  8. TypeError: filter() got an unexpected keyword argument 'XXX'

    Flask使用SQLAlchemy查询报如下错误: TypeError: filter() got an unexpected keyword argument 'XXX' 出错原因: 查询错误,应该 ...

  9. nginx反向代理部署springboot项目报404无法加载静态资源

    问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...

  10. Keil4 uVision软件生成hex文件

    keil4下载地址:http://www.pc6.com/softview/SoftView_236836.html 按图操作即可,注意文件夹选择. 1.选择工程,选择第一个new uvision p ...