Electron开发笔记----前端小白开发桌面应用之路(二)文件的读写和新窗口的创建

跨越平台桌面应用开发框架electron使用的心路历程 前言 从接触Electron到真正去做出一个桌面应用,再到今天写下这边文章,大概花了三个月时间吧,到不是因为有多难学,主要是由于这纯碎是个人兴趣,自己是在业余时间干的,公司里面目前还没有推行,这段时间开发任务又比较重,所以断断续续用了三月吧。今天写下这篇文章只是记录一下这个过程,也是和初学者分享一下。 相信大多数人都是知道Electron最初是起源于Atom... 阅读详情

在本系列的上一篇文章中,我们谈到了如何去搭建一个简单的hello wordl桌面应用,那么这篇文章,来谈谈几个我们在桌面应用中常用的功能

文件的读写


对于一个桌面应用来说,很多信息都会保存在本地的文件,在我们使用该应用时,读取本地对应的文件,去显示不同的内容

这类似于我们在使用web端时,需要去从服务端读取我们想要的配置文件等信息,将信息以各种形式渲染到页面上。对于桌面应用来说,设置一般都是保存在本地的,我们可以将桌面应用读取本地的文件,和web端发起请求的行为对比,其实原理都是一样的。

而这里的读写,我们直接用到了fs模块,其实这里只要熟悉fs模块的话,是可以直接看代码了,基本没什么差别,但是这里我们借着说文件的读写,来说说怎么在Electron中的渲染进程(也就是在各个页面)使用node.js

这里写一个小demo,读取配置文件中的内容,渲染到应用页面上,同时使用写操作修改配置文件

首先在根目录创建一个全局配置文件global.json,同时新建文件夹render用来存放渲染文件
文件目录
修改index.html,引入相应的js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>hello <span id="name">xxx</span></p>
    <button id="refresh">更新</button>
    <p>
        <label>名字:</label>
        <input type="text" id="nameInput">
    </p>
    <p>
        <label>颜色:</label>
        <input type="text" id="colorInput">
    </p>
    <button id=
Electron 和 React 开发桌面应用程序 阅读详情

相关推荐

桌面应用之electron开发

1. Electron简介       引自Electron官方的说明[1]:Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。Electron于2013年作为构建Github...

tornyLin的博客 5674

手把手教你 Electron + Vue 搭建前端桌面应用

一、在使用 Electron 之前我们要了解 Electron 是什么? Electron 官网地址 点此 : electron 官方地址 Electron 相当于一个浏览器的外壳 , 我们将 编写的 HTML , CSS , Javascript 网页程序 嵌入进 Electron 里面 以便于在桌面上进行运行。 通俗来讲它就是一个软件 , 如 QQ 、网易云音乐、优酷视频 等等。功能至强大 超乎你的想象 二、开发环境的准备 安装 Node.js 坏境 Node.js 官网地址 点此 node

Sanzhutech的博客 4259

【Electron】桌面应用开发

Electron是一个使用JavaScript,HTML和CSS构建桌面应用程序的框架。通过将和嵌入到其二进制文件中,Electron允许您维护一个JavaScript代码库,并创建可在Windows,macOS和Linux上运行的跨平台应用程序 - 无需本机开发经验。

我的博客 3148

Electron PC桌面应用exe开发

基于 Electron、Qt、WPF 和 WinForms 开发的桌面软件Q的特点和适用场景。Electron 适合跨平台的 Web 技术栈应用程序,Qt适用于高性能和可扩展性要求的应用程序,WPE 适用于复杂的 Windows 平台应用程序,而 Winfomms 适合快速开发简单界面的应用程序。开发者可以根据自己的需求和技术栈选择合适的框架,以提高开发效率和应用程序质量。

qq_36158551的博客 1638

前端 Electron 桌面应用学习笔记

前端 Electron 桌面应用学习笔记、桌面应用、Electron、前端

qq_33365152的博客 730

前端文件打包成electron桌面应用

1、初始化 node 项目,生成 package.json 文件 npm init 2、安装electron 依赖到项目中 npm install --save-dev electron yarn add electron --dev package.json 配置如下: { "name": "electron-evaluation", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {

bighead的博客 1841

Webpack 与 Electron:桌面应用开发

本文旨在为前端开发者提供一个全面的指南,介绍如何使用Webpack和Electron构建现代化的桌面应用程序。我们将覆盖从基础概念到高级配置的所有内容,包括性能优化和调试技巧。核心概念介绍:Webpack和Electron的基本原理集成方案:如何将两者结合使用实战项目:从零开始构建一个Electron应用高级主题:性能优化和调试技巧未来发展趋势Webpack:一个现代JavaScript应用程序的静态模块打包工具Electron。

AI架构全栈开发实战笔记 1016

linux入侵排查-综合日志分析

2.分析攻击者首次成功登录web管理后台的时间 还可以知道攻击者可能是通过10.2.4.11这个跳板服务器跳过来的,然后我们继续排查,可以发现日志中POST请求大多都是1047字节,然后往后大多是300字节,POST请求的响应状态码有200和302这两个,其中的302是爆破成功后持续爆破产生的日志,再1047字节和300字节中间夹着一个978字节,就是200响应和302响应的中间。7.分析攻击者留下的持久化后门的时间和后门执行情况 排查计划任务,发现有一个计划任务还是被加密的,应该是反弹shell的。

chinese_cabbage0的博客 642

【WSL】window11 安装WSL2配置conda环境及mlatom环境搭建

写这篇文章之前自己安装过两次环境,可能每次都会产生碰到同样的问题,为了搭建适合自己的虚拟环境保证每一步的正确性,按顺序记录一下。

wangxiancao的博客 1628

小红书图文AI创作:输入主题,一键生成图文(coze工作流教程+获取)

输入主题,工作流一键生成小红书风格图文,30s一条,可批量生成

2301_79384090的博客 2798

版图提取的spice网表中参数含义及二级效应STI/WPE

寄生电阻、寄生电容可以从版图提出的.sp文件中看, ad area of drain 面积 as area of source pd perimeter of drain 周长,PS PD周长都不计算与栅极接触的部分 ps perimeter of source nrd 漏扩散区等效方块数 nrs 源扩散区等效方块数 sa ...

qq_40007892的博客 6552

注册“Oracle Provider for OLE DB”和创建链接服务器

注册“Oracle Provider for OLE DB”和创建链接服务器 在sql server 数据库上创建链接服务器,连接oracle数据库,访问接口需要设置为:“Oracle Provider for OLE DB”。 如果电脑上没有这个驱动,安装一个完整的Oracle11gR2程序是一个有效的方法,但这个64位版本的安装包有2个多G, 相当庞大,如果仅仅...

weixin_30760895的博客 2383

【无机纳米材料科研制图——OriginLab 0205】Origin对BET吸附/脱附曲线及孔径分布制图...

此篇,我们来分享如何对BET数据进行处理和制图。 一、等温吸脱附曲线绘制 1)找到等温吸脱附文件。 一半来说,对一个样品测一次BET,会产生很多数据,具体因仪器而异。我这里的数据主要有两个文件夹,一个脱附,一个吸附,吸附文件夹中多了一个等温吸脱附的文件夹。而这...

XD_Yangf的博客 803

《HiVT: Hierarchical Vector Transformer for Multi-Agent Motion Prediction》论文阅读之HiVT

目录摘要1.介绍2.相关工作3.方法3.1. 总体框架3.2 场景表示 3.3 分层向量Transformer3.3.1 局部编码器3.3.2 全局交互模块3.3.3 多模态未来解码器3.4 训练4.实验4.1 实验设置4.2 消融研究 4.3. 结果5.结论 准确预测周围交通参与者的未来运动对于自动驾驶车辆的安全至关重要。最近,矢量化方法由于能够捕捉交通场景中的复杂交互而在运动预测领域占据主导地位。然而,现有的方法忽略了问题的对称性并且受到昂贵的计算成本的影响,面临着在不牺牲预测性能的情况

Gavinmiaoc的博客 3338

8.DJI-PSDK:一站式项目功能开发总结(空中气象站项目/激光甲烷检测项目)

本文将以一篇文章的幅度快速完成: 项目一:空中气象站项目; 项目二:激光甲烷项目; 项目所使用的PSDK来源于第0章节末尾的百度网盘;解压:Payload-SDK-3.8.zip代码所在目录:双击打开: 修改打印串口和相关波特率,我们修改如下: 进行相关编译选项配置如下: :

哒宰的博客 293

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

上一篇: Electron开发笔记----前端小白开发桌面应用之路(一)聊聊Electron和我的第一个Electron应用
下一篇: Electron开发笔记----前端小白开发桌面应用之路(三)顶部菜单和右键菜单的创建
前端小黑
博客等级 码龄9年 148粉丝 222原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值