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 
效果是这样的 
                    Electron教程（5）读取本地文件内容， icpMain icpRenderer 之间的交互读取本地文件的原理： electron 的主进程里可以运行所有node 的功能，包含通过 os 读取系统信息，通过 fs 读取文件和目录。那么如何实现文件的读取和展示呢？ 因为渲染进程是无法直接跟系统直接交互的，所以分两个部分：主进程负责读取文件主进程把读到的文件内容 -&gt; 传递给渲染进程，再由渲染进程负责展示知道如何使用这个，几乎所有其它的 node 相关的功能也都知道该如何使用了node
				Electron官网的描述：Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
从官网的描述我们可以简单的概括，Electron是开源的框架，可以使用h5来开发跨平台pc桌面应用，这样前端开发这可以开发桌面应用了。由于它是基于Chromium和Node.js开发的，所以在Electron中既可以使用浏览器中的api也可以使用node的api。
下面我们在Electron中实现
做本地应用程序的时候经常需要用到nodeJS来保存数据
这时候就涉及到了主进程和渲染进程的数据传递了
Electron读写本地文件其实和nodeJs差不多，只是中间加了一层API
废话不多说直接上内容
读取文件
首先按需导入ipcMain模块
注册事件（注意：ipcMain里on注册事件的名字可以自定义），调用时跟渲染进程的调用的名称一样即可
渲染进程向...
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie
				1、用electron+react制作的一个数据提取工具，react渲染页面，electron主线程调用本地sqlite数据库
2、数据和依赖包删除了，测试的时候自行添加数据与依赖
3、开发测试，首先用npm start 启动react 然后再用electron .启用electron,修改代码后，electron测试页面会自动刷新
4、react页面因为引入了electron的代码不会显示内容
5、打包时候，先用npm run build 打包react，electron的main.js和preload.js会随着public文件进入build文件，然后将main.js文件中的 mainWindow.loadURL("127.0.0.1:3000") 改为 mainWindow.loadFile("index.html"), 安装electron 然后打包
				Vue-ElementUI-Electron-Sqlite3入门
Vue + Electron + Element UI + SQLite入门套件/样板，带有Babel，热重载，测试，整理和内置的工作示例应用程序。这是@iswoter的vue-cli-plugin-electron-builder的一个分支
yarn install
编译和热重装以进行开发
yarn start
编译并最小化生产
yarn build
整理和修复文件
yarn lint
自定义配置
				Electron 入门 主进程 如何向 渲染进程发送事件，渲染进程向主进程发送事件
刚入门 electon ，整  electon + vue 整了好几天也没整明白。
我的需求是使用 Electron 做一个跨平台的能编辑指定文件的工具，其实有没有 Vue 没什么区别，Vue 也是需要 build 之后才能被 electron 使用。
最终放弃了，改用 electron + html 的方式，直接了当。
一、什么是 Electron
electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独
				electron 读取文件内容
 点击获取文件内容，并显示在页面中
文章目录electron 读取文件内容一、代码实现1.main.js2. html 页面3. render.js二、实现效果
一、代码实现
1.main.js
主进程 main.js
代码如下（示例）：
let electron = require("electron")
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWin
				electron写应用时，会遇到自动上传的需求。但是H5中只能通过input（type=file）来手动上传，JS又没有读取文件的权限，此时，我们可以借助node模块完成需求。
1. node读取文件流
fs模块读取本地文件，在主、进程通信时候，将要读取的文件路径filePath传给node。
主程main.js
fs.readFile(filePath,(err,data)=&gt;{
				要使用Electron和Node.js在浏览器中打开本地视频，你可以使用Node.js的`fs`模块来读取本地视频文件，然后将文件路径作为`<video>`标签的`src`属性值，最后使用Electron的`BrowserWindow`模块来创建一个包含`<video>`标签的窗口。
具体步骤如下：
1. 在你的Electron项目目录下，创建一个视频文件夹，并将你的本地视频文件放入该文件夹中。
2. 在你的JavaScript文件中，使用`fs`模块读取本地视频文件，示例代码如下：
```javascript
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
const fs = require('fs');
let mainWindow;
function createWindow() {
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600, 
    webPreferences: {
      nodeIntegration: true,
  const filePath = path.join(__dirname, '/videos/video.mp4'); // 视频文件路径
  const fileExists = fs.existsSync(filePath);
  if (fileExists) {
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true,
    mainWindow.webContents.on('did-finish-load', () => {
      mainWindow.webContents.send('play-video', filePath);
  } else {
    console.error('视频文件不存在');
  mainWindow.on('closed', () => {
    mainWindow = null;
app.on('ready', createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
其中，`filePath`是你本地视频文件的路径，`fileExists`变量用于判断视频文件是否存在。
3. 在你的HTML文件中，创建一个包含`<video>`标签的页面，示例代码如下：
```html
<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>My Video Player</title>
  </head>
    <video id="video-player" width="640" height="360" controls>
      Your browser does not support the video tag.
    </video>
    <script src="./renderer.js"></script>
  </body>
</html>
其中，`<video>`标签的`id`属性为`video-player`，`controls`属性用于显示视频控制条。
4. 在你的renderer.js文件中，使用`ipcRenderer`模块来接收主进程发送的视频文件路径，并将其作为`<video>`标签的`src`属性值，示例代码如下：
```javascript
const { ipcRenderer } = require('electron');
ipcRenderer.on('play-video', (event, filePath) => {
  const videoPlayer = document.getElementById('video-player');
  videoPlayer.src = `file://${filePath}`;
其中，`ipcRenderer.on('play-video', ...)`用于接收主进程发送的视频文件路径，`videoPlayer.src`用于将其作为`<video>`标签的`src`属性值。
5. 运行JavaScript文件，即可通过Electron打开包含`<video>`标签的窗口，自动播放指定的本地视频文件。