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

在本系列的上一篇文章中,我们谈到了如何去搭建一个简单的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 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值