Electron入门Demo之桌面应用计算器笔记(二)
码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14307996.html
在之前总结了一篇自学笔记,通过之前学习到的方法和知识,完成了一个较为简单的桌面应用程序,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" 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)
}
}
进程之间的通讯,传递颜色值和字体大小变化的指令
color传值:
渲染进程 --> 主进程 --> 渲染进程
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之桌面应用计算器笔记(二)的更多相关文章
- 《python编程从入门到实践》读书实践笔记(二)
本文是<python编程从入门到实践>读书实践笔记11章的内容,主要包含测试,为体现测试的重要性,独立成文. 11 测试代码 写在前面的话,以下是我这些年开发中和测试相关的血泪史. 对于一 ...
- Electron入门笔记(二)-快速建立hello world
官方的文档我没有看懂,看了不少别人的博客和文章,终于慢慢看懂了如何快速的建立一个Electron app demo,前一篇文章不是使用官方快速搭建的,而且还出了小问题,所以去撸了一遍quick-sta ...
- electron 入门小白贴
electron 入门小白贴 electron demo 跑起来! 毕设准备是做个 跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问 ...
- Electron - 创建跨平台的桌面客户的应用程序
Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序.它是基于io.js 和 Chromium 开源项目,并用于在 ...
- 【SSH系列】初识spring+入门demo
学习过了hibernate,也就是冬天,经过一个冬天的冬眠,当春风吹绿大地,万物复苏,我们迎来了spring,在前面的一系列博文中,小编介绍hibernate的相关知识,接下来的博文中,小编将继续介绍 ...
- 基于springboot构建dubbo的入门demo
之前记录了构建dubbo入门demo所需的环境以及基于普通maven项目构建dubbo的入门案例,今天记录在这些的基础上基于springboot来构建dubbo的入门demo:众所周知,springb ...
- apollo入门demo实战(二)
1. apollo入门demo实战(二) 1.1. 下载demo 从下列地址下载官方脚本和官方代码 https://github.com/nobodyiam/apollo-build-scripts ...
- lua入门demo(HelloWorld+redis读取)
1. lua入门demo 1.1. 入门之Hello World!! 由于我习惯用docker安装各种软件,这次的lua脚本也是运行在docker容器上 openresty是nginx+lua的各种模 ...
- netty入门demo(一)
目录 前言 正文 代码部分 服务端 客服端 测试结果一: 解决粘包,拆包的问题 总结 前言 最近做一个项目: 大概需求: 多个温度传感器不断向java服务发送温度数据,该传感器采用socket发送数据 ...
随机推荐
- 网站开发学习Python实现-Django项目部署-介绍(6.2.1)
@ 目录 1.第一步:找源码 2.第二步:在windows中更改代码 2.第三步:同步到linux中 3.第三步:部署 4.第四步:运行 关于作者 1.第一步:找源码 从github上找一个djang ...
- vscode php转到定义
点击再settings.json 中编辑 添加这一行,内容为php的安装路径
- yii\filters\AccessControl 访问权限控制
Class yii\filters\AccessControl 所有类 | 属性 | 方法 继承 yii\filters\AccessControl » yii\base\ActionFilter ...
- 来吧,自己动手撸一个分布式ID生成器组件
在经过了众多轮的面试之后,小林终于进入到了一家互联网公司的基础架构组,小林目前在公司有使用到架构组研究到分布式id生成器,前一阵子大概看了下其内部的实现,发现还是存在一些架构设计不合理之处.但是又由于 ...
- 小白数据分析——Python职位全链路分析
最近在做Python职位分析的项目,做这件事的背景是因为接触Python这么久,还没有对Python职位有一个全貌的了解.所以想通过本次分析了解Python相关的职位有哪些.在不同城市的需求量有何差异 ...
- 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!
大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧
- vs2010新特性
下面列出了一些新的功能:1.代码编辑器新的代码编辑器使代码更易于阅读.可以通过按 CTRL 并滚动鼠标轮放大文本.此外,单击 Visual C# 或 Visual Basic 中的符号时该符号的所有实 ...
- TypeError: filter() got an unexpected keyword argument 'XXX'
Flask使用SQLAlchemy查询报如下错误: TypeError: filter() got an unexpected keyword argument 'XXX' 出错原因: 查询错误,应该 ...
- nginx反向代理部署springboot项目报404无法加载静态资源
问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...
- Keil4 uVision软件生成hex文件
keil4下载地址:http://www.pc6.com/softview/SoftView_236836.html 按图操作即可,注意文件夹选择. 1.选择工程,选择第一个new uvision p ...