使用Web前端技术开发桌面应用---Electron读取文件内容并展示

news/2024/7/19 12:52:03 标签: js, 前端, electron

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

Electron的运行流程

在这里插入图片描述

读取package.json的中的入口文件,这里我们是main.js
main.js 主进程中创建渲染进程
读取应用页面的布局和样式
使用IPC在主进程执行任务并获取信息

也许你现在还不能理解这个流程,但是你需要记住这个流程,只有我们记住这个流程后,在以后程序出现问题时,才可以很快的定位问题.

Electron的主进程和渲染进程

我们可以理解package.json中定义的入口文件就是主进程,那一般一个程序只有一个主进程,而我们可以利用一个主进程,打开多个子窗口.

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。每个 Electron 中的 web 页面运行在它自己的渲染进程中,也就是我们说的渲染进程.

也就是说主进程控制渲染进程,一个主进程可以控制多个渲染进程.
在这里插入图片描述
如果你实在不理解,也没关系,你可以简单的把main.js看成主进程,我们写的html部分看成渲染进程.虽然这样不太严谨,但是方便我们记忆,我们目的是学会使用Electron,而不是成为Electron的专家.

简单示范：读取文件内容

在我们了解主进程和渲染进程后,我们来作一个读取小姐姐案例.现在项目根目录下建立一个file.txt的文件,然后写入一些内容.

在这里插入图片描述
有了这个文件,我们修改一下main.js文件,因为我们要使用node里的fs模块,所以在设置窗口时,增加全量使用node.js.

var electron = require('electron') 

var app = electron.app   

var BrowserWindow = electron.BrowserWindow;

var mainWindow = null ;
app.on('ready',()=>{
    mainWindow = new BrowserWindow({
        width:500,
        height:500,
        webPreferences:{ nodeIntegration:true}
    })

    mainWindow.loadFile('index.html')

    mainWindow.on('closed',()=>{
        mainWindow = null
    })

})

修改完主进程,然后我们到index.html里边写一下界面.这里我们写了一个按钮,然后在按钮下方加一个<div>,这个DIV用来作读取过来内容的容器.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
</head>
<body>
    <button id="btn">读取文件内容</button>
    <div id="content"></div>
    <script src="./render/index.js"></script>
</body>
</html>

有了界面之后,我们可以单独新建一个renderer文件夹,一般约定俗成都会起这个名字.注意起这个名字意思是渲染进程中的操作. 文件夹建立完成后,在文件里新建index.js文件,然后再index.html页面里先进行引入.

<script src="renderer/index.js"></script>

然后编写index.js里的代码,代码如下.

var fs = require('fs'); 
window.onload = function(){
    var btn = this.document.querySelector('#btn')
    var mybaby = this.document.querySelector('#mybaby')
    btn.onclick = function(){
        fs.readFile('xiaojiejie.txt',(err,data)=>{
            mybaby.innerHTML = data
        })
    }
}