| Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互 | 您所在的位置：网站首页 › electron用什么数据库 › Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互 |
Electron教程（五）读取本地文件内容， icpMain icpRenderer 之间的交互
|
Electron教程（五）读取本地文件内容， ipcMain ipcRenderer 之间的交互
Electron教程（一）什么是 Electron，由来、适用场景 和 Electron 的环境搭建 Electron教程（二）启动过程：主进程，渲染进程是什么 Electron教程（三）如何打包 electron 程序：electron-forge 的使用教程 Electron教程（四）使用 Vue Browser 版，创建小工具应用 Electron教程（五）读取本地文件内容， ipcMain ipcRenderer 之间的交互 Electron教程（六）应用菜单设置例子 Electron教程（七）结语 读取本地文件的原理： electron 的主进程里可以运行所有node 的功能，包含通过 os 读取系统信息，通过 fs 读取文件和目录。 那么如何实现文件的读取和展示呢？ 因为渲染进程是无法直接跟系统直接交互的，所以分两个部分： 主进程负责读取文件主进程把读到的文件内容 -> 传递给渲染进程，再由渲染进程负责展示知道如何使用这个，几乎所有其它的 node 相关的功能也都知道该如何使用了 node 具体可以做些什么，可以看它的 API 文档 node API: https://nodejs.org/dist/latest-v12.x/docs/api/ 一、主进程读取文件内容使用 fs.readFile() 读取文件内容，该方法传入三个参数 文件路径参数：编码什么的callback 执行文件读取后执行的方法 callBack 方法能取得两个参数： 第一个参数是是否有错误第二个参数是文件内容官方说明： fs.readFile() API
main.js const fs = require('fs') // 文件路径：Windows 也可以使用 `/` 不需要使用 `\\` fs一样能处理， let filePath = '/Users/Kyle/Library/Rime/test.dict.yaml' fs.readFile(filePath, {encoding: 'utf-8'}, (err, res) => { if(err){ console.log(err) } else { // 获取到文件内容后，广播 'showFileContent' 事件 // 并传递两个参数 filePath 和 文件内容 res // 这里的参数可以传递任意多个，根据自己需要来就行了 // 具体关于 ipcMan ipcRenderer 的使用可以看前面的教程内容 mainWindow.webContents.send('showFileContent', filePath ,res) } }) 二、渲染进程接收主进程的事件信息然后渲染进程使用 ipcRenderer 监听 showFileContent 这个事件，获取到主进程传递的 filePath 和 文件内容 res，渲染进程就可以根据需要展示文件内容了。 监听的时候，第一个参数是事件相关的 event，后面就是事件里传递的参数了，可以多个。 ipcRenderer.on('showFileContent', (event, filePath, res) => { // filePath 获取到的就是上面主进程的 filePath // res 就是主进程获取到的文件内容 // 根据自己需要做相关处理就可以了 }) 三、例子比如我正在做的一个应用的需求是用户点击菜单中的对应文件，页面内载入文件并对文件内容做相关处理，得到词条数据。 关于菜单的设置，下一个教程会介绍。 项目地址：https://github.com/KyleBing/wubi-dict-editor 效果是这样的
|
【本文地址】