vue + electron應(yīng)用文件讀寫

在使用electron制作桌面應(yīng)用時，基本都會需要數(shù)據(jù)的存儲。

如果要制作的應(yīng)用并不復(fù)雜，完全可以將數(shù)據(jù)存儲在本地文件當(dāng)中，然后應(yīng)用就可以通過這些文件進(jìn)行數(shù)據(jù)的讀寫。

因為electron的主進(jìn)程是支持node的，所以可以通過fs文件系統(tǒng)對文件完成讀寫操作。

正常操作流程

• 首先先創(chuàng)建一個vue項目， 可以使用vue cli進(jìn)行創(chuàng)建

通過yarn serve命令測試是否能否運行成功，界面正常出現(xiàn)即可。

• 通過yarn add electron -D加入electron。 然后在package.json同級目錄下創(chuàng)建一個electron_main.js文件，作為electron的主進(jìn)程。同時也需要設(shè)置一下package.json中的main，以及添加"start": "electron ."命令。

• 在loadURL加載頁面時，因為調(diào)試，可以先選擇yarn serve運行起來的頁面
• 另外在webPreferences需要添加nodeIntegration，否則之后渲染進(jìn)程中使用require會出現(xiàn)問題
• 運行yarn start能夠成功打開應(yīng)用

electron_main.js代碼：

const electron = require('electron');
// 控制應(yīng)用生命周期的模塊。
const {app, ipcMain} = electron;
// 創(chuàng)建原生瀏覽器窗口的模塊。
const {BrowserWindow} = electron;

let mainWindow;
function createWindow() {
  // 創(chuàng)建瀏覽器窗口。
  mainWindow = new BrowserWindow({
    width: 480, 
    height: 670,
    webPreferences: {
      nodeIntegration: true, 
      contextIsolation: false
    }
  });
  // 加載應(yīng)用的 index.html。
  // mainWindow.loadURL(`file://${__dirname}/common/index.html`);
  mainWindow.loadURL('http://localhost:9001/');
  // 啟用開發(fā)工具
  mainWindow.webContents.openDevTools();
}

// Electron 會在初始化后并準(zhǔn)備
app.on('ready', createWindow);
// 當(dāng)全部窗口關(guān)閉時退出。
app.on('window-all-closed', () => {
  // 否則絕大部分應(yīng)用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  // 絕大部分應(yīng)用會重新創(chuàng)建一個窗口。
  if (mainWindow === null) {
    createWindow();
  }
});

• 在public文件夾下可以創(chuàng)建一個static文件夾，然后創(chuàng)建renderer.js文件，渲染進(jìn)程的一部分需要調(diào)用electron的代碼可以放在這里。

此js文件要引入public的index.html文件當(dāng)中

const { ipcRenderer } = require('electron');
window.ipcRenderer = ipcRenderer;

在window中可以創(chuàng)建一個ipcRenderer，用來指向electron中的ipcRenderer。這樣可以讓之后的vue組件中也可以成功調(diào)用ipcRenderer。

因為在組件中直接調(diào)用require('electron')找不到ipcRenderer， 會出現(xiàn)index.js?bdb9:8 Uncaught TypeError: fs.existsSync is not a function報錯， 原因：見文末補充介紹

• 創(chuàng)建一個讀取文件方法readFs.js，和一個數(shù)據(jù)test.json

讀取方法：

const fs = require('fs')
// 讀取文件方法
function readFile(path){
    return new Promise((resolve, reject)=>{
        fs.readFile(path, { flag: 'r', encoding:'utf-8' }, (err, data) => {
            if (err) { reject('出錯啦'); }
            resolve(data);
        }); 
    })
}

module.exports = { readFile }

測試數(shù)據(jù)：

[
    {
        "name": "張三",
        "age": 18,
        "sex": "boy"
    },
    {
        "name": "李四",
        "age": 47,
        "sex": "boy"
    }
]

然后在electron_main中調(diào)用看看：

let con = readFile('./src/assets/fs/test.json')
con.then(res=>{
  console.log(res)
})

發(fā)現(xiàn)在控制臺打印時會出現(xiàn)中文亂碼：

解決方法：修改package.json中的start: chcp 65001 && electron .

• 現(xiàn)在主進(jìn)程中已經(jīng)能夠成功讀取文件的數(shù)據(jù)了，那么如何將此數(shù)據(jù)傳遞給界面（渲染進(jìn)程）呢，需要使用到ipcMain和ipcRenderer來進(jìn)行相互通信。

• ipcMain： 從主進(jìn)程到渲染器進(jìn)程的異步通信，在主進(jìn)程中
• ipcRenderer： 從渲染器進(jìn)程到主進(jìn)程的異步通信，在渲染進(jìn)程中，之前已經(jīng)定義為window.ipcRenderer了， 地址：www.electronjs.org/zh/docs/lat…

electron_main.js: 使用event.sender.send可以在ipcMain中將數(shù)據(jù)傳遞到渲染器進(jìn)程中。

...

// 監(jiān)聽渲染進(jìn)程發(fā)來的消息
ipcMain.on('render-msg', async (event, arg) => {
  if (arg == '獲取人物信息') {
    let con = await readFile('./src/assets/fs/test.json')
    event.sender.send('person-list', con)
  }
})

...

這里在vue的組件中使用ipcRenderer先向主進(jìn)程發(fā)送一個獲取人物信息的請求，

效果：

其實關(guān)于文件的寫入也是相同，只不過是渲染進(jìn)程直接向主進(jìn)程發(fā)送數(shù)據(jù)即可。

雖然這應(yīng)該是一個比較簡單的 api 實現(xiàn)，但是在過程上要注意各種配置，否則極容易出現(xiàn)報錯，這時候就要去網(wǎng)上搜索解決方案了

補充介紹：Uncaught TypeError: fs.existsSync is not a function錯誤

錯誤代碼

Uncaught TypeError: fs.existsSync is not a function

    at getElectronPath (index.js?bdb9:7)

    at eval (index.js?bdb9:18)

    at Object../node_modules/electron/index.js (chunk-vendors.js:3159)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (reply.js?17a1:1)

    at Module../src/ipc/reply.js (app.js:1145)

    at __webpack_require__ (app.js:854)

    at fn (app.js:151)

    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:4)

在 Electron 的Issue #7300中找到了解決方案，作為一名 Electron 以及 Web 前端的初學(xué)者，自然要在此問題上稍加分析，爭取多了解一些背景知識，提高學(xué)習(xí)質(zhì)量。

此問題出現(xiàn)的原因為：nodejs 運行時的 require 與編譯時 webpack 的 require 是不同的。默認(rèn)情況下，window是全局的，然而在 webpack 編譯時會忽略window。

其他的解決方案：使用 preload 方法

mainWindow =new BrowserWindow({
????width: 800,
????height: 600,
????webPreferences: {
??????nodeIntegration: false,
??????preload: __dirname + '/preload.js'????}

??});

在 preload.js 文件中將要使用的模塊引入即可

window.ipcRenderer = require('electron').ipcRenderer;

到此這篇關(guān)于vue + electron應(yīng)用文件讀寫操作的文章就介紹到這了,更多相關(guān)vue electron文件讀寫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論